项目背景
接到需求是这样的，绘制堆叠的柱状图，其中每一部分的背景色及高度由数据值计算出来，如下图所示：
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的位置定义。
想要深入了解的同学可以在评论区留言。
