做项目用到echarts2.2.7版本做树图,遇到点击树图节点“更改样式”(并不能更改样式,只能换图标/图片),百度、谷歌搜索后均没找到解决方案。后来苦苦探索,终于找到解决入口,特地分享给大家以供参考,吐槽一下echarts的api真的没有highcharts人性化和易找。
//贴出关键点! function clickFun(param) { console.log(param); param.data.symbol = 'p_w_picpath://http://www.viastreaming.com/p_w_picpaths/apple_logo2.png'; //远程加载图片最好先预加载过来,避免下载图标延迟。 /**var oImg = new Image();oImg.src = img;**/ 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: 'p_w_picpath://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: 'p_w_picpath://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: 'p_w_picpath://http://www.viastreaming.com/p_w_picpaths/apple_logo2.png', symbolSize: [60, 60], cusField: 'product', itemStyle: { normal: { label: { show: false } } }, value: 4 } ] }] }] }; //关键点! function clickFun(param) { console.log(param); param.data.symbol = 'p_w_picpath://http://www.viastreaming.com/p_w_picpaths/apple_logo2.png'; //远程加载图片最好先预加载过来,避免下载图标延迟。 var oImg = new Image();oImg.src = img; console.log(param.data.cusField); chart.refresh(); //一定要refresh,否则不起作用 } </script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div> </body> </html>
上面是我项目实现截图,截图软件有点搓,部分线条没了。上面实现的是hover 和click时换成苹果图标。(目前已经去掉hover事件了,原因见下方)
注意:对于chart.refresh()操作尽量不要在hover和mouseout事件里用!否则会导致不停的刷新(只要鼠标在图标上稍微动一下会不断的触发hover),会有一种卡顿的感觉,而且会导致tooltip不能及时出现或被卡在一个节点不消失。(本想设置在同一节点hover没有mouseout之前只触发一次,但是很奇怪第一次hover时鼠标没有离开节点也会触发mouseout一次,比较难控制)。