Echarts入门（三）| 树形图 关系图 词云图

2023-10-31 12:38
文章标签 入门 关系 云图 echarts 树形图

本文主要是介绍Echarts入门（三）| 树形图 关系图 词云图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

你要的目录

        • 树形图
        • 关系图
        • 词云图

PS：所用数据纯属虚构！

树形图

树形图（Tree Diagram）是用来表示一个概率空间。树形图可以表示独立事件（例如多次掷硬币）和条件概率（例如不放回的抽卡）。

PS：树形图的数据由name和children形成的。children内包含分支。

参数含义

tooltip. triggerOn = ‘mousemove|click’

string

提示框触发的条件，可选：

  • 'mousemove'

    鼠标移动时触发。

  • 'click'

    鼠标点击时触发。

  • 'mousemove|click'

    同时鼠标移动和点击时触发。

  • 'none'

verticalAlign

string

文字垂直对齐方式，默认自动。

可选：

  • 'top'
  • 'middle'
  • 'bottom'

series-tree. expandAndCollapse = true

boolean

子树折叠和展开的交互，默认打开 。由于绘图区域是有限的，而通常一个树图的节点可能会比较多，这样就会出现节点之间相互遮盖的问题。为了避免这一问题，可以将暂时无关的子树折叠收起，等到需要时再将其展开。如上面径向布局树图示例，节点中心用蓝色填充的就是折叠收起的子树，可以点击将其展开。

series-tree.data. animationDuration = 1000

number Function

初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果。

series-tree.data. animationDurationUpdate = 300

number Function

数据更新动画的时长。

支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="/static/js/echarts.min.js"></script><!-- cdn --><!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
</head>
<body><div id="tree" style="width: 900px; height: 400px;"></div><script>var tree_chart = echarts.init(document.getElementById("tree"));var data = {"name": "flare","children": [{"name": "analytics","children": [{"name": "cluster","children": [{"name": "AgglomerativeCluster","value": 3938}, {"name": "CommunityStructure","value": 3812}, {"name": "HierarchicalCluster","value": 6714}, {"name": "MergeEdge","value": 743}]}, {"name": "graph","children": [{"name": "BetweennessCentrality","value": 3534}, {"name": "LinkDistance","value": 5731}, {"name": "MaxFlowMinCut","value": 7840}, {"name": "ShortestPaths","value": 5914}, {"name": "SpanningTree","value": 3416}]}, {"name": "optimization","children": [{"name": "AspectRatioBanker","value": 7074}]}],"collapsed": true}, {"name": "animate","children": [{"name": "Easing","value": 17010}, {"name": "FunctionSequence","value": 5842}, {"name": "interpolate","children": [{"name": "ArrayInterpolator","value": 1983}, {"name": "ColorInterpolator","value": 2047}, {"name": "DateInterpolator","value": 1375}, {"name": "Interpolator","value": 8746}, {"name": "MatrixInterpolator","value": 2202}, {"name": "NumberInterpolator","value": 1382}, {"name": "ObjectInterpolator","value": 1629}, {"name": "PointInterpolator","value": 1675}, {"name": "RectangleInterpolator","value": 2042}]}, {"name": "ISchedulable","value": 1041}, {"name": "Parallel","value": 5176}, {"name": "Pause","value": 449}, {"name": "Scheduler","value": 5593}, {"name": "Sequence","value": 5534}, {"name": "Transition","value": 9201}, {"name": "Transitioner","value": 19975}, {"name": "TransitionEvent","value": 1116}, {"name": "Tween","value": 6006}]}]};var tree_option = {tooltip:{trigger: 'item',triggerOn: 'mousemove',},series:[{type:'tree',data:[data],top:'1%',left:'15%',bottom:'1%',right:'7%',symbolSize: 7,orient: 'RL',label: {position: 'right',verticalAlign:'middle',align:'left',},leaves:{label:{position: 'left',verticalAlign: 'middle',align:'right',}},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750,}]};tree_chart.setOption(tree_option);</script>
</body>
</html>

如图所示：
在这里插入图片描述

关系图

参数含义

series-graph. animationEasingUpdate = cubicOut

string

数据更新动画的缓动效果。

series-graph. layout = ‘none’

string

图的布局。

可选：

  • 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
  • 'circular' 采用环形布局
  • 'force' 采用力引导布局

series-graph. edgeSymbol = [‘none’, ‘none’]

Array string

边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：

edgeSymbol: ['circle', 'arrow']

series-graph. edgeSymbolSize = 10

Array number

边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。

series-graph.lineStyle. curveness

number

边的曲度，支持从 0 到 1 的值，值越大曲度越大。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="/static/js/echarts.min.js"></script><!-- cdn --><!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
</head>
<body><div id="graph" style="width: 600px; height: 400px;"></div><script>var graph_chart = echarts.init(document.getElementById('graph'));var graph_option = {title:{text:'graph入门'},tooltip:{},animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',series:[{type:'graph',layout:'none',symbolSize: 50,roam: true,lable:{show:true},edgeSymbol:['circle', 'arrow'],edgeSymbolSize: [4, 10],edgeLabel:{fontSize: 20},data: [{name: '节点1',x: 300,y: 300}, {name: '节点2',x: 800,y: 300}, {name: '节点3',x: 550,y: 100}, {name: '节点4',x: 550,y: 500}],links: [{source: 0,target: 1,symbolSize: [5, 20],label: {show: true},lineStyle: {width: 5,curveness: 0.2}}, {source: 1,target: 0,label: {show: true},lineStyle: {curveness: 0.2}}, {source: '节点1',target: '节点3'}, {source: '节点2',target: '节点3'}, {source: '节点2',target: '节点4'}, {source: '节点1',target: '节点4'}],lineStyle: {opacity: 0.9,width: 2,curveness: 0}}]};graph_chart.setOption(graph_option);</script></body>
</html>

如图所示：
在这里插入图片描述

词云图

“词云”这个概念由美国西北大学新闻学副教授、新媒体专业主任里奇·戈登（Rich Gordon）于近日提出。戈登做过编辑、记者，曾担任迈阿密先驱报（Miami Herald）新媒体版的主任。他一直很关注网络内容发布的最新形式——即那些只有互联网可以采用而报纸、广播、电视等其它媒体都望尘莫及的传播方式。通常，这些最新的、最适合网络的传播方式，也是最好的传播方式。 因此，“词云”就是通过形成“关键词云层”或“关键词渲染”，对网络文本中出现频率较高的“关键词”的视觉上的突出。

PS：词云图需要在官网的字符云下载echarts-wordcloud.min.js
https://github.com/ecomfe/echarts-wordcloud

也可以私信找我

参数含义

drawOutOfBound

boolean

设置为true，以允许部分在画布外部绘制单词。
允许绘制大于画布大小的单词

代码如下（数据纯属虚构）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="/static/js/echarts.min.js"></script><!-- cdn --><!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> --><script src="/static/js/echarts-wordcloud.min.js"></script>
</head>
<body><div id="wordcloud" style="width: 600px; height: 400px;"></div><script>var wordcloud_chart = echarts.init(document.getElementById('wordcloud'));var wordcloud_option = {series:[{type: 'wordCloud',gridSize: 2,sizeRange: [12, 50],shape: 'pentagon',width: 600,height: 400,drawOutOfBound: true,textStyle: {normal: {color: function() {return 'rgb(' + [Math.round(Math.random() * 255),Math.round(Math.random() * 255),Math.round(Math.random() * 255)].join(',') + ')';}},emphasis: {shadowBlur: 10,shadowColor: '#333'}},// 数据纯属虚构data:[{name:'学校',value: 10000,},{name:'学生',value: 9800,},{name:'老师',value: 7000,},{name:'人民日报',value: 100,},{name:'体侧',value: 4100,},{name:'开学',value: 11000,},{name:'返校',value: 8430,},{name:'疫情',value: 2345,},{name:'教室',value: 234,},{name:'上课',value: 3456,},{name:'网课',value: 6789,},{name:'中暑',value: 1233,},{name:'感受',value: 2300,},{name:'家长',value: 3444,},{name:'宿舍',value: 2666,},{name:'回去',value: 1566,},{name:'隔离',value: 7786,},{name:'考虑',value: 4576,},{name:'意义',value: 1266,}]}]};wordcloud_chart.setOption(wordcloud_option);</script>
</body>
</html>

如图所示：
在这里插入图片描述

这篇关于Echarts入门（三）| 树形图 关系图 词云图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/315405。

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
Tomcat版本与Java版本的关系及说明

Tomcat版本与Java版本的关系及说明

《Tomcat版本与Java版本的关系及说明》：本文主要介绍Tomcat版本与Java版本的关系及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Tomcat版本与Java版本的关系Tomcat历史版本对应的Java版本Tomcat支持哪些版本的pythonJ
阅读更多...
Python FastAPI入门安装使用

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节：FastAPI入门一、FastAPI框架介绍什么是ASGI服务（WSGI）二、FastAP
阅读更多...
python安装whl包并解决依赖关系的实现

python安装whl包并解决依赖关系的实现

《python安装whl包并解决依赖关系的实现》本文主要介绍了python安装whl包并解决依赖关系的实现,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录一、什么是whl文件？二、我们为什么需要使用whl文件来安装python库？三、我们应该去哪儿下
阅读更多...
MYSQL关联关系查询方式

MYSQL关联关系查询方式

《MYSQL关联关系查询方式》文章详细介绍了MySQL中如何使用内连接和左外连接进行表的关联查询,并展示了如何选择列和使用别名,文章还提供了一些关于查询优化的建议,并鼓励读者参考和支持脚本之家... 目录mysql关联关系查询关联关系查询这个查询做了以下几件事MySQL自关联查询总结MYSQL关联关系查询
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站，手机流量可以访问IPV6网络的服务，为什么不在电脑搭建Home Assistant（hass），来控制你的设备呢？@智能家居 @万物互联
阅读更多...
poj 2104 and hdu 2665 划分树模板入门题

poj 2104 and hdu 2665 划分树模板入门题

题意： 给一个数组n（1e5）个数，给一个范围（fr， to， k），求这个范围中第k大的数。 解析： 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码： poj 2104： #include <iostream>#include <cstdio>#include <cstdlib>#include <al
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2