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) { //使用vue
    this.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();
}