echarts绘制棱形立体柱状图

data: [
        { name: '机组1', value: 28 },
        { name: '机组2', value: 27 },
        { name: '机组3', value: 30 },
        { name: '机组4', value: 32 },
        { name: '机组5', value: 22 }
      ],
      color: [
        {
          startColor: '#53C7FF',
          endColor: 'rgba(83, 199, 255, 0.1)',
          topStartColor: '#53C7FF',
          topEndColor: '#53C7FF',
          leftStartColor: '#53C7FF',
          leftEndColor: 'rgba(83, 199, 255, 0.1)',
          rightStartColor: '#53C7FF',
          rightEndColor: 'rgba(83, 199, 255, 0.1)'
        },
        {
          startColor: '#76C6C4',
          endColor: 'rgba(118, 198, 196, 0.1)',
          topStartColor: '#76C6C4',
          topEndColor: '#76C6C4',
          leftStartColor: '#76C6C4',
          leftEndColor: 'rgba(118, 198, 196, 0.1)',
          rightStartColor: '#76C6C4',
          rightEndColor: 'rgba(118, 198, 196, 0.1)'
        }
      ]

{
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.data.map((i) => i.name),
          // x坐标轴为虚线
          axisLine: {
            lineStyle: {
              color: '#BAC6D0',
            },
          },
          // 不展示下面｜
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: '#B0E1FF',
            fontSize: 12, // 字体大小
          },
        },
        yAxis: {
          type: 'value',
          // 不展示刻度线
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#B2C2D3'],
              type: 'dashed',
              opacity: 0.5,
            },
          },
          axisLabel: {
            show: true,
            color: '#B0E1FF',
            fontSize: 12, // 字体大小
          },
        },
        // 栅格
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 10,
          containLabel: true,
        },
        series: [
          // 数据低下的圆片
          // {
          //   name: '',
          //   type: 'pictorialBar',
          //   symbol: 'diamond',
          //   symbolSize: [16, 9], // 宽，高
          //   symbolOffset: [0, 5], // 左 上
          //   symbolPosition: 'start',
          //   z: 1,
          //   data: this.data,
          //   itemStyle: {
          //     color: (params) => {
          //       return new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         { offset: 0, color: params.data.topStartColor },
          //         { offset: 1, color: params.data.topEndColor },
          //       ])
          //     },
          //   },
          // },
          // 数据的柱状图
          {
            name: '',
            type: 'bar',
            barWidth: 8, // 柱条的宽度，不设时自适应。
            data: this.data,
            itemStyle: {
              color: (params) => {
                const i = params.dataIndex
                return new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: i%2 === 1 ? _this.color[0].leftStartColor : _this.color[1].leftStartColor },
                  { offset: 1, color: i%2 === 1 ? _this.color[0].leftEndColor : _this.color[1].leftEndColor }
                ])
              }
            }
          },
          {
            name: '',
            type: 'bar',
            barWidth: 8, // 柱条的宽度，不设时自适应。
            barGap: 0, // 不同系列的柱间距离
            data: this.data,
            itemStyle: {
              color: (params) => {
                const i = params.dataIndex
                return new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: i%2 === 1 ? _this.color[0].rightStartColor : _this.color[1].rightStartColor },
                  { offset: 1, color: i%2 === 1 ? _this.color[0].rightEndColor : _this.color[1].rightEndColor  }
                ])
              },
              borderWidth: 0.1,
              borderColor: 'transparent'
            }
          },
          // 数据顶部的样式
          {
            name: '',
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolSize: [16, 9],
            symbolOffset: [0, -4],
            symbolPosition: 'end',
            z: 3,
            itemStyle: {
              color: (params) => {
                const i = params.dataIndex
                return new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: i%2 === 1 ? _this.color[0].topStartColor : _this.color[1].topStartColor},
                  { offset: 1, color: i%2 === 1 ? _this.color[0].topEndColor : _this.color[1].topEndColor }
                ])
              },
              label: {
                show: false, // 开启显示
                position: 'top', // 在上方显示
                textStyle: {
                  fontSize: '12',
                  color: '#B0E1FF'
                }
              }
            },
            data: this.data
          }
        ]
      }