桑基图（Echarts）——自定义风格

最新推荐文章于 2024-05-24 17:52:25 发布

佯佯Young

最新推荐文章于 2024-05-24 17:52:25 发布

阅读量2.6w

点赞数 13

分类专栏： Echarts 文章标签：桑基图自定义样式 echarts

本文链接：https://blog.csdn.net/yy284872497/article/details/88550116

版权

桑基图绘制——使用Echarts

桑基图（Sankey diagram），即桑基能量分流图，也叫桑基能量平衡图。它是一种特定类型的流程图，图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。

数据要求：桑基图理论上只支持有向无环图（DAG, Directed Acyclic Graph），所以要确保可视化数据中的边是无环的。

本篇以北京、上海的移民统计为例，参照Echarts官方提供的示例代码，介绍如何定制自己风格的桑基图。

一、节点和边设置统一风格

第一种样式主要是统一对节点和边进行了风格设置，城市节点统一为深蓝色#1b6199，边为一个渐变效果，效果如下图：
在这里插入图片描述

1、数据格式

数据包括城市节点和两城市间的移民统计：

var citylist = [
     {
   name: '北京'},
     {
   name: '上海'},
     {
   name: '广州'},
     {
   name: '深圳'},
     {
   name: '香港'}
];

var population=[
     {
   source: "广州", target: "北京", value: 4567},
     {
   source: "广州", target: "上海", value: 2060},
     {
   source: "深圳", target: "北京", value: 1234},
     {
   source: "深圳", target: "上海", value: 124},
     {
   source: "香港", target: "北京", value: 3714},
     {
   source: "香港", target: "上海", value: 3234}
];

2、样式配置

系列列表series中itemStyle用来设置节点的样式，lineStyle用来设置边的样式。注意：在series中设置的样式应用于所有数据的渲染。具体代码如下：

itemStyle: {
   
	 borderWidth: 1,   //设置节点的边界宽度
	 color:'#1b6199',  //设置节点颜色
	 borderColor: '#fff'   //设置节点的边界颜色色
},
lineStyle: {
   
	 //线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比
	 color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
     //设置边为水平方向渐变
     	  offset: 0,
     	  color: '#136bff'
	 },{
   
	      offset: 1