本文主要是介绍echarts树图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
用echarts做了两周(算上之前应该是4周)的树图，记录一下遇到的一些特性和问题。
特性：
1、echarts中绑定事件，通过 on方法
例如：绑定click方法
myChart.on('click', function (params) {console.log(params);
});2、echarts的 on方法 先于 DOM点击事件执行。
3、echarts实例的 _chartsViews[0]._data 有很多有用的属性。
4、改变图表尺寸，在容器大小发生改变时需要手动调用：resize(width?: number|string, height?: number|string, silent?: boolean)。silent：是否禁止抛出事件。默认为 false。
5、echarts的mousedown事件 先于 render函数执行，click事件后于render渲染函数执行。
问题：
1、给树的label增加点击事件
开始需求没有对树图的 symbol 节点的要求，于是把 symbol 节点改为方形，加上padding，背景色等，放置在文字后面，当点击文字时通过echarts的 on方法 实现具体点击事件。
2、点击文字（ symbol节点 ）弹出弹出框，点击其他地方，弹出框消失
通过控制 2 个boolean值（例：showBox 和 clickBlank）来控制弹出框的消失与显现——showBox ：控制弹出框显现与消失； clickBlank：控制showBox值的改变。
clickBlank初始值设置为true，当点击到节点将clickBlank设置为false，整个echarts画布添加点击事件：当点击画布，若 clickBlank 为false，即点击到的空白处，则将showBox 置为false，若 clickBlank 为true，即点击的节点，则将 clickBlank 置为true。因为echarts的 on方法 先于 DOM点击事件执行，所以可以实现效果。
...
this.myChart.on('click', function (params) { //使用vuethis.clickBlank = false;
});
...
DomClick(){if(this.clickBlank){this.showBox = false;}else{this.clickBlank = true;}
}3、不同节点个数以动态高度和宽度展示
高度：echarts实例的 _chartsViews[0]._data._graphicEls 数组中的值为 undefined 时，此节点是收起的。循环找到当前未收起的节点数 * 一个节点大致占的高度，设置树图的高度，则实现动态的高度了（不是很准确）。
宽度：echarts实例的 _chartsViews[0]._data.tree._nodes的 depth 是节点的层数，通过循环找到当前未收起的节点的最深层数 * 每层节点大致占的宽度来设置树图的宽度。
想要每次收起展开都动态的高度、宽度显示，则在on方法点击事件时计算一次，然后 调用echarts的 resize() 方法改变绘图大小。
4、每次浏览器窗口大小发生变化，改变图大小
window.addEventListener('resize',()=>{this.myEcharts.resize();});5、个别节点不同样式
利用echarts的富文本标签。官网讲解地址
6、控制展开收起：仅部分节点可点击时展开收起
on方法的函数参数param的dataIndex是当前点击（触发）的节点编号，echarts实例的 _chartsViews[0]._data.tree._nodes的 isExpand 控制节点展开收起。使mousedown的时候isExpand变为相反值，则click时再变为相反值时就不会收起展开了。
this.myChart.on('mousedown',(param)=>{let nodeIndex = param.dataIndex;if(不是可展开收起的节点){this.myChart._chartsViews[0]._data.tree._nodes[nodeIndex] = !this.myChart._chartsViews[0]._data.tree._nodes[nodeIndex]; }
})7、点击节点动态加载新数据渲染新的子节点，并展开新节点
需要点击的节点有children属性。collapsed 属性可控制展开收起，false：展开。
this.myChart.on('mousedown',(param)=>{...//从后台获取数据param.data.children.push(新数据);param.data.collapsed = false; ...//动态高度宽度this.myChart.resize();
}
这篇关于echarts树图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
