在 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 = this
      let 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 = 0
               indexList.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 = 0
                   indexList.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 = 0
                   indexList.forEach( e => {
                     if (params.dataIndex == e) {
                       count ++
                     } 
                   })
                   if (count > 0 ) {
                     return "#3ed565";
                   } else {
                     return "#fe090a";
                   }
                },
              fontSize: 12,
              align: "center",
              formatter: function (params) {
                   let count = 0
                   indexList.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 = 0
                   indexList.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 = 0
                   indexList.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;
     }