在Echarts中设置Tree的子节点点击事件
今天用echarts做一个树形图，需要在点击某个子节点的时候，能够弹出这个节点的信息或者查询到其他数据，在百度上查了一下，有很多有的方法和我下载的echarts源码都不一样，最后自己试了很久才找到方法，特此写出来，有需要的同学可以参考一下，和网上大多数方法不一样，但我用的确实是echarts的源码，下面是代码,适合直接调用json文件的，不是数据写在HTML中的
|
1 2 3 4 5 6 7 8 9 10 |
myChart.on("click", clickFun); function clickFun(param) { if (typeof param.seriesIndex == 'undefined') { return; } if (param.type == 'click') { alert(param.name); } } |
下面是完整的代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<br /><!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> |