Echarts 定制化图表绘制-stack bar

项目背景

接到需求是这样的，绘制堆叠的柱状图，其中每一部分的背景色及高度由数据值计算出来，如下图所示：

image.png

---

技术分析

普通的echarts的图表每个柱状图代表一个分类，因此该方案脱离的传统echarts的图表定义和规范：

传统柱状堆积图

因此为了实现该方案就需要使用定制化的类型，下面列出核心的echarts option配置：

const renderItem = (params: any, api: any) => {
      const yValue = api.value(2) - api.value(1);

      const start = api.coord([api.value(0), api.value(1)]);
      const end = api.coord([api.value(0), api.value(2)]);
      const style = api.style();

      return {
        style,
        type: "rect",
        shape: {
          x: start[0] - 10,
          y: start[1],
          width: 20,
          height: end[1] - start[1],
        },
      };
    };

    const chartOptions = {
      xAxis: {
        type: "category",
        data: ["1月", "2月"],
      },
      series: {
        renderItem,
        type: "custom",
        encode: {
          x: 0,
          y: 2,
        },
        data: [[0, 0, 81], [0, 81, 201], [0, 201, 243], [1, 0, 210], [1, 210, 300]],
      },
    };

其中最关键的是对series的配置，使用renderItem传入定制化每个柱状块的绘制函数，type选择custom定制，encode表示下面的data二维数组对应坐标轴的映射，来看下官方的定义：

image.png

上图对应的链接来自ecahrts的官方自定义绘制教程：https://www.echartsjs.com/zh/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97

因此从图上看，在结合我们的配置跟数据我们会发现在这里我们把维度0映射到x轴，而把维度2映射到y轴，也就是在图上我们取得点是data中的[0,0,81]的0和81，而这两个值表示的含义是x轴第0个分类，并且其y轴的初始高度是81。

细心的小伙伴可能会问为啥y轴起始高度为什么不是维度1的0，因为echarts的绘制方式是从上到下的。

因此我们的的data的每一行就是一个柱状block的位置定义。

想要深入了解的同学可以在评论区留言。