Echarts实例教程之树形图表的实现方法
树图主要用来可视化树形数据结构,是一种特殊的层次类型。
实现方法,将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 }] })
总结
到此这篇关于Echarts实例教程之树形图表实现的文章就介绍到这了,更多相关Echarts实现树形图表内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要介绍了C#实现绘制面形图表的方法,对于C#初学者很好的掌握C#图形绘制有一定的借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了el-table树形表格表单验证(列表生成序号),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13
- 这篇文章主要介绍了如何使用RoughViz可视化Vue.js中的草绘图表,帮助大家更好的理解和使用roughViz,感兴趣的朋友可以了解下...2021-01-31
- 这篇文章主要介绍了详解Javascript利用echarts画空气质量地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-11
- 众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下...2021-08-06
echarts实现获取datazoom的起始值(包括x轴和y轴)
这篇文章主要介绍了echarts实现获取datazoom的起始值(包括x轴和y轴),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20在echarts中图例legend和坐标系grid实现左右布局实例
这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17- 本篇文章介绍了C# 绘制统计图大全,其中包括状图, 折线图, 扇形图,有需要的同学可以了解一下。...2020-06-25
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息,通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,需要的朋友参考下吧...2016-02-26- 这篇文章主要介绍了matplotlib 三维图表绘制方法简介,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-21
- 这篇文章主要为大家详细介绍了vue+echarts实现堆叠柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-05
- 这篇文章主要介绍了python如何从Oracle读取数据生成图表,帮助大家更好的利用python处理数据,感兴趣的朋友可以了解下...2020-10-14
- 这篇文章主要介绍了使用pyecharts1.7进行简单的可视化大全,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-18
- 本篇文章主要介绍了Vue2 使用 Echarts 创建图表实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 ...2017-05-22
- 这篇文章主要介绍了解决Echarts 显示隐藏后宽度高度变小的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-19