echarts 2.*版本tree树图点击节点加载子节点/数据（

<<博客迁移，原文来自我的51cto博客http://11095961.blog.51cto.com/11085961/1954277>>

      自上一篇说明的点击节点更换节点图标后，发现网上有许多关于点击节点加载数据（或点击收缩节点）的问题，一直没看到满意的解答。现在在上一篇的基础上做出如下实现：点击节点动态加载/收缩子节点。

先说关键点，还是注册在事件的处理函数：

var mockData1 = {"name":"小米11","symbol":"circle","cusField":"product","itemStyle":{"normal":{"label":{"show":true,"position":"right"}}}};

var mockData2 = {"name":"小米22","symbol":"circle","cusField":"product","itemStyle":{"normal":{"label":{"show":true,"position":"right"}}}};

//简单使用1，点击加载一个节点

function clickFun(param) {

console.log(JSON.stringify(param));

if(param.data.children)

param.data.children.push(mockData1);

else

param.data.children = [deepCopy(mockData1),deepCopy(mockData2)];

// console.log(param);

chart.refresh(); //一定要refresh，否则不起作用

}

//关键点！

//显示的图片是否有子节点以及是否收缩了建议用不同的symbol图片（不直接使用的图片预加载过来）

function clickFun2(param) {

// console.log(JSON.stringify(param));

if(!(param.data.children && param.data.children.length > 0)) {

console.log('open');

if(param.data.children_bak) {

param.data.children = param.data.children_bak;

}

else {

param.data.children = [deepCopy(mockData1),deepCopy(mockData2)]; //加载数据，此处用测试数据

}

} else {

console.log('close');

param.data.children_bak = param.data.children;

param.data.children = []; //root节点会在refresh时读children的length

}

console.log(param);

chart.refresh(); //一定要refresh，否则不起作用

}

function deepCopy(p, c) {

var c = c || {};

for (var i in p) {

if (typeof p[i] === 'object') {

c[i] = (p[i].constructor === Array) ? [] : {};

deepCopy(p[i], c[i]);

} else {

c[i] = p[i];

}

}

return c;

}

效果图：

完整源码：https://github.com/hzhqk/echarts.git 下 dynamic echarts tree/load sub-nodes dynamicly目录下