Echarts —— 关系图+路径图+散点图(动态箭头)

文章目录

    • 1 效果预览
    • 2 实现代码

1 效果预览

在这里插入图片描述

可将以下代码复制到Echarts示例在线预览效果

2 实现代码

const categories = [{name: '数据中心',symbol:'path://M936.33 732.203c-9.872-10.814-23.349-17.123-37.953-17.778-14.849-0.451-28.613 4.383-39.427 14.255-0.215 0.195-0.282 0.476-0.492 0.673l-144.256-83.448c0.625-2.939 1.994-5.635 2.133-8.697 0.676-14.624-4.383-28.634-14.255-39.448-20.379-22.284-55.096-23.841-77.401-3.523-22.305 20.4-23.882 55.096-3.502 77.421 7.932 8.707 18.534 13.533 29.878 15.799l17.069 160.864c-5.049 2.466-10.138 4.9-14.422 8.82-23.964 21.875-25.643 59.192-3.769 83.156 11.593 12.699 27.507 19.13 43.483 19.13 14.173 0 28.408-5.08 39.673-15.361 11.613-10.61 18.393-25.111 19.109-40.8 0.264-5.807-1.162-11.301-2.527-16.782l114.101-74.264c8.695 6.485 18.549 11.122 29.627 11.618 0.86 0.041 1.7 0.082 2.56 0.082 13.682 0 26.688-5.039 36.867-14.337 22.307-20.359 23.863-55.096 3.504-77.38z m-92.616 24.03c-2.588 10.576-2.855 21.552 0.968 31.893l-109.7 71.397c-9.88-10.018-22.696-16.007-36.719-17.202l-16.624-156.665a54.739 54.739 0 0 0 16.898-10.515c0.637-0.579 0.891-1.421 1.498-2.025l143.679 83.117z m-206.233-122.63c0.287-6.431 3.072-12.412 7.824-16.754a24.194 24.194 0 0 1 16.304-6.308c6.575 0 13.108 2.663 17.86 7.865 4.342 4.752 6.575 10.937 6.288 17.41-0.287 6.431-3.072 12.371-7.824 16.713h-0.021c-4.793 4.342-11.081 6.964-17.409 6.308-6.431-0.287-12.371-3.072-16.713-7.824-4.364-4.752-6.596-10.937-6.309-17.41z m74.963 287.851c-11.47 10.528-29.432 9.708-39.898-1.802-10.487-11.511-9.688-29.412 1.802-39.898 5.243-4.793 11.961-7.414 19.028-7.414 0.43 0 0.86 0.041 1.29 0.041 7.537 0.328 14.501 3.605 19.581 9.176 5.1 5.571 7.701 12.781 7.353 20.318-0.328 7.536-3.585 14.5-9.156 19.579z m199.738-134.483c-4.772 4.342-10.61 6.185-17.389 6.308-6.452-0.328-12.391-3.113-16.754-7.865-8.971-9.831-8.275-25.152 1.557-34.123a24.057 24.057 0 0 1 16.263-6.308c6.554 0 13.108 2.663 17.86 7.865 4.363 4.752 6.595 10.937 6.308 17.369-0.287 6.472-3.072 12.412-7.845 16.754z,M151.81 219.064v18.751c65.713 49.346 192.006 82.731 337.007 82.731s271.291-33.385 337.005-82.731v-18.751c-57.667 50.36-186.873 85.432-337.005 85.432-150.134 0-279.341-35.072-337.007-85.432zM488.817 63.779c-221.567 0-401.197 71.858-401.197 160.48V721.72h2.025c20.146 81.105 191.141 144.432 399.172 144.432 24.529 0 32.095-2.058 55.411-3.746l0.023-31.962c-23.252 1.598-30.838 3.61-55.434 3.61-203.85 0-369.102-57.477-369.102-128.382V608.14c61.194 57.349 203.387 97.532 369.102 97.532 20.51 0 40.664-0.614 60.344-1.802l1.249-32.051a1057.38 1057.38 0 0 1-61.594 1.779c-203.85 0-369.102-57.477-369.102-128.382v-97.555c61.194 57.349 203.387 97.555 369.102 97.555s307.908-40.206 369.079-97.555v175.217l32.095-0.545V224.259c0.001-88.622-179.609-160.48-401.173-160.48z m369.079 320.957c0 70.908-165.229 128.382-369.079 128.382s-369.102-57.474-369.102-128.382v-97.555c61.194 57.352 203.387 97.555 369.102 97.555s307.908-40.203 369.079-97.555v97.555z m-369.079-32.095c-203.85 0-369.102-57.477-369.102-128.382 0-70.908 165.252-128.385 369.102-128.385s369.079 57.477 369.079 128.385c0 70.905-165.229 128.382-369.079 128.382z',symbolSize: 60,itemStyle: {color: '#e66b69'}},{name: '网关',symbol:'path://M600.255321 133.164178c120.213708 0 219.218733 68.021482 232.313549 155.527628h21.531936c-6.225171-97.884819-117.4874-175.858037-253.843452-175.858037S352.637041 190.806986 346.411869 288.691806h21.529903c13.094816-87.506146 112.099841-155.527628 232.313549-155.527628z,M600.255321 436.760206c-120.213708 0-219.218733-68.021482-232.313549-155.527627H346.409836c6.225171 97.884819 117.4874 175.858037 253.843452 175.858036s247.620314-77.973217 253.843452-175.858036h-21.531936c-13.09075 87.504113-112.095775 155.527628-232.309483 155.527627z,M346.125211 741.541498c0 101.900075 113.7771 184.508626 254.13011 184.508625 140.350978 0 254.130111-82.60855 254.130111-184.508625v-444.199103c0-2.901149-0.103685-5.784001-0.286659-8.650589h-21.531936c0.971794 6.4854 1.486153 13.076519 1.486153 19.757091v421.988131c0 96.803242-104.675176 175.282686-233.799702 175.282686s-233.799702-78.479444-233.799701-175.282686V308.448897c0-6.680572 0.516392-13.269658 1.486152-19.757091h-21.529903a135.835594 135.835594 0 0 0-0.286658 8.650589v444.199103z',symbolSize: 60,itemStyle: {color: '#f9bb83'}},{name: '节点',symbol:'path://M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z',symbolSize: 40,itemStyle: {color: '#6bafed'}},{name: '子节点',symbol:'path://M960 42.666667H64c-12.8 0-21.333333 8.533333-21.333333 21.333333v896c0 12.8 8.533333 21.333333 21.333333 21.333333h896c12.8 0 21.333333-8.533333 21.333333-21.333333V64c0-12.8-8.533333-21.333333-21.333333-21.333333z m-21.333333 896H85.333333V682.666667h853.333334v256z m0-298.666667H85.333333V384h853.333334v256z m0-298.666667H85.333333V85.333333h853.333334v256zM298.666667 768h-42.666667v85.333333h42.666667v-85.333333z m-85.333334 0H170.666667v85.333333h42.666666v-85.333333z m661.333334 21.333333h-170.666667v42.666667h170.666667v-42.666667zM298.666667 469.333333h-42.666667v85.333334h42.666667v-85.333334z m-85.333334 0H170.666667v85.333334h42.666666v-85.333334z m661.333334 21.333334h-170.666667v42.666666h170.666667v-42.666666zM298.666667 170.666667h-42.666667v85.333333h42.666667V170.666667z m-85.333334 0H170.666667v85.333333h42.666666V170.666667z m661.333334 21.333333h-170.666667v42.666667h170.666667V192z',symbolSize: 30,itemStyle: {color: '#4fc5c8'}}
];
let maximum = 1;
const baseStep = 100; // 节点间隔
const links = [];
const data = [{name: categories[0].name,category: categories[0].name,value: [0, 0]},{name: `${categories[1].name}-intranet`,category: categories[1].name,value: [-200, 0],label: {formatter: categories[1].name}},{name: `${categories[1].name}-outernet`,category: categories[1].name,value: [200, 0],label: {formatter: categories[1].name}}
];
let chatHeight = 0const requestData = {intranet: [{in: {name: '节点1-IN'},out: {name: '节点1-OUT',child: [{childId: 'childId1-1',childName: '节点1-1'},{childId: 'childId1-2',childName: '节点1-2'}]}},{in: {name: '节点2-IN'},out: {name: '节点2-OUT',child: [{childId: 'childId2-1',childName: '节点2-1'}]}},{in: {name: '节点3-IN'},out: {name: '节点3-OUT',child: [{childId: 'childId3-1',childName: '节点3-1'},{childId: 'childId3-2',childName: '节点3-2'},{childId: 'childId3-3',childName: '节点3-3'}]}}],outernet: [{in: {name: '节点4-IN'},out: {name: '节点4-OUT',child: [{childId: 'childId4-1',childName: '节点4-1'},{childId: 'childId4-2',childName: '节点4-2'}]}},{in: {name: '节点5-IN'},out: {name: '节点5-OUT',child: [{childId: 'childId5-1',childName: '节点5-1'}]}}]
};
// 动态计算节点位置,让节点均匀分布
const getNodeHeights = (totalNodes, step) => {const heights = [];// 判断是奇数个节点还是偶数个节点const isEven = totalNodes % 2 === 0;for (let i = 0; i < totalNodes; i++) {const rate = i / 2;// 偶数个节点向下取整,奇数个节点向上取整const value = isEven ? Math.floor(rate) : Math.ceil(rate);const height =(value * step + (isEven ? step / 2 : 0)) *(Number.isInteger(rate) ? 1 : -1);heights.push(height);}return heights;
};
// 动态计算图表高度,避免图标重叠
const calculateMaximum = () => {const { intranet, outernet } = requestData;let intranetChildCount = 0;let outernetChildCount = 0;intranet.forEach((item) => (intranetChildCount += item.out.child?.length || 0));outernet.forEach((item) => (outernetChildCount += item.out.child?.length || 0));maximum = Math.max(intranet.length,outernet.length,intranetChildCount,outernetChildCount);// chatHeight = maximum * baseStep
};
const setChildData = (item, nodeOutXY, type) => {if (!item.out.child) return;const childLength = item.out.child.length;const childHeights = getNodeHeights(childLength, baseStep / childLength);item.out.child.forEach((child, childIndex) => {const name = `${child.childName}_${item.out.name}`;const childXY = [(type === 'intranet' ? -1 : 1) * (baseStep * 4),nodeOutXY[1] + childHeights[childIndex]];data.push({// ...child,name,category: categories[3].name,value: childXY,label: {formatter: child.childName}});links.push(...[{source: name,target: item.out.name,lineStyle: {color: 'red'},coords: [childXY, nodeOutXY]},{source: item.out.name,target: name,lineStyle: {color: 'green'},coords: [nodeOutXY, childXY]}]);});
};
const setNodes = (item, baseY, type) => {const flag = type === 'intranet' ? -1 : 1;const nodeData = data[type === 'intranet' ? 1 : 2];// 节点-INconst nodeInXY = [flag * baseStep, baseY];data.push({...item.in,category: categories[2].name,value: nodeInXY});links.push(...[// 节点-IN —— 数据中心{source: item.in.name,target: data[0].name,lineStyle: {color: 'red'},coords: [nodeInXY, data[0].value]},// 节点-IN —— 网关{source: item.in.name,target: nodeData.name,lineStyle: {color: 'red'},coords: [nodeInXY, nodeData.value]},// 数据中心 —— 节点-IN{source: data[0].name,target: item.in.name,lineStyle: {color: 'green'},coords: [data[0].value, nodeInXY]},// 网关 —— 节点-IN{source: nodeData.name,target: item.in.name,lineStyle: {color: 'green'},coords: [nodeData.value, nodeInXY]}]);// 节点-OUTconst nodeOutXY = [flag * baseStep * 3, baseY];data.push({...item.out,category: categories[2].name,value: nodeOutXY});links.push(...[// 节点-OUT —— 网关{source: item.out.name,target: nodeData.name,lineStyle: {color: 'red'},coords: [nodeOutXY, nodeData.value]},// 网关 —— 节点-OUT{source: nodeData.name,target: item.out.name,lineStyle: {color: 'green'},coords: [nodeData.value, nodeOutXY]}]);setChildData(item, nodeOutXY, type);
};
const setNodeData = (nodes, type) => {const nodeHeights = getNodeHeights(nodes.length, baseStep);nodes.forEach((item, index) => {setNodes(item, nodeHeights[index], type);});
};
const setPlaceholderData = () => {if (maximum !== 1) return;// 当只有一条路线时,增加两个不可见节点保持图表居中显示data.push(...[{name: 'placeholder1',value: [0, baseStep],symbolSize: 0,label: {show: false}},{name: 'placeholder2',value: [0, -baseStep],symbolSize: 0,label: {show: false}}]);
};
const getOptions = () => {const { intranet, outernet } = requestData;// 设置内网数据setNodeData(intranet, 'intranet');// 设置外网数据setNodeData(outernet, 'outernet');// 设置占位数据setPlaceholderData();const option = {xAxis: {show: false,type: 'value'},yAxis: {show: false,type: 'value'},series: [{type: 'graph',coordinateSystem: 'cartesian2d',zlevel: 2,// 箭头edgeSymbol: ['circle', 'arrow'],edgeSymbolSize: [1, 8],categories,//圆形上面的文字label: {show: true,position: 'bottom',fontSize: 12},lineStyle: {curveness: 0.05},data,// links},{type: 'scatter',zlevel: 1,data: data.map((item) => ({symbol: 'circle',symbolSize: categories.find((categorie) => categorie.name === item.category)?.symbolSize,value: item.value})),itemStyle: {color: '#ffffff',opacity: 1}},{type: 'lines',coordinateSystem: 'cartesian2d',zlevel: 0,clip: false,effect: {show: true,trailLength: 0,symbol: 'arrow',symbolSize: 6},lineStyle: {// width: 0,curveness: 0.05},data: links.filter((item) => item.coords).map((item) => ({ coords: item.coords, lineStyle: item.lineStyle })) }]};return option;
};
option = getOptions();

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

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

相关文章

【初始RabbitMQ】发布订阅的实现

发布确认原理 生产者将信道设置成 confirm 模式&#xff0c;一旦信道进入 confirm 模式&#xff0c;所有在该信道上面发布的消息都将会被指派一个唯一的 ID(从 1 开始)&#xff0c;一旦消息被投递到所有匹配的队列之后&#xff0c;broker 就会发送一个确认给生产者(包含消息的…

Mysql 时间格式化 date_format

有没有遇到过类似这样的问题&#xff0c;将日期 ‘2023-02-23‘ 的格式转化为 202302的格式。 可能有些小伙伴&#xff0c;会直接想到字符串拼接 concat(year(2023-02-23),month(2023-02-23))得到的也是 202302。那要是要求必须是时间格式呢&#xff0c;可能有些小伙伴会说再将…

Linux之ACL权限chmod命令

一. chmod命令 chmod命令来自英文词组change mode的缩写&#xff0c;其功能是改变文件或目录权限的命令。默认只有文件的所有者和管理员可以设置文件权限&#xff0c;普通用户只能管理自己文件的权限属性。 设置权限时可以使用数字法&#xff0c;亦可使用字母表达式&#xff0…

GO-ICP的使用(一)

一、代码下载以、修改以及使用 下载&#xff1a; 链接&#xff1a;yangjiaolong/Go-ICP: Implementation of the Go-ICP algorithm for globally optimal 3D pointset registration (github.com) 解压之后 &#xff1a; 首先visual studio项目&#xff0c;配置好PCL环境&…

2024年这些半导体行业告诉我,投资迎来高光

在下行的周期内&#xff0c;砍单、裁员、破产注销等关键词贯穿了2023一年。 我们挥挥手&#xff0c;告别掉过去&#xff0c;怀着对未来的美好希望奔向2024年。未来虽然代表着未知&#xff0c;也有着各种不确定性&#xff0c;但在产业的发展的过程中&#xff0c;行业趋势我们是…

更简单地介绍 CUDA

这篇文章是对 CUDA 的超级简单介绍&#xff0c;CUDA 是 NVIDIA 流行的并行计算平台和编程模型。我之前在2013年写过一篇文章《CUDA简单介绍》&#xff0c;多年来一直很受欢迎。但 CUDA 编程变得更加容易&#xff0c;GPU 也变得更快&#xff0c;所以是时候进行更新&#xff08;甚…

【Vue实现参数传递:查询参数 vs. 动态路由】

文章目录 查询参数传递1. 什么是查询参数&#xff1f;2. 在Vue中使用查询参数步骤 1&#xff1a;在路由配置中定义查询参数步骤 2&#xff1a;在组件中使用查询参数步骤 3&#xff1a;在页面中生成链接 3. 查询参数传递的优势 动态路由传递1. 什么是动态路由&#xff1f;2. 在V…

SQL-Labs46关order by注入姿势

君衍. 四十六关 ORDER BY数字型注入1、源码分析2、rand()盲注3、if语句盲注4、时间盲注5、报错注入6、Limit注入7、盲注脚本 四十六关 ORDER BY数字型注入 请求方式注入类型拼接方式GET报错、布尔盲注、延时盲注ORDER BY $id 我们直接可以从界面中得知传参的参数为SORT&#x…

Linux内核处理并发与竞争的一种方法:信号量

一. 简介 本文来学习Linux内核处理并发与竞争的一种方法:信号量。 本文主要对Linux内核提供的信号量进行简单的介绍。 二. Linux内核处理并发与竞争的一种方法:信号量 1. 信号量简介 大家如果有学习过 FreeRTOS 或者 UCOS 的话就应该对信号量很熟悉,因为信号量是同步…

Yolo v9 “Silence”模块结构及作用!

论文链接&#xff1a;&#x1f47f; YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information 代码链接&#xff1a;&#x1f47f; https://github.com/WongKinYiu/yolov9/tree/main Silence代码 class Silence(nn.Module):def __init__(self):supe…

vue2和vue3对比(语法层面)

阅读文章你将收获&#xff1a; 1 了解不使用组件化工具时&#xff0c;vue在html是如何使用的 2 知道vue2的生命周期函数有哪些 3 知道如何在组件化开发中使用vue 4 大致了解了vue2和vue3在使用上什么不同 最后&#xff1a;vue2和vue3除了下面我列出的有差异化的地方&…

高防服务器的价格受到哪些因素的影响?

高防服务器可以帮助网站拒绝服务攻击&#xff0c;能够进行定时扫描网络节点&#xff0c;并且查找可能会存在的安全漏洞的服务器类型&#xff0c;对于经常遭受到DDOS攻击的大型游戏网络企业会选择高防服务器。 那面对价格多样的高防服务器我们应该怎样进行选择&#xff0c;高防服…

day41打卡

day41打卡 46. 携带研究材料&#xff08;第六期模拟笔试&#xff09; 状态表示 ​ 二维&#xff1a;dp[i] [j] 表示从下标为[0-i]的物品里任意取&#xff0c;放进容量为j的背包&#xff0c;价值总和最大是多少。 一维&#xff1a; ​ dp[j]表示&#xff1a;容量为j的背包&a…

模型 HBG(品牌增长)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_总纲目录。品牌增长法。 1 HBG(品牌增长)模型的应用 1.1 江小白使用HBG模型提高品牌知名度和销售额 选择受众市场&#xff1a;江小白的目标客户是年轻人&#xff0c;他们喜欢简单、时尚的产品。因此&#xff0c;江…

面试前端性能优化八股文十问十答第三期

面试前端性能优化八股文十问十答第三期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;如何⽤webpack来优化…

数据结构D4作业

1.实现单向循环链表的功能 loop.c #include "loop.h" loop_p create_loop() { loop_p H(loop_p)malloc(sizeof(loop)); if(HNULL) { printf("创建失败\n"); return NULL; } H->len0; H->nextH; ret…

一文彻底搞懂SQL优化

文章目录 1. 索引优化2. WHERE 子句优化3. JOIN 优化4. 查询结果优化5. 子查询优化6. 数据库统计信息和缓存优化7. 事务优化8. 数据库配置优化9. 使用适当的数据类型10. 监控和调优 SQL(Structured Query Language&#xff09;优化是指对 SQL 查询语句进行调整和改进&#xff0…

关于 Reflect 的笔记

背景&#xff1a;Reflect 为了操作对象而提供的新Api 和 Proxy对象一样 特点 将object 对象的一些明显属于语言内部的方法&#xff0c;放到Reflect 上处理&#xff1b;修改某些object返回的异常结果&#xff0c;让其变得更合理&#xff1b;让object操作都变成函数行为&#xf…

基于ElementUI封装省市区四级联动下拉选择

基于ElementUI封装的省市区下拉级联选择 效果 数据 最新省市区JSON数据获取&#xff1a;https://xiangyuecn.github.io/AreaCity-JsSpider-StatsGov/ 参数说明 参数说明inputNumShow下拉框的数量&#xff0c;最多4个defaultAddress默认显示省市区 例&#xff1a;[‘安徽’, …

按形如 a*sqrt(b) 的格式输出一个非负整数的平方根

【题目描述】 输入一个非负整数 x&#xff0c;若能完全开平方根&#xff0c;则输出其对应的整数平方根值。 否则&#xff0c;按形如 a*sqrt(b) 的格式输出其平方根值&#xff08;a 与 b 均为整数&#xff0c;且 a≠1&#xff0c;b≠1&#xff09;。【输入输出】 典型的输入输出…