本帖最后由 Bella.Yuan 于 2024-11-7 15:29 编辑
最近发现大家针对图表这块有时有一些特殊的需求。针对特殊的需求,我们需要不同的实现方法,最近看到这个图表需求,双横轴的柱状图,数值有负数,但是0的横轴依旧需要显示,那针对这个需求该如何实现,下面我们就来一起看看具体实现过程吧。 实现方法:使用多绘图区域来实现 1、图表组件选择柱形图,添加多个绘图区域(2个绘图区域),选择不同的绘图区域绑定对应的数据,这里我的数据如下: 数据: - [{"地区":"华北","数量":10},
- {"地区":"华东","数量":-8},
- {"地区":"东北","数量":20},
- {"地区":"西北","数量":-5},
- {"地区":"西南","数量":10}
- ]
复制代码
添加绘图区域:
绑定数据: 2、设置各个轴的属性 1)将2个柱子调整成1个柱子,这里调整任意一个绘图区域的不透明度
2)y轴有2个,取消多余的y轴
3)有2个横轴,修改一个横轴从原点0开始
4)取消纵轴的网格线
5)取消横轴的坐标标签显示
3、预览效果:
这里为了显示更直观,我修改了坐标轴的样式
附件是实现后的demo,大家若有需要,可以下载后导入自己的环境看看。
|