echars力引导关系图

效果图
在这里插入图片描述

力引导关系图

  力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力,每条边的两个节点之间添加一个引力,每次迭代节点会在各个斥力和引力的作用下移动位置,多次迭代后节点会静止在一个受力平衡的位置,达到整个模型的能量最小化。力引导布局的结果有良好的对称性和局部聚合性。

数据

chartData:{data:[{name: 'node1',symbolSize: 50,itemStyle:{color: '#fac858'}},{name: 'node2',symbolSize: 30,itemStyle:{color: '#91cc75'}},{name: 'node3',symbolSize: 30,itemStyle:{color: '#91cc75'}},{name: 'node4',symbolSize: 30,itemStyle:{color: '#91cc75'}},{name: 'node5',symbolSize: 30,itemStyle:{color: '#91cc75'}},{name: 'node6',symbolSize: 20},{name: 'node7',symbolSize: 20},{name: 'node8',symbolSize: 20},{name: 'node9',symbolSize: 20},{name: 'node10',symbolSize: 20},{name: 'node11',symbolSize: 20},{name: 'node12',symbolSize: 20},],links:[{source: 'node1',target: 'node2'},{source: 'node1',target: 'node3'},{source: 'node1',target: 'node4'},{source: 'node1',target: 'node5'},{source: 'node2',target: 'node6'},{source: 'node2',target: 'node7'},{source: 'node3',target: 'node8'},{source: 'node4',target: 'node9'},{source: 'node5',target: 'node10'},{source: 'node4',target: 'node11'},{source: 'node3',target: 'node12'},]}

Dom

<div id="tupuDom" style="height: 400px;margin-top: 20px;"></div>

函数

initChart(){let option = {};echarts.dispose(document.getElementById("tupuDom"))let charts = echarts.init(document.getElementById("tupuDom"));option = {tooltip: {trigger: 'item',             },series: [{name: 'Les Miserables',type: 'graph',// 采用力引导布局layout: 'force',force:{// 节点之间的斥力因子repulsion: 150,// 显示布局的迭代动画,数据节点较多时建议开启layoutAnimation: true,// 边的两个节点之间的距离edgeLength: 50},data: this.chartData.data,links: this.chartData.links,// 开启鼠标缩放和平移漫游roam: true,label: {show: 'true',position: 'inside',// 'truncate': 截断,并在末尾显示ellipsis配置的文本,默认为…; ‘break’: 换行overflow: 'truncate',ellipsis: '...',// 标签宽度width: 50},lineStyle: {// 连线的颜色color: 'source',// 边的曲度,从 0 到 1 的值,值越大曲度越大。curveness: 0.3},emphasis: {// 在高亮图形时,聚焦关系图中的邻接点和边的图形。focus: 'adjacency',// 高亮时线的宽度lineStyle: {width: 10}},// 提示框信息tooltip: {formatter: (item)=>{if(item.data.name){// 鼠标移入节点提示框信息return item.name}else{// 鼠标移入线的提示框信息return item.data.source + '-'+item.data.target}}}}]};charts.setOption(option);}

调用

this.initChart()

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

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

相关文章

AD21 PCB设计的高级应用(九)3D PDF的输出

&#xff08;九&#xff09;3D PDF的输出 1.3D PDF的输出2.制作PCB 3D视频 1.3D PDF的输出 Altium Designer 19 带有 3D输出功能,能够直接将 PCB 的 3D效果输出到 PDF 中。 ’(1)打开带有 3D 模型的 PCB 文件,执行菜单栏中“文件”→“导出”→“PDF3D”命令&#xff0c;选择…

IDEA中Git面板操作介绍 变基、合并、提取、拉取、签出

IDEA中Git面板操作介绍 变基、合并、提取、拉取、签出 面板介绍 变基、合并 提取、拉取 签出、Checkout 面板介绍 如图&#xff0c;在IDEA的Git面板中&#xff0c;仓库会分为本地仓库和远程仓库&#xff0c;代码仓库里面放的是各个分支。 分支前面的书签&#x1f516;标志…

Python:列表(list)与元组(tuple)

列表与元组 列表&#xff1a;list元组&#xff1a;tuple 比较直观的区分&#xff1a;列表是中括号"[ ]“&#xff0c;元组是小括号”( )"元组可以看成列表的只读形式 # 列表 list1 [hello, world] list2 [1, 2, 3, 4, 5] list3 ["a", "b", &…

【Redis】内存数据库Redis进阶(Redis哨兵集群)

目录 分布式缓存 Redis 四大问题搭建Redis哨兵集群哨兵原理Redis哨兵集群小结RedisTemplate集成哨兵机制 分布式缓存 Redis 四大问题 基于 Redis 集群解决单机 Redis 存在的四大问题&#xff1a; 搭建Redis哨兵集群 搭建一个三节点形成的 Sentinel 集群&#xff0c;来监管 R…

git使用(由浅到深)

目录流程图 1. 分布式版本控制与集中式版本控制 1.1 集中式版本控制 集中式版本控制系统有:CVS和SVN它们的主要特点是单一的集中管理的服务器&#xff0c;保存所有文件的修订版本&#xff1b;协同开发人员通过客户端连接到这台服务器&#xff0c;取出最新的文件或者提交更新…

Java小型操作系统模拟(采用策略模式结合反射进行搭建,支持一些简单的命令)

Java小型操作系统模拟 项目说明第一阶段&#xff1a;反射结合策略模式搭建基本的命令结构第二阶段&#xff1a;注解结合反射与策略模式&#xff0c;将结构进一步规范第三阶段&#xff1a;开启新的窗口&#xff0c;将控制台输入切换到新窗口中&#xff0c;同时创建右键菜单&…

【雕爷学编程】MicroPython动手做(27)——物联网之掌控板小程序3

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

Stable Diffusion AI绘画学习指南【本地环境搭建win+mac】

一、硬件配配置要求 系统&#xff1a;windows 10 / Mac os 硬盘&#xff1a;C 盘预留 15GB 以上&#xff0c;其他盘 50GB 以上,Stable Ddiffusion的很多大模型都是以 GB 起步。 显卡&#xff1a;4GB 以上&#xff0c;建议 8GB, 效率高&#xff0c;能玩大尺寸的图 CPU&…

微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)

问题描述 今天第一次接触vant组件库。 ant官网地址适用于Vue3 支持Vue2、Vue3、微信小程序等 我在使用van-tabs组件时遇到了一个问题&#xff0c;如下图所示&#xff1a; 从图片上可以看到有个灰色的横向滚动条&#xff0c;一开始领导给我说这个问题&#xff0c;我反反复复都…

C++ ——stack、queue容器模拟实现及deque容器底层介绍

deque文档 stack文档 deque文档 文章目录 &#x1f345;1. deque容器&#x1f352;deque底层&#x1f352;deque的优势&#x1f352;deque的劣势 &#x1fad0;2. stack模拟实现&#x1f95d;3. queue模拟实现 &#x1f345;1. deque容器 查看文档可发现&#xff0c;栈和队列都…

Netty自定义消息协议的实现逻辑处理粘包拆包、心跳机制

Netty 自定义消息协议的实现逻辑自定义编码器 心跳机制实现客户端发送心跳包 自定义消息协议的实现逻辑 消息协议&#xff1a;这一次消息需要包含两个部分&#xff0c;即消息长度和消息内容本身。 自定义消息编码器︰消息编码器将客户端发送的消息转换成遵守消息协议的消息&…

Linux第一个小程序-进度条(缓冲区概念)

1.\r和\n C语言中有很多字符 a.可显字符 b.控制字符 对于回车其实有两个动作&#xff0c;首先换行&#xff0c;在将光标指向最左侧 \r &#xff1a;回车 \n&#xff1a;换行 下面举个例子&#xff1a; 把\n去掉会怎样 什么都没输出。为什么&#xff1f; 2.缓冲区概念 观察下两个…

网工内推 | 网络安全工程师,最高15K,有高温补贴

01 超圣信华 招聘岗位&#xff1a;网络安全工程师 职责描述&#xff1a; 1. 负责网络安全产品的售前沟通交流、现状调研、方案设计、产品测试、产品选型和招投标等工作。 2. 负责网络安全集成项目的实施管理、项目交付文档编制以及项目验收等工作。 3. 负责网络安全产品的售后…

在云服务器上,clone github时报Connection timed outexit code: 128

文章目录 问题解决方案 问题 在执行pip install安装依赖时&#xff0c;需要clone github代码&#xff0c;此时报了Connection timed out&exit code: 128错误&#xff0c;原因是访问超时了&#xff0c;此时需要使用代理 fatal: unable to access https://github.com/hugg…

【MATLAB第62期】基于MATLAB的PSO-NN、BBO-NN、前馈神经网络NN回归预测对比

【MATLAB第62期】基于MATLAB的PSO-NN、BBO-NN、前馈神经网络NN回归预测对比 一、数据设置 1、7输入1输出 2、103行样本 3、80个训练样本&#xff0c;23个测试样本 二、效果展示 NN训练集数据的R2为&#xff1a;0.73013 NN测试集数据的R2为&#xff1a;0.23848 NN训练集数据的…

解决Mysql报错2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)

1.找到mysql文件夹&#xff0c;将my,ini文件放入bin文件夹 2.管理员模式打开cmd 3.输入netstat -ano查看端口占用情况&#xff0c;这里我已经开启mysql应用&#xff0c;所以会有3306&#xff0c;如果没有开启是不会有的 4.输入sc delete mysql&#xff0c;删除mysql服务 5.将…

接口自动化报告,生成本地服务并自动打开时失败

错误原因&#xff1a; 端口号被占用 首先可以在cmd中调出命令窗口然后执行命令netstat -ano就可以查看所有活动的链接&#xff0c;找到被占用的端口号 1、通过命令taskkill /f /t /im "进程名称" &#xff0c;根据进程的名称杀掉所有的进程。或者taskkill /f /t /p…

嵌入式开发的学习内容和技能包括:

. 熟悉C语言编程 掌握基础电子知识&#xff0c;如数字电路、模拟电路和单片机 .熟练掌握嵌入式操作系统的原理、内核架构和应用&#xff0c;如Linux、RTOS等 了解各种外设接口及其驱动程序开发&#xff0c;如SPI、I2C、USART等 熟悉常用的嵌入式开发工具和软件工程流程&#…

如何通过 5 步激活策略扩大用户群

假设&#xff0c;你现在是一个“深藏功与名”的增长黑客。前期你表现非常好&#xff0c;做了一些拉新实验&#xff0c;每天都有上千用户进入到产品。团队成员和家人朋友都非常开心你们的产品增长终于有了起色。 然而&#xff0c;如果你不重视拉新&#xff08;acquisition&…