Echarts入门(三)| 树形图 关系图 词云图

2023-10-31 12:38

本文主要是介绍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 Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

数论入门整理(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 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 #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

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

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就

POJ1269 判断2条直线的位置关系

题目大意:给两个点能够确定一条直线,题目给出两条直线(由4个点确定),要求判断出这两条直线的关系:平行,同线,相交。如果相交还要求出交点坐标。 解题思路: 先判断两条直线p1p2, q1q2是否共线, 如果不是,再判断 直线 是否平行, 如果还不是, 则两直线相交。  判断共线:  p1p2q1 共线 且 p1p2q2 共线 ,共线用叉乘为 0  来判断,  判断 平行:  p1p

pip-tools:打造可重复、可控的 Python 开发环境,解决依赖关系,让代码更稳定

在 Python 开发中,管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等,都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools? pip-tools 是一组命令行工具,旨在简化 Python 依赖关系的管理,确保项目环境的稳定性和可重复性。它主要包含两个核心工具:pip-compile 和 pip

音视频入门基础:WAV专题(10)——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道,通过FFprobe命令可以打印WAV音频文件每个packet(也称为数据包或多媒体包)的信息,这些信息包含该packet的pts、dts: 打印出来的“pts”实际是AVPacket结构体中的成员变量pts,是以AVStream->time_base为单位的显

C语言指针入门 《C语言非常道》

C语言指针入门 《C语言非常道》 作为一个程序员,我接触 C 语言有十年了。有的朋友让我推荐 C 语言的参考书,我不敢乱推荐,尤其是国内作者写的书,往往七拼八凑,漏洞百出。 但是,李忠老师的《C语言非常道》值得一读。对了,李老师有个官网,网址是: 李忠老师官网 最棒的是,有配套的教学视频,可以试看。 试看点这里 接下来言归正传,讲解指针。以下内容很多都参考了李忠老师的《C语言非