前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >echarts四个柱子怎么合并成两个柱子?无法使用堆积图

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

作者头像
玖柒的小窝
修改2021-11-16 17:24:05
6960
修改2021-11-16 17:24:05
举报
文章被收录于专栏:各类技术文章~各类技术文章~

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

2145_1.png
2145_1.png

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

2147_1.png
2147_1.png

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

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

代码语言:javascript
复制
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 删除。

本文系转载前往查看

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档