echarts2.* tree樹形圖節點點擊事件和節點點擊圖標更改
阿新 • • 發佈:2017-07-26
tree echarts 點擊事件
做項目用到echarts2.2.7版本做樹圖,遇到點擊樹圖節點更改樣式,百度、谷歌搜索後均沒找到解決方案。後來苦苦探索,終於找到解決入口,特地分享給大家以供參考,吐槽一下echarts的api真的沒有highcharts人性化和易找。
//貼出關鍵點! function clickFun(param) { // console.log(param); console.log(param); param.data.symbol = ‘image://http://www.viastreaming.com/images/apple_logo2.png‘; console.log(param.data.cusField); chart.refresh(); //一定要refresh,否則不起作用 }
以下是完整代碼,裏面有備註:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts demo</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> var chart; require.config({ paths: { echarts: ‘http://echarts.baidu.com/build/dist‘ } }); require([‘echarts‘, ‘echarts/chart/tree‘], function(ec) { chart = ec.init($("#main")[0]); chart.setOption(option); var ecConfig = require(‘echarts/config‘); chart.on(ecConfig.EVENT.CLICK, clickFun); //也可以註冊其他時間 hover 、mouseout等 }) var option = { tooltip: { trigger: ‘item‘, formatter: ‘{b}:{c}‘, hideDelay: 0 // chart.refresh();刷新時會維持當時圖表的所有狀態,所以設置隱藏延遲為0,否則在快速選擇另一個節點時(尤其是數據比較多時)導致無法顯示選擇中的tooltip //無法完全避免但是很大減輕了副作用 }, series: [{ name: ‘樹圖‘, type: ‘tree‘, orient: ‘horizontal‘, // vertical horizontal rootLocation: { x: ‘10%‘, y: ‘60%‘ }, // 根節點位置 {x: ‘center‘,y: 10} nodePadding: 20, symbol: ‘circle‘, symbolSize: 40, roam: true, data: [{ name: ‘手機‘, value: 6, symbolSize: [90, 70], cusField: ‘category‘, symbol: ‘image://http://www.iconpng.com/png/ecommerce-business/iphone.png‘, itemStyle: { normal: { label: { show: true, position: ‘right‘, formatter: ‘{b}‘ } } }, children: [{ name: ‘小\n米‘, //由於label的formatter存在bug,所以無法通過html進行格式化,如果要換行要用\n value: 4, symbol: ‘image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg‘, symbolSize: [60, 60], cusField: ‘product‘, children: [{ name: ‘小米11‘, symbol: ‘circle‘, cusField: ‘product‘, //自定義屬性,演示用,實際開發中可以在後臺建模產生series整個data時增加而外屬性以供使用 itemStyle: { normal: { label: { show: true, position: ‘bottom‘, formatter: ‘{b}--->>>‘ } } } }], itemStyle: { normal: { label: { show: true, position: ‘right‘, formatter: ‘{b}--->>>‘ //有bug,formatter不起作用,這個bug看網友求助已經很久了,但是後面更新的版本一直沒有解決 } } } }, { name: ‘蘋果‘, symbol: ‘image://http://www.viastreaming.com/images/apple_logo2.png‘, symbolSize: [60, 60], cusField: ‘product‘, itemStyle: { normal: { label: { show: false } } }, value: 4 } ] }] }] }; //關鍵點! function clickFun(param) { // console.log(param); console.log(param); param.data.symbol = ‘image://http://www.viastreaming.com/images/apple_logo2.png‘; console.log(param.data.cusField); chart.refresh(); //一定要refresh,否則不起作用 } </script> </head> <body> <!-- 為ECharts準備一個具備大小(寬高)的Dom --> <div id="main" style="height:400px"></div> </body> </html>
上面是我項目實現截圖,截圖軟件有點搓,部分線條沒了。上面實現的是hover 和click時換成蘋果圖標。
本文出自 “11085961” 博客,請務必保留此出處http://11095961.blog.51cto.com/11085961/1951206
echarts2.* tree樹形圖節點點擊事件和節點點擊圖標更改