极致呈现系列之：Echarts桑基图的流动旋律

news2024/9/21 18:51:44

目录

  • 什么是桑基图
  • 桑基图的特点及应用场景
  • Echarts中桑基图的常用属性
  • Vue3中创建桑基图
  • 美化桑基图

在各种复杂系统中，我们经常需要了解不同流量之间的关系和流动情况。这种信息的可视化呈现对于我们理解系统的结构和转移过程至关重要。桑基图作为一种强大的可视化工具，能够直观地展示不同流量之间的相对大小和流动路径。

什么是桑基图

桑基图（Sankey）是一种图表形式，用于展示不同流量之间的关系和流动情况，如用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。它由一系列有向箭头连接的节点组成，每个节点表示一个流量的起点或终点，箭头的宽度表示流量的大小。桑基图常用于描述能源流动、物质流动、资金流动等复杂系统中的关系和转移情况。通过桑基图，人们可以直观地了解不同流量之间的相对大小和流动路径，从而帮助分析和决策。

桑基图的特点及应用场景

桑基图具有以下几个特点，使其成为数据可视化中的重要工具：

  1. 直观易懂：桑基图通过箭头的宽度和节点之间的连接关系，直观地展示了不同流量之间的大小和流动情况，使复杂的数据更易于理解。

  2. 多维度展示：桑基图可以同时展示多个维度的数据，例如起点、终点、流量大小等，帮助我们全面了解系统的转移过程。

  3. 可视化分析：通过桑基图，我们可以快速发现流量的瓶颈、转移路径以及关键节点，从而进行数据分析和决策。

  4. 应对大数据：桑基图适用于大规模的数据集，能够处理大量的节点和边，为我们提供全局的数据视角。

桑基图在许多领域都有广泛的应用，包括能源管理、物流分析、财务规划、人口迁移等。例如，能源流动的桑基图可以帮助分析能源结构和优化能源配置，物流分析中的桑基图可以揭示货物的流向和转移路径，人口迁移的桑基图可以帮助了解不同地区之间的人口流动情况。桑基图的应用场景非常丰富，只要涉及到流动关系的问题，都可以考虑使用桑基图进行可视化分析。

Echarts中桑基图的常用属性

  1. type：指定图表的类型为sankey，表示创建一个桑基图。
  2. data：表示节点的数据，每个节点通过name属性指定名称。可以进一步设置其它属性，如itemStyle用于设置节点的样式。
  3. links：表示边的数据，每条边通过source和target属性指定起点和终点，value属性表示流量大小，可以进一步设置其它属性，如lineStyle用于设置边的样式。
  4. lineStyle：表示边的样式，可以设置颜色、透明度、曲线度等属性。
  5. label：表示标签的样式，可以设置位置、颜色等属性。
  6. emphasis：表示强调样式，可以设置焦点效果、边框样式等属性。
  7. layoutIterations：指定布局迭代的次数，目的是不断迭代优化图中节点和边的位置，以减少节点和边之间的相互遮盖，默认为32。可以调整此属性来改变桑基图的布局效果。
  8. orient：指定节点的排列方向，可选值为horizontal（水平）和vertical（垂直）。通过调整此属性，可以改变桑基图节点的排列方式。
  9. nodeWidth：指定桑基图中每个矩形节点的宽度，默认为20。可以调整此属性来改变节点的宽度大小。
  10. nodeGap：指定桑基图中每一列任意两个矩形节点之间的间隔，默认为8。可以调整此属性来改变节点之间的间距大小。
  11. draggable：控制节点拖拽的交互，默认开启。开启后，用户可以将图中任意节点拖拽到任意位置。若想关闭此交互，只需将值设为 false 就行了。
  12. animation：指定是否启用动画效果，默认为true。可以将此属性设置为false，禁用桑基图的动画效果。

Vue3中创建桑基图

  1. 创建vue项目，安装ECharts库
npm install echarts --save
  1. 新建SankeyView.vue文件，使用import语句引入ECharts库
import * as echarts from 'echarts';
  1. 创建图表容器：在SankeyView组件的template中，添加一个div元素作为图表的容器。给它一个唯一的ref属性，以便在后面初始化图表对象时使用
<template>
  <div ref="chart" style="width: 100%;height: 400px;"></div>
</template>
  1. 初始化图表对象：在SankeyView组件中定义chart，
const chart = ref(null)

在mounted生命周期钩子函数中，使用echarts.init方法初始化图表对象。

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chart = ref(null)
onMounted(() => {
  const myChart = echarts.init(chart.value) 
})
</script>
  1. 准备数据，实际项目中，数据是通过接口从后台获取的，这里只是作为演示，数据定义在前端
  const data = [
    { source: '北京', target: '上海', value: 1000 },
    { source: '北京', target: '广州', value: 500 },
    { source: '上海', target: '杭州', value: 800 },
    { source: '上海', target: '深圳', value: 700 },
    { source: '广州', target: '深圳', value: 300 },
    { source: '杭州', target: '苏州', value: 600 },
    { source: '杭州', target: '南京', value: 400 },
    { source: '深圳', target: '珠海', value: 200 },
    { source: '苏州', target: '无锡', value: 300 },
    { source: '南京', target: '合肥', value: 200 },
    { source: '珠海', target: '澳门', value: 100 },
  ];

上面代码中，定义变量data用于包含桑基图数据的数组。data中的每个元素包含两个属性，即source和target，分别表示数据的源节点和目标节点。
6. 对上面的数据进行处理，使其符合桑基图的数据格式

const nodes = Array.from(new Set([...data.map(d => d.source), ...data.map(d => d.target)]));

上面这段代码的目的是提取出桑基图数据中所有的源节点和目标节点，并将它们存储在一个没有重复元素的数组中，以便后续处理和使用。

代码中使用Array.from()方法结合Set数据结构实现去重操作。

首先，通过映射函数d => d.source将data中的每个元素的source属性取出，并通过映射函数d => d.target将data中的每个元素的target属性取出。然后，将这两个结果数组使用展开运算符…合并为一个新的数组，该数组包含了所有的源节点和目标节点。

接下来，通过Set构造函数将新数组转换为一个Set实例，Set实例会自动剔除重复的元素。最后，将Set实例再次转换为数组，即可得到一个包含所有唯一节点的nodes数组。

  1. 配置图表参数，在SankeyView组件的mounted生命周期钩子函数中，定义option对象，在里面配置图表数据，并使用chart.setOption方法配置图表的参数。
onMounted(() => {
  const myChart = echarts.init(chart.value)
  const option = {
   title: {
      text: '人口迁移桑基图',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 20,
        fontWeight: 'bold',
      },
    },
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
    },
    series: [
      {
        type: 'sankey',
        data: nodes.map(n => ({ name: n })),
        links: data.map(d => ({ source: d.source, target: d.target, value: d.value })),
        lineStyle: {
          opacity: 0.5,
          curveness: 0.3,
        },
        label: {
          position: 'right',
          color: '#000',
        },
        emphasis: {
          focus: 'adjacency',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#333',
          },
        },
      },
    ],
  }
  myChart.setOption(option)
})

一个桑基图就创建好了，刷新浏览器，看下效果
在这里插入图片描述

美化桑基图

上面的桑基图颜色比较单一，我们可以通过修改lineStyle属性来设置各个节点数据流向的颜色。
首先我们定义一个颜色数组

 const colors = ['#4fb9d1', '#d83965', '#f39c38', '#9036aa', '#4054af', '#e35241', '#3f9488', '#97c05c', '#154bee', '#33e6cc', '#123997', '#faa200', '#ffff00', '#b0e0e6', '#470024', '#bce700', '#4396ec']

在links配置项中，我们给data.map的回调函数添加index索引，通过遍历数据数组 data，为每条边设置不同的线条样式，在样条样式中设置颜色配置项

links: data.map((d, index) => ({
          source: d.source,
          target: d.target,
          value: d.value,
          lineStyle: {
            color: colors[index % colors.length], // 使用颜色数组中的颜色设置线条颜色
 },

上述代码中，data.map((d, index) => { … }) 遍历 data 数组，并为每个元素执行回调函数。
在回调函数中，我们使用当前元素的索引 index 来获取对应的颜色。
colors 是前面定义的一个颜色数组，包含了多个颜色值。
index % colors.length 通过取模运算将索引值限制在颜色调色板数组的长度范围内。这样可以确保当索引超过颜色调色板长度时，仍能循环使用颜色。
lineStyle 对象用于设置线条的样式，其中的 color 属性被设置为 colors[index % colors.length]，即根据索引使用颜色调色板中的对应颜色值。

刷新浏览器看效果
在这里插入图片描述
OK，关于桑基图的介绍就到这里吧，喜欢的小伙伴点赞关注收藏哦，也可以通过微信公众号搜索“九仞山”，获取更多内容。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Lambda and Collections

Lambda and Collections

我们先从最熟悉的Java集合框架(Java Collections Framework, JCF)开始说起。 为引入Lambda表达式&#xff0c;Java8新增了java.util.funcion包&#xff0c;里面包含常用的函数接口&#xff0c;这是Lambda表达式的基础&#xff0c;Java集合框架也新增部分接口&#xff0c;以便与…
阅读更多...
tf卡打不开怎么办？tf卡数据丢失怎么恢复

tf卡打不开怎么办？tf卡数据丢失怎么恢复

TF卡打不开怎么办&#xff1f;当TF卡中的数据丢失后&#xff0c;又如何恢复呢&#xff1f;下面小编已为您梳理和归纳了答案&#xff01;请继续阅读下文。 一、TF卡打不开怎么办&#xff1f; 首先&#xff0c;我们需要了解导致TF卡读不出来的具体原因&#xff0c;这可能包括没…
阅读更多...
ch8_4中断系统

ch8_4中断系统

为什么需要中断&#xff1f; 输入&#xff0c;输出。 计算机程序调试&#xff1b;发生异常事件&#xff1b; 都需要由中断系统进行处理. 引发中断的各种因素包括&#xff1a;人为设置中断&#xff0c;程序性事故&#xff0c; 硬件故障&#xff0c;I/O设备&#xff0c;外部事件等…
阅读更多...
英伟达驱动安装

英伟达驱动安装

https://zhuanlan.zhihu.com/p/60307377 https://www.nvidia.cn/Download/index.aspx?langcn
阅读更多...
路由器的工作原理详解

路由器的工作原理详解

什么叫路由&#xff1f; 路由器的英文是 Router&#xff0c;也就是「找路的工具」。找什么路&#xff1f;寻找各个网络节点之间的路。 换句话说&#xff0c;路由器就像是快递中转站&#xff0c;包裹会经过一个个的中转站&#xff0c;从遥远的地方寄到你家附近&#xff0c;数据…
阅读更多...
驱动开发：内核远程线程实现DLL注入

驱动开发：内核远程线程实现DLL注入

在笔者上一篇文章《驱动开发&#xff1a;内核RIP劫持实现DLL注入》介绍了通过劫持RIP指针控制程序执行流实现插入DLL的目的&#xff0c;本章将继续探索全新的注入方式&#xff0c;通过NtCreateThreadEx这个内核函数实现注入DLL的目的&#xff0c;需要注意的是该函数在微软系统中…
阅读更多...
Java多线程阻塞队列(BlockingDeque)的简析

Java多线程阻塞队列(BlockingDeque)的简析

目录 一.什么是阻塞队列(BlockingDeque) 二.阻塞队列有什么用? 三.运用阻塞队列来实现一个最简单的生产者消费者 四.模拟实现阻塞队列 一.什么是阻塞队列(BlockingDeque) 既然叫做阻塞队列,那么他就满足两个特性 1.队列:先进先出 2.阻塞:空了不让出,满了不让进 &#…
阅读更多...
kali常用ping命令探测

kali常用ping命令探测

ping 判断目标主机网络是否畅通 ping $ip -c 1其中&#xff0c;-c 1 表示发送一个数据包 traceroute 跟踪路由 traceroute $domain ARPING 探测局域网IP ARP&#xff08;地址解析协议&#xff09;&#xff0c;将IP地址转换成MAC地址arping $ip -c 1 #!/bin/ bash######…
阅读更多...
云原生监控平台 Prometheus 从部署到监控

云原生监控平台 Prometheus 从部署到监控

1.监控系统架构设计 角色 节点 IP地址 监控端 Prometheus &#xff0c;Grafana&#xff0c;node_exporter &#xff0c;Nginx 47.120.35.251 被监控端1 node_exporter 47.113.177.189 被监控端2 mysqld_exporter&#xff0c;node_exporter&#xff0c;Nginx&#xff…
阅读更多...
Centos7下载安装mysql

Centos7下载安装mysql

参考文档&#xff1a;https://xie.infoq.cn/article/5da9bfdfbdaabf7b0b982ab6e https://blog.csdn.net/Lance_welcome/article/details/107314575 一、下载mysql 5.7 # 下载mysql5.7.42版本 wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.42-linux-glibc2.12-…
阅读更多...
Mysql 表的七种连接方式【附带练习sql】

Mysql 表的七种连接方式【附带练习sql】

连接 七种JOIN介绍 图形连接方式说明SQL内连接共有部分SELECT <select_list> FROM TableA A INNER JOIN TableB B ON A.Key B.Key;左连接A表独有共有部分SELECT <select_list> FROM TableA A LEFT JOIN TableB B ON A.Key B.Key;右连接B表独有共有部分SELECT &…
阅读更多...
字符设备驱动内部实现原理解析以及分步注册流程和代码示例

字符设备驱动内部实现原理解析以及分步注册流程和代码示例

1、字符设备驱动内部实现原理解析 原理&#xff1a;用户层调用 open() 函数打开设备文件&#xff0c;用ls-i查看inode号并找到与之对应的struct inode 结构体。在struct inode 结构体中&#xff0c;可以找到与文件关联的 struct cdev 设备驱动结构体。设备驱动结构体中包含了文…
阅读更多...
Spring6 数据校验 Validation

Spring6 数据校验 Validation

1、Spring Validation概述 在开发中&#xff0c;经常遇到参数校验的需求&#xff0c;比如用户注册的时候&#xff0c;要校验用户名不能为空、用户名长度不超过20个字符、手机号是合法的手机号格式等等。如果使用普通方式&#xff0c;会把校验的代码和真正的业务处理逻辑耦合在一…
阅读更多...
FL Studio 21中文永久版网盘下载（含Key.reg注册表补丁）

FL Studio 21中文永久版网盘下载（含Key.reg注册表补丁）

FL Studio 21全称Fruity Loops Studio&#xff0c;就是大家熟悉的水果编曲软件&#xff0c;一个全能的音乐制作软件&#xff0c;包括编曲、录音、剪辑和混音等诸多功能&#xff0c;让你的电脑编程一个全能的录音室。FL Studio 21版本发布了&#xff0c;为我们带来了多种新功能&…
阅读更多...
在Centos Stream 9上Docker的实操教程（八） - Docker可视化管理工具

在Centos Stream 9上Docker的实操教程（八） - Docker可视化管理工具

&#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Micro麦可乐的博客 &#x1f425;《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程&#xff0c;入门到实战 &#x1f33a;《RabbitMQ》…
阅读更多...
构建二叉树的两种情况【根据前序遍历和中序遍历 构造树】【根据后序遍历和中序遍历 构造树】

构建二叉树的两种情况【根据前序遍历和中序遍历 构造树】【根据后序遍历和中序遍历 构造树】

【根据前序遍历和中序遍历 构造树】【根据后序遍历和中序遍历 构造树】 6. 重建二叉树根据前序遍历和中序遍历 得到树 树的遍历 6. 重建二叉树 原题链接 根据前序遍历和中序遍历 得到树 过程如下&#xff1a; 首先根据前序遍历找到 根节点找到中序遍历中&#xff0c;该根节点…
阅读更多...
C# Http 请求接口 Get / Post

C# Http 请求接口 Get / Post

目录 一、概述 二、创建 Web API 三、HttpRequestHelper 三、测试 结束 一、概述 get 和 post 请求&#xff0c;最早被用来做浏览器与服务器之间交互HTML和表单的通讯协议&#xff0c;后来又被广泛的扩充到接口格式的定义上&#xff0c;到目前为止&#xff0c;get / pos…
阅读更多...
计算机网络综合实训——网络程序设计

计算机网络综合实训——网络程序设计

计算机网络综合实训 网络程序设计 作者姓名 学号 所在院系 计算机与信息工程学院 学科专业名称 计算机科学与技术 导师及职称 柯宗武 教授 提交时间 2023/05/28 仿qq聊天的设计与实现 &#xff08;指导教师&#xff0c;柯宗武 教授&#xff09; &#xff08;湖北师范大学计…
阅读更多...
【特征检测器】检测器

【特征检测器】检测器

检测器 1. Shi-Tomasi 检测器1.1 算法特点&#xff1a;1.2算法步骤1.3 8-邻域非最大抑制算法 1. Shi-Tomasi 检测器 1.1 算法特点&#xff1a; Shi-Tomasi 检测器使用了 Harris 算法的改良版&#xff0c;在处理图像边缘时具有更好的性能表现&#xff0c;能够检测出更多的稳定…
阅读更多...
【kali学习笔记】信息收集之搜索引擎的使用技巧

【kali学习笔记】信息收集之搜索引擎的使用技巧

一、Google 搜索引擎的使用技巧 1、Google 常用语法说明 site 指定域名 inurl URL 中存在的关键字页面 intext 网页内容里面的关键字 Filetype 指定文件类型 intitle 网页标题中的关键字 link 返回你所有的指定域名链接 info 查找指定站点信息 cache 搜索 Google 里的内容缓存…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023