在 vue2 中实现 echarts 立体方形柱状图及立体圆柱

本文主要是介绍在 vue2 中实现 echarts 立体方形柱状图及立体圆柱,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、在做大屏项目时,为了页面不显得单调,有时设计会设计些立体的柱状图,前几天做大屏刚好遇到,记录一下。echarts本身没有配置直接配置立体图,立体图实质是三个图形合并堆积形成的视觉效果,分别是上面的盖,中间主体和下面的底,再配合中间主体的渐变颜色而实现。本文默认都是使用过echarts的,常规项不赘述,只看option的配置项,先上效果。

2、立体方块图 

   pdChartOption(){let yList = [55,69,48,20,71]let xData = ['20240901','20240902','20240903','20240904','20240905'];let y2List = [20,15,10,18,16]let yAndy2 = [75,84,58,38,87]let indexList = [1,3]let that = thislet color = ["#CC1CAA","#8D67FF","#00FFFF","#48DE13","#FFC516","#DC3E14","#8E16F8",];let dom = 300;let barWidth = 25; //设置柱子宽度let colors = [];colors.push({type: "linear",x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: "#608efa", // 最上边},{offset: 0.5,color: "#5886f7", // 中间过渡},{offset: 0.5,color: "#5886f7cc", // 中间过渡},{offset: 1,color: "#2656f4", //下边},],});colors.push({type: "linear",x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: "#fe8686", // 最上边},{offset: 0.5,color: "#fe5858", // 中间过渡},{offset: 0.5,color: "#fe5858cc", // 中间过渡},{offset: 1,color: "#fe0b0c", //下边},],});colors.push({type: "linear",x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: "#3ace5f", // 最上边},{offset: 0.5,color: "#22b146", // 中间过渡},{offset: 0.5,color: "#22b146cc", // 中间过渡},{offset: 1,color: "#1aa83e", //下边},],});let option = {// backgroundColor: "#010d3a", //背景颜色//提示框tooltip: {trigger: "axis",formatter: function (params) {let count = 0indexList.forEach( e => {if (params[0].dataIndex == e) {count ++} }) //用来判断%数值的正负,显示红色还是绿色,下同,此处是判断显示提示框的 ‘+’‘-’号return `<div style="display:flex;"><div style="margin-right:.3125rem;">${params[0].name} : </div><div>${params[0].value} </br>${count > 0 ? '-':''} ${params[1].value}%</div></div>`},axisPointer: {//坐标轴指示器,坐标轴触发有效type: "shadow", // 默认为直线,可选为:'line' | 'shadow'},},/**区域位置*/grid: {left: "10%",right: "5%",top: "10%",bottom: "18%",},//X轴xAxis: {data: xData,type: "category",axisLine: {show: false,lineStyle: {color: "rgba(0,0,0,1)",shadowColor: "rgba(0,0,0,1)",shadowOffsetX: "20",},symbol: ["none", "arrow"],},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {color: "#000",margin: 10, //x轴字离x轴的距离fontSize: 10,interval: 0, //使x轴文字显示全rotate: 0,},},yAxis: [{show: true,splitNumber: 4,axisLine: {show: false,},axisTick:{show:false,},splitLine: {show: true,lineStyle: {type: "dashed",color: "#a6d7ff",},},axisLabel: {color: "#000",margin: 10,fontSize: 12,},},{  type:'value',position: 'right',axisLabel: { //y轴设置为%show: false,interval: 'auto',formatter: '{value} %',},axisTick:{show:false,},axisLine: {show:false},splitLine: {show: false,lineStyle: {color:'#B7D0FF',type:'dashed'},},},],series: [{type: "bar",stack: 'pd',large: true,yAxisIndex: 0,barWidth: barWidth,showBackground: false, //显示柱子的背景颜色itemStyle: {normal: {color: function (params) {return colors[0];},},},label: {show: false,position: [-8, 0],color: "#6587f7",fontSize: 14,fontStyle: "bold",align: "center",},data: yList,},{type: "bar",stack: 'pd',large: true,yAxisIndex: 1,barWidth: barWidth,showBackground: false, //显示柱子的背景颜色itemStyle: {normal: {color: function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return colors[2];} else {return colors[1];}},},},label: {show: true,position: [10, -20],//   color: "#fe090a",color:function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return "#3ed565";} else {return "#fe090a";}},fontSize: 12,align: "center",formatter: function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return '-' + params.value + '%';} else {return '+' + params.value + '%';}},},data: y2List,},{//下面的顶z: 2,type: "pictorialBar",data: yList,symbol: "diamond",symbolOffset: [0, "50%"],symbolSize: [barWidth, barWidth * 0.5],itemStyle: {normal: {color: function (params) {return colors[0];},},},},{//下面的顶z: 4,type: "pictorialBar",data: yList,symbolPosition: "end",symbol: "diamond",symbolOffset: [0, -6],symbolSize: [barWidth, barWidth * 0.5],itemStyle: {normal: {color: function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return colors[2];} else {return colors[1];}},},},},{//上面的顶z: 5,type: "pictorialBar",symbolPosition: "end",data: yAndy2,symbol: "diamond",symbolOffset: [0,-6],symbolSize: [barWidth, barWidth * 0.5],itemStyle: {normal: {borderWidth: 0,color: function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return colors[2];} else {return colors[1];}},},},},],dataZoom: [ //数据量大,横向排不下可开启缩放和左右滑动显示{show: true,height: 10,xAxisIndex: [0],bottom: 5,start: 0, //默认开始点end: 7, //默认结束点,即一屏显示的数据项个数handleSize: "100%",handleStyle: {color: "#d3dee5",},textStyle: {color: "#fff",},borderColor: "#90979c",},{type: "inside",show: true,height: 10,start: 1,end: 35,},],};return option;},

3、立体圆柱形

     ydChartOption(){let currData = [100,120,115,160,80] let perData = [56,80,77,70,65]let rateData = [10,5,8,12,6]let that = this;let option = {color:['#25af00'],tooltip: {trigger: 'axis',formatter: function (params) {return `<div> <div>${params[0].name}</div><div>当前:${params[0].value}</div><div>环比:${params[1].value}</div><div>涨幅:${params[2].value}%</div></div>`},},grid:{top:"30",left:'40',right:"45",bottom:"20",},xAxis: {data: ['20240901','20240902','20240903','20240904','20240905'],axisTick:{show:false,},axisLine: {lineStyle: {color: '#B7D0FF'}},axisLabel: {show: true, color:'#252525',fontSize:11,},},yAxis: [{  type:'value',axisLabel: {show: true,},axisTick:{show:false,},axisLine: {show:false},splitLine: {show: false,lineStyle: {color:'#B7D0FF',type:'dashed'},},},{  type:'value',position: 'right',axisLabel: { //y轴设置为%show: true,interval: 'auto',formatter: '{value} %',},axisTick:{show:false,},axisLine: {show:false},splitLine: {show: true,lineStyle: {color:'#B7D0FF',type:'dashed'},},},],series: [{name:'当前',data: currData,type: 'bar',barWidth:'25%',yAxisIndex: 0,smooth: true,barWidth: 16,lineStyle: {normal: {color:'#0060FF',width: 4,}},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#7ab1ff' },{ offset: 1, color: '#2b70ef' }]),},},{name:'环比',data: perData,type: 'bar',barWidth:'25%',yAxisIndex: 0,smooth: true,barWidth: 16,lineStyle: {normal: {color:'rgb(0,187,84)',width: 4,}},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ffba81' },{ offset: 1, color: '#fe6f04' }]),},},{name:'涨幅',data: rateData,type: 'line',yAxisIndex: 1,smooth: false,showSymbol:true,lineStyle: {normal: {color:'#25af00',width: 2,}},},//以下代码为柱状图上下的盖{//下面的底z: 3,type: "pictorialBar",data: currData,// symbol: "diamond",symbolOffset: [-10.5, 5],symbolSize: [16, 8],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#7ab1ff' },{ offset: 1, color: '#2b70ef' }]),},},},{//上面的顶z: 4,type: "pictorialBar",symbolPosition: "end",data: currData,// symbol: "diamond",symbolOffset: [-10.5, -5],symbolSize: [16, 8],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#7ab1ff' },{ offset: 1, color: '#2b70ef' }]),},},},{//下面的底z: 5,type: "pictorialBar",data: perData,// symbol: "diamond",symbolOffset: [10.5, 5],symbolSize: [16, 8],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ffba81' },{ offset: 1, color: '#fe6f04' }]),},},},{//上面的顶z: 6,type: "pictorialBar",symbolPosition: "end",data: perData,// symbol: "diamond",symbolOffset: [10.5, -5],symbolSize: [16, 8],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ffba81' },{ offset: 1, color: '#fe6f04' }]),},},},],legend: [{data:['当前','环比','涨幅'],show: true,orient: 'horizontal',right: 'left',top: 0,}]};return option;}

这篇关于在 vue2 中实现 echarts 立体方形柱状图及立体圆柱的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139231

相关文章

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分