数据可视化高级技术Echarts(桑基图&入门)

目录

一、什么是桑基图

二、基本特征

三、设计注意事项

四、使用Echarts进行初级绘制

1.首先不能忘记五个基本步骤

2.绘制的时需要将图像类型series.type设定为sankey类型。


一、什么是桑基图

桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图。它是一种特定类型的流程图,概述图中延伸的分支的宽度对应数据流量的大小,通常应用于能源、材料成分、金融等数据的可视化分析。因1898年Matthew Henry Phineas Riall Sankey绘制的"蒸汽机的能源效率图"而闻名,此后便以其名字命名为"桑基图"。

二、基本特征

桑基图最明显的特征就是,始末端的分支宽度总和相等,即所有主支宽度的总和应与所有分出去的分支宽度的总和相等,保持能量的平衡。

  1. 节点:桑基图由一系列节点组成,每个节点代表一个特定的实体或类别。例如,节点可以代表不同的产品、部门、地区等。

  2. 箭头:箭头表示流动的路径,从一个节点流向另一个节点。箭头的宽度通常表示流量或数量的大小。

  3. 流量量级:桑基图可以显示不同节点之间的流量量级,通过箭头的宽度来表示。宽度越大,表示流量或数量越大。

  4. 路径:桑基图可以显示多个节点之间的复杂路径,通过连接不同的节点和箭头来表示。

  5. 颜色编码:桑基图可以使用颜色来编码不同的节点或流动路径,以帮助用户更好地理解和区分不同的实体或类别。

三、设计注意事项

  1. **数据准备:**确保数据准备充分,包括节点和流量的数据。节点应该清晰明确,流量数据应该准确可靠。

  2. **简洁明了:**桑基图应该保持简洁明了,避免过多的节点和复杂的路径。过多的节点和路径可能会导致图表混乱不清晰,难以理解。

  3. **良好的布局:**选择合适的布局方式,使得节点和箭头的排列有一定的逻辑性。可以按照流动的方向或重要性进行布局。

  4. 色彩选择:选择合适的色彩来区分不同的节点和流动路径。颜色应该鲜明对比,以便用户能够清晰地区分不同的实体或类别。

  5. 箭头宽度控制:根据流量的大小,合理调整箭头的宽度。宽度应该能够直观地反映流量的差异,但也不能过于夸张。

  6. 标签和注释:为节点和箭头添加标签和注释,以便用户能够理解图表的含义。标签应该简洁明了,能够清晰地描述节点和流动的含义。

  7. 交互性:考虑为桑基图添加交互性,例如鼠标悬停显示详细信息、点击节点展开子节点等。交互性可以增强用户体验,使得用户能够更深入地探索数据。

四、使用Echarts进行初级绘制

1.首先不能忘记五个基本步骤

1.导入ECharts插件

<script type="text/javascript">

2.为ECharts准备一个DOM容器

<div id="main" style="width: 600px;height: 400px;"></div>

3.基于准备好的DOM,初始化echarts实例

var myChart=echarts.init(document.getElementById('main'));

  1. 指定图表的配置项和数据(对ECharts进行一些配置)

var option={ }

5.将配置和参数传递给ECharts,显示图表

myChart.setOption(option);

2.绘制的时需要将图像类型series.type设定为sankey类型。

桑基图节点和节点间的属性通过data和links进行维护

data属性:标记节点名称

用法:

name:'节点名称'
links属性:标记节点间关系

用法:

source:'初始节点'

target:'目标节点'

value:'节点值'

下面代码设置:4个节点,3种关系连接起来

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src ="JS/echarts.js"></script>
</head>
<body>
<div id='main' style="width:300px;height:500px"></div>

<script>
var mychart = echarts.init(document.getElementById('main'));
var option={
		title:{
			text:'桑基图基本绘制',
			left:'center'
		},
		series:[
			{
				type:'sankey',
				data:[
					{name:'节点1'},
					{name:'节点2'},
					{name:'节点3'},
					{name:'节点4'}
				],
				links:[
					{source:'节点1',target:'节点2',value:10},
					{source:'节点2',target:'节点3',value:5},
					{source:'节点3',target:'节点4',value:15},
				]
			}
		]
		
		
};
mychart.setOption(option);

</script>

</body>
</html>

简单的一个桑基图就完成了

相关推荐
qq_3901617717 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js