在 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 立体方形柱状图及立体圆柱的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---