echarts树图添加节点点击事件

需求：为树图添加节点点击事件，点击不同层级的节点文本时进行不同的操作

实现过程：

// 初始化树图方法
initTreeChart(){
	//-----------------------第一步：实现树图，代码如下---------------------------
	//获取echarts要渲染的元素
    let dom = document.getElementById('treeChartBox');
    let myChart = this.echarts.init(dom);
    //模拟数据，注意树图取的是name属性
    let data = [{
	    name: "规则配置",
	    children:[
	        {
	            name:'数据规范性检查',
	            children:[
	                {name:'目录及文件规范性（1010）'},
	                {name:'数据有效性（1020）'},
	                {name:'图件清晰度（1030）'},
	                {name:'元数据（1040）'}
	            ],
	            collapsed: true //默认展开或者关闭
	        },{
	            name:'图形一致性检查',
	            children:[
	                {name:'面层之间拓扑关系（2020）'}
	            ]
	        },{
	            name:'图数一致性检查',
	            children:[
	                {name:'面层之间拓扑关系（2020）'}
	            ]
	        }
	    ]
	}];
    //树图配置
    let option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',
                data: data,
                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',
                symbolSize: 10,
                itemStyle:{
                    color: '#228EFB' ,
                },
                lineStyle:{
                    color: '#DDD',
                },
                label: {
                    color: "#333",
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right',
                    fontSize: 14
                },
                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },
                emphasis: {
                    focus: 'descendant'
                },
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    };
    myChart.setOption(option);
    // 获取数据设置图形的高度，避免数据过多时出现重叠现象
    const nodes = myChart._chartsViews[0]._data._graphicEls;
    let mindBox = document.getElementById('mindBox');
    let allNode = 0;
    for (let index = 0; index < nodes.length; index++) {
        const node = nodes[index];
        if (node === undefined) {
            continue
        }
        allNode++;
    }
    const height = window.innerHeight;
    const currentHeight = 15 * allNode;
    const newHeight = Math.max(currentHeight, height);
    mindBox.style.height = newHeight + 'px';
    dom.style.height = newHeight + 'px';
    myChart.resize();
    //-----------------------第二步：为树图添加节点点击事件，代码如下---------------------------
    myChart.on("click", this.treeNodeclick);
},
// 节点点击事件
treeNodeclick(param){
    /* true 代表点击的是圆点
       fasle 表示点击的是当前节点的文本
    */
    if(param.event.target.culling === true){
        return
    } else if(param.event.target.culling === false){
        let args = param.data; //当前节点及其子节点的值
        let level = param.data.level; //当前节点的层级 eg:"1-1-0",可以通过level判断当前的层级，从而进行不同的操作
        console.log(args,level);
    }
},