3D柱状图

1.html标签

<Echarts :option="barOption" />

2.data里面定义barOption

barOption: {},

3.js部分代码

initEcharts(maxArr) { // maxArr 阴影最大值
      const data = this.currentData.yDataAll   // 后端数据
      const data2 = this.currentData.yDataTC // 后端数据
      const colorArr2 = ['#53CA5E', '#177632', '#9DEFA2']    // 柱子颜色
      const colorArr = ['#1B7FDB', '#0747A7', '#3EA3F2']    // 柱子颜色
      const colorArr3 = ['#03235D', '#021339', '#0F457B']  // 阴影颜色
      const colorArr4 = ['#143739', '#051F2F', '#305353'] // 阴影颜色
      var color = {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[1],
          },
          {
            offset: 1,
            color: colorArr[1],
          },
        ],
      }
      var color2 = {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: colorArr2[0],
          },
          {
            offset: 0.5,
            color: colorArr2[0],
          },
          {
            offset: 0.5,
            color: colorArr2[1],
          },
          {
            offset: 1,
            color: colorArr2[1],
          },
        ],
      }
      var color3 = {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: colorArr3[0],
          },
          {
            offset: 0.5,
            color: colorArr3[0],
          },
          {
            offset: 0.5,
            color: colorArr3[1],
          },
          {
            offset: 1,
            color: colorArr3[1],
          },
        ],
      }
      var color4 = {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: colorArr4[0],
          },
          {
            offset: 0.5,
            color: colorArr4[0],
          },
          {
            offset: 0.5,
            color: colorArr4[1],
          },
          {
            offset: 1,
            color: colorArr4[1],
          },
        ],
      }
      var barWidth = 25
      this.barOption = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var str = params[0].name + ':'
            params.filter(function (item) {
              if (item.componentSubType == 'bar') {
                str += '<br/>' + item.seriesName + '：' + item.value
              }
            })
            return str
          },
        },
        dataZoom: [
          {
            show: false,
            height: 0,
            xAxisIndex: 0,
            filterMode: 'empty',
            bottom: '22',
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示5个
            handleIcon:
              'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '100%',
            handleStyle: {
              color: 'rgba(205,205,205,1)',
              borderColor: 'rgba(205,205,205,1)',
            },
            textStyle: {
              color: '#fff',
            },
            borderColor: '#358efb',
          },
          {
            type: 'inside',
            xAxisIndex: 0,
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
          },
        ],
        // legend: {
        //   data: ["全国", "铜川市"],
        //   right: 1,
        //   textStyle: {
        //     color: "#95AFDB",
        //     fontSize: 14,
        //   },
        //   itemWidth: 12,
        //   itemHeight: 10,
        //   itemGap: 35,
        //   color: "#242424",
        //   selectedMode: false,
        // },
        // 图表大小位置限制
        grid: {
          x: '5%',
          x2: '5%',
          y: '15%',
          y2: '25%',
        },
        xAxis: {
          data: this.allData.xData,
          offset: 25,
          // 坐标轴
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: '#214776',
            },
            textStyle: {
              color: '#fff',
              fontSize: '10',
            },
          },
          type: 'category',
          axisLabel: {
            textStyle: {
              color: '#6487C9',
              fontWeight: 500,
              fontSize: '11',
            },
          },
          axisTick: {
            textStyle: {
              color: '#fff',
              fontSize: '16',
            },
            show: false,
          },
          axisLine: {
            // 坐标轴轴线相关设置。数学上的x轴
            show: false,
            lineStyle: {
              type: 'dashed', // 线的类型 虚线
              color: '#DEDEDE',
            },
          },
        },
        yAxis: {
          nameTextStyle: {
            color: '#DEDEDE',
            fontSize: 12,
            padding: 10,
          },
          min: 0, // 最小
          max: Math.max(...this.currentData.yDataAll) + 100, // 最大
          interval: 500, // 相差
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed', // 线的类型 虚线0
              opacity: 0.2, // 透明度
            },
          },
          axisTick: { show: false },
          axisLine: { show: false },
          // 坐标值标注
          axisLabel: {
            show: false,
            textStyle: {
              color: '#C5DFFB',
            },
          },
        },
        series: [
          // 中
          {
            z: 2,
            name: '全国',
            type: 'bar',
            barWidth: barWidth,
            barGap: '0%',
            data: data,
            showBackground: true,
            backgroundStyle: {
              color: color3,
            },
            itemStyle: {
              normal: {
                color: color,
                // 柱形图上方标题
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#2294EB',
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
          },
          // 下
          {
            z: 1,
            name: '绿色',
            type: 'pictorialBar',
            data: data.map((item) => item + 90),
            symbol: 'diamond',
            symbolOffset: ['-65%', '50%'],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color,
              },
            },
            tooltip: {
              show: false,
            },
          },
          // 上
          {
            z: 2,
            name: '绿色',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: data,
            symbol: 'diamond',
            symbolOffset: ['-85%', '-60%'],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderWidth: 2,
                color: colorArr[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
          // 阴影上方正方形的样式
          {
            name: '绿色',
            legendHoverLink: false,
            symbolOffset: [-16, -3], // 椭圆水平偏移,垂直偏移. 因为不一定正好盖住柱形,所以可能要移动一点点
            tooltip: {
              show: false,
            },
            type: 'pictorialBar',
            color: colorArr3[2],
            itemStyle: {
              // opacity: 0.75,
            },
            symbol: 'diamond',
            symbolSize: ['30%', 20 / 2.5],
            symbolPosition: 'end', // 图形边缘与柱子结束的地方内切。
            data: maxArr, // 数据要跟主体柱形一致
            z: 2, // 数值越大,层级越高,可以盖住下面的图形
          },
          {
            z: 2,
            name: '铜川市',
            type: 'bar',
            barWidth: barWidth,
            barGap: '30%',
            data: data2,
            showBackground: true,
            backgroundStyle: {
              color: color4,
            },
            itemStyle: {
              normal: {
                color: color2,
                // 柱形图上方标题
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#5FE666',
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
              },
            },
          },
          {
            z: 1,
            name: '蓝色',
            type: 'pictorialBar',
            data: data2.map((item) => item + 90),
            symbol: 'diamond',
            symbolOffset: ['65%', '50%'],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color2,
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 2,
            name: '蓝色',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: data2,
            symbol: 'diamond',
            symbolOffset: ['75%', '-50%'],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderWidth: 2,
                color: colorArr2[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: '蓝色',
            legendHoverLink: false,
            symbolOffset: [16, -3], // 椭圆水平偏移,垂直偏移. 因为不一定正好盖住柱形,所以可能要移动一点点
            tooltip: {
              show: false,
            },
            type: 'pictorialBar',
            color: colorArr3[2],
            itemStyle: {},
            symbol: 'diamond',
            symbolSize: ['30%', 20 / 2.5],
            symbolPosition: 'end', // 图形边缘与柱子结束的地方内切。
            data: maxArr, // 数据要跟主体柱形一致
            z: 2, // 数值越大,层级越高,可以盖住下面的图形
          },
        ],
      }
    },