在 echarts 中，如果需要将四个柱子合并成两两合并的两个柱子使用堆积图很简单，只要将设置对应的 stack 就可以了，但是需要需要实现下图这样的效果就不能使用堆积图了。需要将四个柱子两两重合成两个柱子。
image.png
echarts 提供了 barGap 属性，但是看过文档对 barGap 的解释后。我陷入了沉思。
文档是这样解释 barGap 的：
image.png
同一坐标系，此属性会被多个 bar 共享。
经过一番百度后发现，echarts 是可以有多个 x 轴的，我们让前两个柱子放在 x1 轴，让后面两个柱子放在 x2 轴，然后设置 barGap 为 -100% 就可以了，然后把 x2 轴给隐藏掉。
这里我使用了 v-charts，用原生的 echarts 代码也类似
setting: {
// 定义了有几个维度
dimension: ["area", "area"],
},
extend: {
xAxis(v) {
v &&
v.forEach((ele, index) => {
if (index == 1) {
ele.show = false;
}
ele.axisLine = {
show: true,
lineStyle: {
type: "solid",
color: "#D9D9D9",
},
};
ele.axisLabel = {
color: "#303133",
};
ele.axisTick = {
alignWithLabel: true,
};
});
return v;
},
series(arr) {
arr &&
arr.forEach((ele, index) => {
if (index == 0 || index == 1) {
ele.xAxisIndex = 1;
}
ele.barWidth = 20;
ele.barCategoryGap = "50%";
ele.itemStyle = {
barBorderRadius: 10,
};
});
return arr;
},
}
