版权声明：本文为博主原创文章，想转就转，知识，谁学到就是谁的 https://blog.csdn.net/rain_web/article/details/80386247
在Echarts中设置Tree的子节点点击事件
今天用echarts做一个树形图，需要在点击某个子节点的时候，能够弹出这个节点的信息或者查询到其他数据，在百度上查了一下，有很多有的方法和我下载的echarts源码都不一样，最后自己试了很久才找到方法，特此写出来，有需要的同学可以参考一下，和网上大多数方法不一样，但我用的确实是echarts的源码，下面是代码,适合直接调用json文件的，不是数据写在HTML中的
myChart.on("click", clickFun);
function clickFun(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
alert(param.name);
}
}下面是完整的代码
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="/public/echarts.js"></script>
<script type="text/javascript" src="/public/jquery-3.3.1.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.get('/public/tree.json', function (data) {
myChart.on("click", clickFun);
myChart.hideLoading();
myChart.setOption(
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series:[
{
name:'树图',
type: 'tree',
data: [data],
left: '2%',
right: '2%',
top: '12%',
bottom: '20%',
symbol: 'emptyCircle',
orient: 'vertical',
expandAndCollapse: true,
label: {
normal: {
position: 'top',
rotate: -90,
verticalAlign: 'middle',
align: 'right',
fontSize: 12
}
},
leaves: {
label: {
normal: {
position: 'bottom',
rotate: -90,
verticalAlign: 'middle',
align: 'left'
}
}
},
animationDurationUpdate: 750
}
]
});
});
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//关键点！
function clickFun(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
alert(param.name);
}
}
</script>
</body>
</html>