echarts中桑基图的二三事

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
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值