桑基图自定义节点颜色和边的颜色

最新推荐文章于 2025-04-24 22:44:55 发布

林-福宝

最新推荐文章于 2025-04-24 22:44:55 发布

阅读量2.6k

点赞数 3

本文链接：https://blog.youkuaiyun.com/ikisstherain/article/details/118438752

版权

这篇博客展示了如何在数据可视化中定制节点和边的样式，以增强图表的可读性和美观性。通过定义`itemStyle`和`lineStyle`，可以分别设置节点的颜色和边框颜色，以及边的颜色，从而突出不同元素的重要性和关系。示例代码详细说明了这些配置在实际应用中的使用方法。

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

在data中设置lineStyle是边的样式，itemStyle是节点样式

{
"nodes":[
{"name":"I6310","itemStyle": {
                        "color": "#91cc75",
                        "borderColor": "#91cc75"
                    }},
{"name":"发现明文口令传输",
                    "itemStyle": {
                        "color": "#f18bbf",
                        "borderColor": "#f18bbf"
                    }},
{"name":"I608",
                    "itemStyle": {
                        "color": "#0078D7",
                        "borderColor": "#0078D7"
                    }},
{"name":"Web弱口令登录"},
{"name":"E1381"}
],
"links":[
{"source": "I6310", "target": "发现明文口令传输", "value": 12,"lineStyle": {"color": "#00ff00"}},
{"source": "发现明文口令传输", "target": "I608", "value": 12, "lineStyle": {"color": "#ffff00"}},
{"source": "I6310", "target": "Web弱口令登录", "value": 12, "lineStyle": {"color": "#0078D7"}},
{"source": "Web弱口令登录", "target": "I608", "value": 12, "lineStyle": {"color": "#0078D7"}}
]
}