Echarts实例教程之树形图表的实现方法
作者:tntxia 发布时间:2024-04-18 09:44:01
树图主要用来可视化树形数据结构,是一种特殊的层次类型。
实现方法,将series->type设置为tree。
Echarts的树形图表,可以是正交的,也可以是径向的。
正交树:
径向树:
实现方法,修改:series->layout设置,orthogonal为正向,radial为径向。
可以自定义,如从右向左:
实现方法,修改:series->orient设置,支持LR、RL、TB、BT,其中RL,就是从右向左。
可以自定义图标:支持'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
实现方法,修改:series->symbol设置
图标是方形的树形图表:
可以自定义,直线还是曲线:
实现方法,修改:series->edgeShape设置,支持curve 和 polyline
直线图表:
initialTreeDepth:
默认展开的深度,默认为2,多于2层的的节点可以点击父节点来展示和隐藏。如果设置为 -1 或者 null 或者 undefined,所有节点都将展开。
itemStyle:
修改树形图表项的样式。
可以修改颜色、大小等
label:
图表项中文字的处理。
可以通过formatter来给图表的文字增加丰富的效果。
lineStyle:
图表中线的处理。
修改lineStyle样式的效果:
emphasis: 聚焦,设置了聚焦后,鼠标放到项,其他无关项就会暂时隐藏。
'none' 不淡出其它图形,默认使用该配置。
'self' 只聚焦(不淡出)当前高亮的数据的图形。
'series' 聚焦当前高亮的数据所在的系列的所有图形。
'ancestor' 聚焦所有祖先节点
'descendant' 聚焦所有子孙节点
emphasis: {
focus: 'ancestor',
blurScope: 'coordinateSystem'
}
树形图表的数据结构:
name: 图表项默认项显示的名称
children: 这个项的子节点
当然,你在数据里可以定义任意属性,如value、num等,可以配合label中的formatter来实现更加丰富的显示效果。
最后是完整的代码:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echarts实例 - 图例</title>
<script src="../../echarts.js"></script>
</head>
<body>
<div id="container" style="width: 500px;height:500px;">
</div>
<script src="./index.js"></script>
</body>
</html>
index.js
var chart = echarts.init(document.getElementById("container"));
var data = {
name: 'Throwable',
children: [{
name: 'Error',
children: [{
name: 'VirtualMachineError',
children: [{
name: 'StackOverflowError'
}, {
name: 'OutOfMemoryError'
}]
}, {
name: 'AWTError'
}]
}, {
name: 'Exception'
}]
}
var data2 = {
name: '龙珠人物',
children: [{
name: '孙悟空'
}, {
name: '布尔玛'
}, {
name: '猪悟能'
}, {
name: '雅木茶'
}, {
name: '龟仙人'
}, {
name: '小林'
}, {
name: '短笛'
}, {
name: '鹤仙人'
}, {
name: '天津饭'
}, {
name: '饺子'
}]
}
chart.setOption({
title: {
text: 'Java异常结构图'
},
series: [{
layout: 'orthogonal',
data: [data],
right: '60%',
type: 'tree',
edgeShape: 'polyline', // curve 和 polyline
symbol: 'rect', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none',
initialTreeDepth: 2,
itemStyle: {
color: 'cyan'
},
lineStyle: {
color: 'red'
},
/**
*
*
* 'none' 不淡出其它图形,默认使用该配置。
'self' 只聚焦(不淡出)当前高亮的数据的图形。
'series' 聚焦当前高亮的数据所在的系列的所有图形。
'ancestor' 聚焦所有祖先节点
'descendant' 聚焦所有子孙节点
*/
emphasis: {
focus: 'ancestor',
blurScope: 'coordinateSystem'
},
}, {
layout: 'radial',
left: '60%',
data: [data2],
type: 'tree',
symbol: 'rect',
symbolSize: 15
}]
})
来源:https://juejin.cn/post/6992934837833187358
猜你喜欢
- 今天看看那些知名的Logo,可能你没注意过,它们也是一直在变化,有的还挺雷人的!先从时尚的苹果开始吧,苹果也有土的时候。1976年那第一个L
- 面向过程的程序设计把计算机程序视为一系列的命令集合,即一组函数的顺序执行。为了简化程序设计,面向过程把函数继续切分为子函数,即把大块函数通过
- 在Windows系统中用“Ctrl+C”和“Ctrl+V”就可以完成复制、粘贴工作,是不是很爽?其实使用a标签的accesskey属性也可以
- 最好也是最简单的办法就是利用Cookie,而不必用到数据库。当然,你愿意用数据库也可以。下面就是利用Cookie来实现的:< 
- 直接上码:select 'bigint unsigned' as type ,'8' as bytes ,~
- 如下所示:import h5pyimport numpy as np#HDF5的写入:imgData = np.zeros((2,4))f
- 本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下我是从 官网 上面下载的社区版MySQL(版本
- 1.如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就需要使用SSH隧道来加密该连接的通信。2.用set password语句来
- 前言利用Python的ffmpy库提取视频中的音频。本文提供工具类代码。环境依赖需要安装ffmpy,安装指令:pip install ffm
- 本文使用案例是基于 python2.7 实现以下内容均为个人使用 peewee 的经验和遇到的坑,不会涉及过多的基本操作。所以,没有使用过
- Python编程语言判断是否是目录在Python编程语言中可以使用os.path.isdir()函数判断某一路径是否为目录。其函数原型如下所
- tkinter获取复选框(Checkbutton)的值定义GUI:from tkinter import *# 初始化Tk()myWindo
- 工欲善其事必先利其器,一个好的工具能让起到事半功倍的效果,Python社区提供了足够多的优秀工具来帮助开发者更方便的实现某些想法,下面这几个
- 1.效果2.环境1.pytorch2.visdom3.python3.53.用到的代码# coding:utf8import torchfr
- 本文实例讲述了Yii2基于Ajax自动获取表单数据的方法。分享给大家供大家参考,具体如下:这里有两张表,表结构如下,locations表存放
- 我们现在一般网站都是利用的MySQL数据库搭建网站的,但是在网上看到很多网友吐槽数据库连接不上的问题,现在我就结合相关资料向提出一些我个人的
- 数据标准化(归一化)处理是数据挖掘的一项基础工作,不同评价指标往往具有不同的量纲和量纲单位,这样的情况会影响到数据分析的结果,为了消除指标之
- 今天有个学生问我:页面中使用GIF格式,失真太大,怎么办呢?这个问题比较简单啊,只要用JPG就可以了。我们常用的页面的图片格式有三种,GIF
- python使用函数改变list函数内改变外部的一个list如果这么写def rotate(nums, k): l
- 主要是运用java.util.regex类。 import java.util.regex.Matcher;import java