首页 前端知识 echarts中桑基图的二三事

echarts中桑基图的二三事

2024-09-04 23:09:48 前端知识 前端哥 503 459 我要收藏

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中

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

 

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17633.html
标签
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!