Echarts桑基图

关于Echarts的使用方法参考：vue2中echarts的使用_vue2中使用echarts-CSDN博客

实现效果：

代码：

var sysT = {"用采": '#2D9BFF',"营销系统": '#39BFFF',"ERP": '#76C2FF',"财务管控": '#5F57FC',"PMS": '#2D9BFF',"近源层_用采": '#92FFFF',"近源层_营销": '#ACFF96',"近源层_ERP": '#7583FF',"近源层_PMS": '#73C3FF',"近源层_财务管控": '#5477FE',"资产域": '#5F57F9',"客户域": '#7982FE',"财务域": '#4F78FE',"标准区_用采": '#2B9DFF',"标准区_营销系统": '#92FFFF',"标准区_ERP": '#38C0FF',"标准区_财务管控": '#74C3FF',"标准区_PMS": '#AAFF95',"分析层自建宽表": '#73C3FF'
}var nodes = [{"name": "用采"},{"name": "营销系统"},{"name": "ERP"},{"name": "财务管控"},{"name": "PMS"},{"name": "近源层_用采"},{"name": "近源层_营销"},{"name": "近源层_ERP"},{"name": "近源层_PMS"},{"name": "近源层_财务管控"},{"name": "资产域"},{"name": "客户域"},{"name": "财务域"},{"name": "标准区_用采"},{"name": "标准区_营销系统"},{"name": "标准区_ERP"},{"name": "标准区_财务管控"},{"name": "标准区_PMS"},{"name": "分析层自建宽表"}
];
var links = [{"source": "用采","target": "近源层_用采","value": 500},{"source": "营销系统","target": "近源层_营销","value": 958},{"source": "ERP","target": "近源层_ERP","value": 1080},{"source": "财务管控","target": "近源层_财务管控","value": 2627},{"source": "PMS","target": "近源层_PMS","value": 2109},{"source": "近源层_用采","target": "标准区_用采","value": 355},{"source": "近源层_营销","target": "标准区_营销系统","value": 958},{"source": "近源层_ERP","target": "标准区_ERP","value": 1080},{"source": "近源层_PMS","target": "标准区_PMS","value": 2109},{"source": "近源层_财务管控","target": "标准区_财务管控","value": 2627},{"source": "近源层_用采","target": "客户域","value": 121},{"source": "近源层_营销","target": "客户域","value": 524},{"source": "近源层_ERP","target": "资产域","value": 12},{"source": "近源层_ERP","target": "财务域","value": 80},{"source": "近源层_PMS","target": "资产域","value": 536},{"source": "近源层_PMS","target": "综合域","value": 200},{"source": "近源层_财务管控","target": "财务域","value": 88},{"source": "资产域","target": "UEP两级数据贯通","value": 524},{"source": "客户域","target": "UEP两级数据贯通","value": 608},{"source": "财务域","target": "UEP两级数据贯通","value": 153},{"source": "标准区_用采","target": "UEP两级数据贯通","value": 420},{"source": "标准区_营销系统","target": "UEP两级数据贯通","value": 958},{"source": "标准区_ERP","target": "UEP两级数据贯通","value": 1107},{"source": "标准区_财务管控","target": "UEP两级数据贯通","value": 2628},{"source": "标准区_PMS","target": "UEP两级数据贯通","value": 2109},{"source": "标准区_ERP","target": "智慧供应链","value": 4},{"source": "标准区_PMS","target": "PIS项目","value": 2107},{"source": "标准区_用采","target": "PIS项目","value": 418},{"source": "标准区_营销系统","target": "PIS项目","value": 1252},{"source": "标准区_PMS","target": "供电服务","value": 200},{"source": "标准区_财务管控","target": "智慧供应链","value": 2621},{"source": "标准区_用采","target": "线变关系应用","value": 418},{"source": "近源层_ERP","target": "分析层自建宽表","value": 300},{"source": "近源层_营销","target": "分析层自建宽表","value": 418},{"source": "近源层_用采","target": "分析层自建宽表","value": 418},{"source": "近源层_财务管控","target": "分析层自建宽表","value": 418},{"source": "近源层_PMS","target": "分析层自建宽表","value": 418},{"source": "分析层自建宽表","target": "供电服务","value": 185},{"source": "分析层自建宽表","target": "数据挖掘展示","value": 32},{"source": "分析层自建宽表","target": "营销综合应用","value": 30},{"source": "分析层自建宽表","target": "ERP多维精益","value": 14},{"source": "分析层自建宽表","target": "数据超市场景","value": 4},{"source": "分析层自建宽表","target": "民企清欠场景","value": 1}
];var dataF = [];
var colorList = [];for (var key in sysT) {colorList.push({name: key,itemStyle: {color: sysT[key]}})
}for (var i = 0; i < links.length; i++) {var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: sysT[links[i].source]}, {offset: 1,color: sysT[links[i].target]}])dataF.push({source: links[i].source,target: links[i].target,value: links[i].value,lineStyle: {color: color}})
}
option = {tooltip: {trigger: 'item',triggerOn: 'mousemove'},emphasis: { // 桑基图的高亮状态。focus: 'adjacency'// 'none' 不淡出其它图形，默认使用该配置。// 'self' 只聚焦（不淡出）当前高亮的数据的图形。// 'series' 聚焦当前高亮的数据所在的系列的所有图形。// 'adjacency' 聚焦关系图中的邻接点和边的图形。// 'trajectory' 聚焦所有连接到当前高亮的数据的节点和边。（从 v5.4.3 开始支持）},series: [{type: 'sankey',left: '0', // sankey组件离容器左侧的距离data: colorList,links: dataF,focusNodeAdjacency: 'allEdges',itemStyle: {// borderWidth: 1,borderColor: 'transparent' // 透明},lineStyle: {color: 'source',curveness: 0.5},label: {show: true,position: 'right',formatter: function (params) {// params 是节点的数据对象// 假设我们设置最大显示长度为5let name = params.data.nameif (name.length > 16) {// 截断文本并添加省略号return name.slice(0, 16) + '...'}return name}},nodeWidth: 30, // 设置节点宽度nodeGap: 14 // 设置节点间隔}]
}

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

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

相关文章

Java面试八股之描述一下MySQL使用索引查询数据的过程

Java面试八股之描述一下MySQL使用索引查询数据的过程

描述一下MySQL使用索引查询数据的过程 1.解析查询语句与查询优化 用户提交一个 SQL 查询语句&#xff0c;MySQL 的查询解析器对其进行词法分析和语法分析&#xff0c;生成解析树。 查询优化器根据解析树、表结构信息、统计信息以及索引信息&#xff0c;决定是否使用 B树索引…
阅读更多...
QProgressDialog 在进度条达到最大值时自动关闭，屏蔽esc和cancel按钮

QProgressDialog 在进度条达到最大值时自动关闭，屏蔽esc和cancel按钮

使用QProgressDialog来展示当前任务执行进度 QProgressDialog 默认会在进度达到设定的最大值时自动关闭。 setAutoReset()设置为false或setAutoClose()设置为false时对话框无法自动关闭。 功能设计 任务未完成时&#xff0c;不允许其他操作&#xff0c;对话框设置为模态阻塞…
阅读更多...
昇思MindSpore学习总结十二 —— ShuffleNet图像分类

昇思MindSpore学习总结十二 —— ShuffleNet图像分类

当前案例不支持在GPU设备上静态图模式运行&#xff0c;其他模式运行皆支持。 1、ShuffleNet网络介绍 ShuffleNetV1是旷视科技提出的一种计算高效的CNN模型&#xff0c;和MobileNet, SqueezeNet等一样主要应用在移动端&#xff0c;所以模型的设计目标就是利用有限的计算资源来达…
阅读更多...
拖拽排序 + 置顶和置底逻辑的实现

拖拽排序 + 置顶和置底逻辑的实现

最近在实现拖拽排序、置顶和置底逻辑时遇到了比较恶心的问题。以下为记录 背景 我们系统的排序是基于数据库中的 sort_num 字段进行的&#xff0c;sort_num 值越大&#xff0c;数据排位越靠前。新增数据时&#xff0c;其 sort_num 默认为其 id 值。假设当前有 10 条数据&…
阅读更多...
Linux实战记录

Linux实战记录

踩坑实录&#xff1a; day2: 最坑&#xff1a;安装UB居然不知道创建文件夹。 1.虚拟机上不了网&#xff1a;多重置几次 网卡 2.Winscp链接主机&#xff1a; 用户名 就是 linux terminal中的 第一个用户名&#xff01;
阅读更多...
mybatis-plus参数绑定异常

mybatis-plus参数绑定异常

前言 最近要搞个发票保存的需求&#xff0c;当发票数据有id时说明是发票已经保存只需更新发票数据即可&#xff0c;没有id时说明没有发票数据需要新增发票&#xff1b;于是将原有的发票提交接口改造了下&#xff0c;将调用mybatis-plus的save方法改为saveOrUpdate方法&#xff…
阅读更多...
架构设计（2）云原生架构与实例部署

架构设计（2）云原生架构与实例部署

云原生架构 云原生架构是一种面向云环境设计和构建应用程序的方法论&#xff0c;旨在充分利用云计算的优势&#xff0c;如弹性、自动化和可扩展性&#xff0c;以实现更高效、可靠和灵活的应用部署和管理。以下是云原生架构的核心理念和关键特点&#xff1a; 核心理念&#xf…
阅读更多...
opencv读取视频文件夹内视频的名字_时长_帧率_分辨率写入excel-cnblog

opencv读取视频文件夹内视频的名字_时长_帧率_分辨率写入excel-cnblog

看视频的时候有的视频文件名贼长。想要翻看&#xff0c;在文件夹里根本显示不出来&#xff0c;缩短又会丢失一些信息&#xff0c;所以我写了一份Python代码&#xff0c;直接获取视频的名字&#xff0c;时长&#xff0c;帧率&#xff0c;还有分辨率写到excel里。 实际效果如下图…
阅读更多...
打造个性化科学工具箱：使用conda-build自定义软件包

打造个性化科学工具箱：使用conda-build自定义软件包

打造个性化科学工具箱&#xff1a;使用conda-build自定义软件包 引言 Conda是一个强大的包管理系统&#xff0c;广泛用于Python社区&#xff0c;尤其在数据科学和机器学习领域。除了安装现成的包&#xff0c;Conda还允许用户通过conda-build工具构建和分享自己的软件包。本文…
阅读更多...
imx6ull/linux应用编程学习（15） 移植MQTT客户端库

imx6ull/linux应用编程学习（15） 移植MQTT客户端库

1. 准备开发环境 确保你的Ubuntu系统已经安装了必要的工具和依赖项。打开终端并运行以下命令&#xff1a; sudo apt update sudo apt install build-essential cmake git2. 获取MQTT库 git clone https://github.com/eclipse/paho.mqtt.c.git cd paho.mqtt.c3. 编译MQTT库 mk…
阅读更多...
NI SCXI-1001 模块处理器控制器

NI SCXI-1001 模块处理器控制器

NI SCXI-1001 一款小巧紧凑的传感器&#xff0c;可提供准确可靠的测量。它具有四个通道&#xff0c;允许同时进行多个测量。该传感器设计用于各种传感器&#xff0c;包括热电偶&#xff0c;rtd和应变片。 NI SCXI-1001 特征&#xff1a; 高密度设计&#xff1a;实现大量开关…
阅读更多...
教程系列1 | 趋动云『社区项目』极速部署 SD WebUI

教程系列1 | 趋动云『社区项目』极速部署 SD WebUI

在上周&#xff0c;趋动云新推出的『社区项目』功能&#xff0c;以“一键克隆”的极致便捷与“省时省力”的高效体验&#xff0c;赢得了广大用户的关注。 随后&#xff0c;启动趋动云『社区项目』教程系列&#xff0c;旨在从零开始&#xff0c;全方位、手把手地引领您深入探索…
阅读更多...
Pandas在生物信息学中的应用详解

Pandas在生物信息学中的应用详解

Pandas在生物信息学中的应用详解 引言 生物信息学作为一门将计算机科学和生物学相结合的跨学科领域&#xff0c;正随着高通量实验技术的飞速发展而日益重要。Pandas&#xff0c;作为Python中一个强大的数据处理库&#xff0c;为生物信息学研究提供了便捷高效的数据处理和分析…
阅读更多...
实现双向循环链表的 创建、判空、尾插、遍历、尾删、销毁

实现双向循环链表的 创建、判空、尾插、遍历、尾删、销毁

#include "link.h"//create DoubleLink head node DoubleLink_p DoubleLink_create() {DoubleLink_p H (DoubleLink_p)malloc(sizeof(DoubleLink));if(NULL H){printf("失败");return NULL;}H -> len 0;H -> next H;H -> prior H;printf(&qu…
阅读更多...
044基于SSM+Jsp的个性化影片推荐系统

044基于SSM+Jsp的个性化影片推荐系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…
阅读更多...
安装nodejs | npm报错

安装nodejs | npm报错

nodejs安装步骤: 官网&#xff1a;https://nodejs.org/en/ 在官网下载nodejs: 双击下载下来的msi安装包&#xff0c;一直点next&#xff0c;我选的安装目录是默认的: 测试是否安装成功&#xff1a; 输入cmd打开命令提示符&#xff0c;输入node -v可以看到版本&#xff0c;说…
阅读更多...
vue项目中使用svg图标/插件svg-sprite-loader

vue项目中使用svg图标/插件svg-sprite-loader

项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图&#xff0c;但是svg不能直接像image标签一样直接使用&#xff0c;这就需要前端的同学自己处理了。 svg有以下优点&#xff1a; svg放大不失真,png&#xff0c;jpg会出现失真现象 svg的体积非常小&#xff0c;对…
阅读更多...
JVM原理（二四）：JVM虚拟机锁优化

JVM原理（二四）：JVM虚拟机锁优化

高效并发是从JDK 5升级到JDK 6后一项重要的改进项&#xff0c;HotSpot虛 拟机开发团队在这个版本上花费了大量的资源去实现各种锁优化技术&#xff0c;如适应性自旋( Adaptive Spinning)、锁消除( Lock Elimination)、锁膨胀(Lock Coarsening)、轻量级锁(Lightweight Locking)、…
阅读更多...
代码随想录打卡第十八天

代码随想录打卡第十八天

代码随想录–二叉树部分 day 17 休息日 day 18 二叉树第五天 文章目录 代码随想录--二叉树部分一、力扣654--最大二叉树二、力扣617--合并二叉树三、力扣700--二乘树中的搜素四、力扣98--验证二叉搜索树 一、力扣654–最大二叉树 代码随想录题目链接&#xff1a;代码随想录 给…
阅读更多...
初识CPlusPlus

初识CPlusPlus

前言 也是好久没写博客了&#xff0c;那些天也没闲着&#xff0c;去练题去了。实际上练题也可以写练题的博客&#xff0c;但是觉得太简单了些&#xff0c;于是就没有继续写下去。如今又回来写博客&#xff0c;是因为有整理了新的知识C。内容不算多&#xff0c;大多数都是书本上…
阅读更多...
最新文章

Copyright @ 2022~2023