数据可视化高级技术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'));

4. 指定图表的配置项和数据(对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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/547422.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

EI级 | Matlab实现TCN-LSTM-MATT、TCN-LSTM、TCN、LSTM多变量时间序列预测对比

EI级 | Matlab实现TCN-LSTM-MATT、TCN-LSTM、TCN、LSTM多变量时间序列预测对比 目录 EI级 | Matlab实现TCN-LSTM-MATT、TCN-LSTM、TCN、LSTM多变量时间序列预测对比预测效果基本介绍程序设计参考资料 预测效果 基本介绍 【EI级】Matlab实现TCN-LSTM-MATT、TCN-LSTM、TCN、LSTM…

Grok-1.5 Vision:X AI发布突破性的多模态AI模型,超越GPT 4V

在人工智能领域&#xff0c;多模态模型的发展一直是科技巨头们竞争的焦点。 近日&#xff0c;马斯克旗下的X AI公司发布了其最新的多模态模型——Grok-1.5 Vision&#xff08;简称Grok-1.5V&#xff09;&#xff0c;这一模型在处理文本和视觉信息方面展现出了卓越的能力&#x…

Elasticsearch分布式搜索

实用篇-ES-环境搭建 ES是elasticsearch的简称。我在SpringBoot学习 数据层解决方案 的时候&#xff0c;写过一次ES笔记&#xff0c;可以结合一起看一下。 之前在SpringBoot里面写的相关ES笔记是基于Windows的&#xff0c;现在我们是基于docker容器来使用&#xff0c;需要你们提…

突破编程_前端_SVG(ellipse 椭圆形)

1 ellipse 元素的基本属性和用法 ellipse 元素用于创建椭圆形状。它具有一系列的基本属性&#xff0c;允许自定义椭圆的外观和位置。以下是一些 ellipse 元素的基本属性和用法&#xff1a; &#xff08;1&#xff09;基本属性 cx 和 cy&#xff1a;这两个属性定义了椭圆中心…

【CicadaPlayer】prepare和start的触发和异步处理

主线程可以直接用SuperMediaPlayer 但SuperMediaPlayer 的处理是异步的。实际上msgproc的目的在于异步处理外部请求 例如,启动后会先设置view,这个与播放流程无关,但是是必须要让播放器拥有的。用户点击prepare是直接调用SuperMediaPlayer的Prepare接口,才会触发url的设置 …

数据结构--栈,队列,串,广义表

3.栈 &#xff08;先进后出&#xff09; 栈是一种特殊的线性表&#xff0c;只能从一端插入或删除操作。 4.队列 4.1 4.1.1初始化 4.1.2判断队列是否为空 4.1.3判断队列是否为满 4.1.4入队 4.1.5出队 4.1.6打印队列 4.1.7销毁队列 5.串 5.1 串的定义 由零个或者任意多…

最新AI创作系统ChatGPT网站源码AI绘画,GPTs,AI换脸支持,GPT联网提问、DALL-E3文生图

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…

VMware安装Linux虚拟机(rocky9)

软件准备&#xff1a; VMware虚拟机ISO系统镜像文件 选择创建虚拟机→典型→下一步→点击稍后安装操作系统 选择Linux系统和对应版本 输入虚拟机名称和选择保存位置 设置磁盘大小 根据需要自定义硬件配置→完成 然后点击编辑虚拟机设置→CD/DVD→选择ISO镜像 然后开启虚拟机→…

vue2 二次封装element 组件,继承组件原属性,事件,插槽 示例

测试页面代码 这里主要记录如何封装element的el-input 并且封装后具有el-input原本的属性 事件 插槽 下面为测试页面即组件调用 <script> import CustomInput from /components/CustomInput.vue;export default {name: TestPage,components: { CustomInput },data() …

【洛谷 P4017】最大食物链计数 题解(深度优先搜索+动态规划+邻接表+记忆化搜索+剪枝)

最大食物链计数 题目背景 你知道食物链吗&#xff1f;Delia 生物考试的时候&#xff0c;数食物链条数的题目全都错了&#xff0c;因为她总是重复数了几条或漏掉了几条。于是她来就来求助你&#xff0c;然而你也不会啊&#xff01;写一个程序来帮帮她吧。 题目描述 给你一个…

【CSS面试题】Flex实现九宫格

考察知识&#xff1a; flex布局 水平垂直居中的实现 初始效果 代码关键&#xff1a;给父盒子添加以下属性 flex-wrap: wrap; /* 允许换行 */justify-content: space-around; /* 主轴对齐方式 */align-content: space-around; /* 多行在侧轴上的对齐方式 */<!DOCTYPE html&…

如何让Nrf connect、EFR connect直接显示特征值数据及其单位

效果如图&#xff1a;app直接显示了我的温度&#xff0c;并且有两位小数&#xff0c;还有温度单位。这是怎么做到的呢&#xff1f; 这次我们仍以TLS8258为例&#xff0c;当然如果是其他蓝牙芯片&#xff0c;配置方式也是大差不差&#xff0c;规则一样的。 #define GATT_CHARA…

租用马来西亚服务器:稳定高效的网络选择

马来西亚首都是吉隆坡。作为一个新兴的多元化经济国家&#xff0c;也属于亚洲四小龙之一。地理位置优越&#xff0c;中间隔着南中国海。一部分是北接泰国的位于马来半岛的西马来西亚&#xff0c;另一部分则是东马来西亚&#xff0c;在婆罗洲岛的北部。这种地理位置有利于促进该…

[Java EE] 计算机工作原理与操作系统简明概要

1. 计算机工作原理 1.1 生活中常见的计算机 计算机分为通用计算机和专用计算机,计算机并不单单指的是电脑,还有我们平时使用的手机,ipad,智能手表等终端设备都是计算机.还有我们用户不常见的计算机,比如服务器. 还有许多嵌入式设备(针对特定场景定制的"专用计算机"…

系统学c#:1、基础准备(软件下载与安装)

一、Vs软件下载与安装 访问Visual Studio官方网站&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads 下载Visual Studio 运行exe文件&#xff0c;点击“继续” 初始文件安装完成后选择我们需要安装的项&#xff0c;并勾选好必要的单个组件&#xff0c;设…

cookie与session及其区别

一、cookie 1. 为什么需要cookie&#xff1f; web程序使用HTTP协议进行传输&#xff0c;而HTTP协议是无状态的协议&#xff08;即对事务处理无记忆性&#xff0c;如果后续处理需要使用前面的信息&#xff0c;只能重传&#xff0c;导致每次连接传送的数据量增大&#xff09;。c…

maven3.9+下载安装

maven介绍 Maven 是一个项目管理和理解工具&#xff0c;它基于项目对象模型&#xff08;POM&#xff09;概念。Maven 可以帮助开发者定义项目结构、依赖关系、构建过程以及其他任务。它主要用于 Java 项目&#xff0c;但也可以用于其他类型的项目。Maven 的主要目标是简化构建…

单元测试四大过程

单元测试四大过程&#xff08;蓝桥课学习笔记&#xff09; 单元测试过程 单元测试是软件测试过程中的一个关键环节&#xff0c;它与集成测试、系统测试一样&#xff0c;分为测试策划、测试设计、测试执行和测试总结几个阶段。 单元测试过程中每个阶段需要完成的主要工作如下&…

【Linux】磁盘管理和文件系统

目录 一、硬盘 1.硬盘结构 2.结构类型 二、MBR与磁盘分区 1.MBR主引导记录 2.磁盘分区结构 三、文件系统类型 四、linux系统添加并使用新硬盘的步骤 1.添加新的硬盘 2.刷新识别 3.进行分区 4.格式化&#xff0c;创建文件系统 5.挂载使用 一、硬盘 1.硬盘结构…

Linux程序调试优化(1)——内存占用详解及优化思路

文章目录 1.free查看总体的内存占用2./proc/$PID/status 查看某进程状态 linux开发最重要的两个参数&#xff0c;分别是内存以及CPU使用率&#xff0c;若内存出现严重不足&#xff0c;则在需要使用内存时&#xff0c;可能出现申请不到的情况&#xff0c;导致 OOM&#xff0c;L…