[echarts] echarts发光斜角柱状图

做一个项目大屏，ui给了一个柱状图，从来没做过这样的，一看就很麻烦，一做果然麻烦，记录一下避免遇到同类型。

ui给的图：

分析：Y轴显示刻度隐藏轴线，X轴显示轴线内向刻度，斜向刻度标签。这些比较简单，echarts配置项文档里都有相关配置。难点在于柱状图为斜角柱状图并且顶部有发光点。

实施代码：

// 先注册一个图形
const myShape = {
    x: 0,
    y: 0,
    width: 10, //柱宽
  };

// 绘制左侧面
const InclinedRoofColumn = echarts.graphic.extendShape({
    shape: myShape,
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y - 6]; // 降低柱状图左侧高度以控制倾斜角度与倾斜方向
      const c1 = [shape.x - 10, shape.y];
      const c2 = [xAxisPoint[0] - 10, xAxisPoint[1]];
      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();
    },
  });
// 注册三个面图形
echarts.graphic.registerShape('InclinedRoofColumn', InclinedRoofColumn);

// 设置配置项
const option = reactive({
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: 10,
    right: 10,
    top: 10,
    bottom: 10,
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['点', '击', '柱', '子', '或', '者'], // 模拟数据
    axisLabel: {
      interval: 0,
    },
    axisTick: {
      alignWithLabel: true,
      interval: 0,
      inside: true,
      length: 2,
    },
    splitLine: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        fontSize: 11,
        color: '#8AC4FF',
      },
    },
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: true,
      alignWithLabel: true,
      interval: 0,
      inside: true,
      length: 2,
      lineStyle: {
        color: '#8AC4FF',
      },
    },
    axisLabel: {
      fontSize: 11,
      color: '#8AC4FF',
    },
    splitLine: {
      show: false,
    },
  },
  series: [
    {
      type: 'custom',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        const point = api.coord([api.value(0), 0]);

        return {
          type: 'group',
          children: [
            {
              type: 'InclinedRoofColumn', //使用刚才注册的图形
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0] + 5, //控制柱状图顶部偏移位置，使居中
                y: location[1],
                xAxisPoint: [point[0] + 5, point[1]], //控制柱状图底部偏移位置，使居中
              },
              style: {
                fill: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3273F3',
                  },
                  {
                    offset: 1,
                    color: 'rgba(13,36,76,0.3)',
                  },
                ]),
              },
            },
            {
              type: 'image',
              x: location[0] - 16,// 控制图片位置，将其添加到柱状图正中间
              scaleX: 1,
              y: location[1] - 21, // 控制图片位置，将其添加到柱状图最顶端
              style: {
                image: barHeader, //barHeader为ui给出的发光源切图
              },
            },
          ],
        };
      },
      data: [100, 182, 191, 234, 290, 330], //模拟数据
    },
  ],
});

效果图（未使用斜向刻度标签）：

总结：

使用echarts中的series属性custom类型，自定义图形，将手动编辑的柱状图与图片进行结合，这个操作平常很少用所以记录下来避免遗忘