echarts tree默认展开_Echarts树图定制详解
本文讲的是如何定制Echarts的tree图。主要包括下载、全局变量名修改、左键菜单添加、右键菜单添加、内容缩放、文本过滤高亮等。
一 说明
Echarts中提供了tree图,但实际项目中,该tree图并不一定能完全满足项目需求。例如:需要在鼠标右键到节点上添加一个下拉菜单,并且能进行操作。因此,就需要要对该图表进行定制。
二 代码下载
实际项目开发中,可能只需要一个tree图,就没必要下载全量的Echarts代码包了,因为完整的Echarts代码包非常大,10多万行代码呢,为提高项目性能,建议只下载用到的图标和组件。
而Echarts也非常人性化的提供了在线定制构建能力,可以实现按需下载:http://www.echartsjs.com/builder.html
三 全局变量名修改
实际项目中可能已经引入了Echarts,但该Echarts版本存在问题:当前使用的Echarts版本太老了,该版本中还没有我们将要用到的Tree图,而要将整个版本升级到最新版本,或者有Tree图的版本,可能会导致之前图表出现接口不一致导致的BUG,尤其是已经上线或者即将上线的项目,这种升级风险很大。
一个比较好的解决方案就是:引入两套Echarts代码。
但必须解决两套Echarts图表代码冲突的问题,而这个冲突主要是Echarts对外提供的全局变量windows.echarts。只需要将一个Echarts代码包中的全局变量修改掉,然后使用修改后的全局变量生成图表即可。
在下载的Echarts包中(uglify混淆后的包),搜echarts,将下边位置的echarts修改为dlgTreeEcharts:
没有做uglify混淆压缩的Echarts包中,修改echarts的位置如下:
定制完后,生成图表代码如下:
var myChart = dlgTreeEcharts.init(document.getElementById('main'));
四 hover菜单
Echarts提供了比较多的事件接口,其中click、mouseover等是最基础的事件。
详细参考:http://www.echartsjs.com/api.html#events
1 myChart.on('mouseover', function(params) {2 console.log(params);3 $('.left-hover-menu').css({4 'display': 'block',5 'left': params.event.offsetX + 15,6 'top' : params.event.offsetY + 15
7 });8 });9 myChart.on('mouseout', function(params) {10 console.log('out');11 $('.left-hover-menu').css({12 'display': 'none',13 'left': '-9999px',14 'top' : '-9999px'
15 });16 });
上边代码中,mouseover用于显示绝对定位的菜单,并设置其位置;mouseout用于隐藏菜单。
五 右键菜单
Echarts还提供了一个contextmenu事件,用于鼠标右击时触发。
详细见:
http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA
http://www.echartsjs.com/api.html#events
注意:在添加右键菜单时,首先要给整个树图外层容器DOM绑定一个右键事件,返回false,避免浏览器默认事件触发,出现默认菜单。
1 $('.tree-container').bind("contextmenu", function () { return false; });//防止默认菜单弹出
2 myChart.on('contextmenu', function(params) {3 $('.right-click-menu').css({4 'display': 'block',5 'left': params.event.offsetX + 15,6 'top' : params.event.offsetY + 15
7 });8 });9 $('.tree-container').click(function() {10 $('.right-click-menu').css({11 'display': 'none',12 'left': '-9999px',13 'top' : '-9999px'
14 });15 })
六 缩放功能
Echarts中专门提供了用于缩放的组件datazoom,但tree图并没用用到该组件。这点令不少人大感恼火,研究尝试很久,使用datazoom配置到tree图后就是不生效甚至报错。最后,无意中看到tree的series中有个配置项是roam,用于控制缩放和平移,不按套路出牌啊,藏得真深。
很简单,设置roam为true,缩放和平移功能都有了。
roam官方介绍:http://www.echartsjs.com/option.html#series-tree.roam
七 文字过滤高亮
实际项目中,有这样的需求:由于树的节点特别多,需要提供搜索功能,例如:输入‘报表’,需要查找所有节点name中包含‘报表’两个字的,并将其高亮显示。
这个可以通过Echarts提供的富文本标签和Tree组件的series.label.formatter来实现。
http://www.echartsjs.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE
http://www.echartsjs.com/option.html#series-tree.label.formatter
http://www.echartsjs.com/option.html#series-tree.label.rich
详细代码如下:
1 label : {2 normal: {3 position: 'left',4 verticalAlign: 'middle',5 align: 'right',6 fontSize: 15,7 formatter: function(param) {8 if (param.name.match('Tra')) {9 return '{a|' + param.name + '}'
10 } else{11 returnparam.name;12 }13 },14 rich: {15 a: {16 color: 'red',17 lineHeight: 10
18 }19 }20 }21 }
代码说明:上边代码中,formatter通过设置为函数,对name进行判断,看是否有匹配的关键字‘Tra’(用户搜索的关键字,Tra只是举个例子),如果匹配上了,就返回一个匹配富文本的格式;下边的rich就是富文本样式设置。
实际效果如下:
八 各级文字位置设置
Echarts对各级文字位置有个自适应设置:该节点展开时,文字自动放到左侧;节点收起来时,文字自动放到右侧了。
实际项目中,为了达到视觉上整齐效果,需要无论节点是否展开都将文字设置为一个位置。
实现方法:
data接口中,有个label属性,label属性中的position用于设置当前节点的文字位置,可以通过这个接口将该级文本设置为固定位置。
注意:不要设置label.align属性,否则可能位置有偏差。
设置方法如下:
效果如下:
八 完整示例代码
说明:由于data数据很多,没有在下边显示,可以参考Echarts官网示例数据:http://www.echartsjs.com/examples/editor.html?c=tree-basic
1
2
3
4
5
Title
6
7
8
9 .tree-container{
10 border:1px solid grey;
11 position:relative;
12 }
13
14 .left-hover-menu{
15 position:absolute;
16 border:1px solid grey;
17 left:-99999px;
18 top:-999999px;
19 }
20
21 .right-click-menu{
22 position:absolute;
23 border:1px solid blue;
24 left:-99999px;
25 top:-999999px;
26 }
27
28
29
30
31
echarts tree默认展开_Echarts树图定制详解相关推荐
- echarts tree默认展开_echarts tree控制节点的展开收起
echarts使用版本 v4版本 需求 当数据量比较大时,tree的子节点会挤在一起,这不是产品想要的效果 产品期望点击某一子节点时,其他同级节点自动收起,效果如下 echarts官方文档并没有提供类 ...
- echarts tree默认展开_Echarts树形图展开和收缩
一.实现效果 收缩效果: 展开效果: 二.实现代码 展开/收缩 切换 var dom = document.getElementById("container"); var myC ...
- 【SAP Abap】BOM多级展开函数 CS_BOM_EXPL_MAT_V2 使用详解
SAP ABAP BOM多级展开函数 CS_BOM_EXPL_MAT_V2 使用详解 1.函数入参说明 2.函数出参说明 1.函数入参说明 CALL FUNCTION 'CS_BOM_EXPL_MAT ...
- 计算机网络: IP地址,子网掩码,默认网关,DNS服务器详解
楔子: 以Windows系统中IP地址设置界面为参考(如图1), IP地址, 子网掩码, 默认网关 和 DNS服务器, 这些都是什么意思呢? 学习IP地址的相关知识时还会遇到网络地址,广播地址,子网等 ...
- IP地址,子网掩码,默认网关,DNS服务器详解
IP地址,子网掩码,默认网关,DNS服务器详解 为了更深入的学习TCP/IP协议,最近看了不少有关资料,收集整理记录如下,以备后面的使用和方便各位学习: IP地址,子网掩码,默认网关,DNS服务器是什 ...
- Echarts之甘特图type: ‘custom‘参数详解
甘特图 const groupData = XEUtils.groupBy(data, "eqpName"); //分组后的数据 const yAxisData = Object. ...
- Spring Boot 2.x基础教程:默认数据源Hikari的配置详解
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 翟永超 来源 | http://blog.di ...
- html中transition默认,CSS3中的Transition详解
W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改 ...
- ad19pcb设置恢复默认_电脑主板BIOS设置详解BIOS知识大全
电脑主板BIOS设置详解-BIOS知识大全 什么是电脑BIOS,一般电脑主板都设置了电脑开机后一直按着Del键即可进入BIOS. 系统开机启动 BIOS,即微机的基本输入输出系统(Basic Inpu ...
最新文章
- Ios文件连接dlna服务器,iOS播放多种视频格式,实现DLNA|AirPlay投射盒子总结
- Think Pad T410键盘溅水有惊无险
- CM: word template merge 工具
- Java垃圾回收(3)
- kafka分区与分组原理_大数据技术-Kafka入门
- JEECG领取免费开发文档活动
- 2017 开源软件排行_2017年最佳开源教程
- (一)SpringMVC学习笔记-概述
- flask web开发:基于python的web应用开发实战_在知乎上学 Python Web 开发篇
- 【Git入门之六】远程仓库
- 淘宝用户行为数据分析详解
- QQ浏览器如何把m3u8转换为mp4等其他格式
- windows10如何让图片打开方式为照片查看器
- ITIL学习笔记——核心流程之:配置管理
- 【精度】概率论之概念解析:边缘化(Marginalisation)
- IKEv2子网之间秘钥重协商
- 阿里云-云存储OSS
- vcs 覆盖率收集2——覆盖率选项 + 合并覆盖率
- 计算机操作系统选择题
- 基于asp.net高考志愿填报参考信息管理系统#毕业设计
热门文章
- SpringBoot项目报错:Failed to configure a DataSource: ‘url‘ attribute is not specified and no embedd
- Android 屏幕适配之刘海屏适配(notch 适配)
- c# 36进制,000-ZZZ
- Vue2.0进阶组件篇1 教你秒撸(短信倒计时组件)
- 数据分析-手游指标LTV(用户生命周期价值)
- 百度云加速疑似进行了DNS劫持
- 常用OJ 编程软件 学习推荐
- 打造小程序B2B水果集采平台,果联科技获千万元天使轮融资...
- 上传linux文件本地报错
- 合肥工业大学 数控车 程序