echarts四个柱子怎么合并成两个柱子？无法使用堆积图

玖柒的小窝

修改于 2021-11-16 17:24:05

6980

修改于 2021-11-16 17:24:05

文章被收录于专栏：各类技术文章~各类技术文章~

在 echarts 中，如果需要将四个柱子合并成两两合并的两个柱子使用堆积图很简单，只要将设置对应的 stack 就可以了，但是需要需要实现下图这样的效果就不能使用堆积图了。需要将四个柱子两两重合成两个柱子。

echarts 提供了 barGap 属性，但是看过文档对 barGap 的解释后。我陷入了沉思。文档是这样解释 barGap 的：

同一坐标系，此属性会被多个 bar 共享。

经过一番百度后发现，echarts 是可以有多个 x 轴的，我们让前两个柱子放在 x1 轴，让后面两个柱子放在 x2 轴，然后设置 barGap 为 -100% 就可以了，然后把 x2 轴给隐藏掉。

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;
    },
}

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

echarts