echarts中桑基图的二三事

文章介绍了如何通过layoutIterations设置自定义节点顺序,通过nodeGap调整节点间距避免文字重叠,利用gradient创建渐变色边提升图表美观度,以及在itemStyle中定义节点颜色以满足个性化需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.自定义节点的顺序(layoutIterations)

实际开发的过程中,领导肯定让你指定桑基图的排列顺序(想都别想),这个时候layoutIterations就闪亮登场了!!

先来看一下官方的解释

是不是看不懂,巧了不是,我也看不懂,实际上只需要理解最后一句话就好了

series:[{layoutIterations: 0,}]

将它的值设置为0,桑基图的节点顺序就会按照data中排列的顺序依次往下排,这个时候想怎么排就这么排,谁也管不了你

2.节点的间距(nodeGap)

桑基图的默认间距是8,大部分情况下会出现节点名字重叠的情况,建议设置16适应大部分情况

series:[{nodeGap: 16,}]

3.渐变色边(gradient)

这个!这个!你不能不了解,桑基图好不好看全靠它了,除非领导是抽象审美

series:[{lineStyle: {color: 'gradient',opacity: 0.6},}]

图一没加,图二加了,我倒要看看谁说图一好看!

4.节点颜色(itemStyle)

每个节点的颜色也是需要自定义的,如果使用默认的颜色一言难尽,当然了领导也不会同意的

series:[

{        data:[{   name:"雷霆半月斩!",itemStyle:{ color:'green'}     }]        }

],

提醒一下,节点颜色一定要写在data里的itemStyle中

一个好看的桑基图基本上主要就靠这几个配置了,再也不用担心领导改需求了

 

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值