找回密码
 立即注册

QQ登录

只需一步,快速开始

Bella.Yuan Wyn认证
超级版主   /  发表于:2024-10-8 11:58  /   查看:278  /  回复:0
本帖最后由 Bella.Yuan 于 2024-11-7 15:29 编辑

最近发现大家针对图表这块有时有一些特殊的需求。针对特殊的需求,我们需要不同的实现方法,最近看到这个图表需求,双横轴的柱状图,数值有负数,但是0的横轴依旧需要显示,那针对这个需求该如何实现,下面我们就来一起看看具体实现过程吧。
实现方法:使用多绘图区域来实现
1、图表组件选择柱形图,添加多个绘图区域(2个绘图区域),选择不同的绘图区域绑定对应的数据,这里我的数据如下:
数据:
  1. [{"地区":"华北","数量":10},
  2. {"地区":"华东","数量":-8},
  3. {"地区":"东北","数量":20},
  4. {"地区":"西北","数量":-5},
  5. {"地区":"西南","数量":10}
  6. ]
复制代码

添加绘图区域:
image.png70877989.png

绑定数据:
image.png679385986.png
2、设置各个轴的属性
1)将2个柱子调整成1个柱子,这里调整任意一个绘图区域的不透明度
image.png178766478.png
2)y轴有2个,取消多余的y轴
image.png43414916.png
3)有2个横轴,修改一个横轴从原点0开始
image.png702770385.png
4)取消纵轴的网格线
image.png766971740.png
5)取消横轴的坐标标签显示
image.png60605772.png
3、预览效果:
image.png570893249.png
这里为了显示更直观,我修改了坐标轴的样式
image.png747937926.png
附件是实现后的demo,大家若有需要,可以下载后导入自己的环境看看。


wyn-export-20241008115754.zip

6.13 KB, 下载次数: 4

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部