echarts-3d柱状图

let name = [
  '测试一',
  '测试二',
  '测试三',
  '测试四',
  '测试五',
  '测试六',
  '测试七',
  '测试八',
  '测试九'
];
let value = [1, 5, 4, 6, 7, 2, 45, 67, 9];
let toolTims = null;
const offsetX = 16; // 宽16
const offsetY = 8; // 倾斜角度
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    // shape是从custom传入的，由x轴的值，y轴的值，数据个数，最大值等共同决定的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y - offsetX * 0.2];
    const c1 = [shape.x - offsetX, shape.y - offsetY];
    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  }
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y - offsetX * 0.2];
    const c2 = [xAxisPoint[0], xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
    const c4 = [shape.x + offsetX, shape.y - offsetY];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  }
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y - offsetX * 0.2];
    const c2 = [shape.x + offsetX, shape.y - offsetY];
    const c3 = [shape.x, shape.y - offsetX * 0.8];
    const c4 = [shape.x - offsetX, shape.y - offsetY];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  }
});
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);
// 主体
option = {
  backgroundColor: '#010d3a',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none'
    },
    formatter: function (params) {
      const item = params[1];
      return `${item.name}:${item.value}%`;
    }
  },
  grid: {
    top: '8%',
    left: '5%',
    right: '5%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: name,
    axisLine: {
      lineStyle: {
        color: '#475D72'
      }
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: '#fff'
      }
    }
  },
  yAxis: {
    name: '（处理率）',
    nameTextStyle: {
      fontSize: 18
    },
    type: 'value',
    // y
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      fontSize: 18
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: [10, 5],
        dashOffset: 10,
        color: '#2E3A45'
      }
    }
  },
  series: [
    // 柱体
    {
      name: '',
      type: 'custom',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#088bff'
                  },
                  {
                    offset: 1,
                    color: '#088bff00'
                  }
                ])
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#088bff'
                  },
                  {
                    offset: 1,
                    color: '#088bff00'
                  }
                ])
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#61b5ff'
                  },
                  {
                    offset: 1,
                    color: '#61b5ff'
                  }
                ])
              }
            }
          ]
        };
      },
      data: value
    },
    // bar顶部数量
    {
      name: '',
      type: 'bar',
      label: {
        normal: {
          show: true,
          position: 'top',
          formatter: (e) => {
            return `${e.value}%`;
          },
          fontSize: 16,
          color: '#43C4F1',
          offset: [0, -15]
        }
      },
      itemStyle: {
        color: 'transparent'
      },
      tooltip: {},
      data: value
    }
  ]
};
// tooltip自动轮播 若使用请做销毁处理
// if (option && typeof option === "object") {
//     var index = 0;
//     toolTims = setInterval(function () {
//         myChart.dispatchAction({
//             type: 'showTip',
//             seriesIndex: 0,
//             dataIndex: index
//         });
//         index++;
//         if (index >= 7) {
//             index = 0;
//         }
//     }, 2800);
// }