html树状图怎么搜索节点,echarts2.* tree树形图节点点击事件和节点点击图标更改...

做项目用到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，否则不起作用

}

以下是完整代码，里面有备注：html>

echarts demo

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，否则不起作用

}

上面是我项目实现截图，截图软件有点搓，部分线条没了。上面实现的是hover 和click时换成苹果图标。(目前已经去掉hover事件了，原因见下方)

注意：对于chart.refresh()操作尽量不要在hover和mouseout事件里用！否则会导致不停的刷新(只要鼠标在图标上稍微动一下会不断的触发hover)，会有一种卡顿的感觉，而且会导致tooltip不能及时出现或被卡在一个节点不消失。(本想设置在同一节点hover没有mouseout之前只触发一次，但是很奇怪第一次hover时鼠标没有离开节点也会触发mouseout一次，比较难控制)。