echarts四个柱子怎么合并成两个柱子?无法使用堆积图
2023-03-14 22:54:57 时间
在 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;
},
}
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的