<<博客遷移，原文來自我的51cto博客http://11095961.blog.51cto.com/11085961/1954277>>
? ? ? 自上一篇說明的點擊節(jié)點更換節(jié)點圖標后糕档，發(fā)現(xiàn)網(wǎng)上有許多關于點擊節(jié)點加載數(shù)據(jù)（或點擊收縮節(jié)點）的問題宴胧，一直沒看到滿意的解答』锱校現(xiàn)在在上一篇的基礎上做出如下實現(xiàn)：點擊節(jié)點動態(tài)加載/收縮子節(jié)點。
先說關鍵點瞧掺，還是注冊在事件的處理函數(shù)：
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案训，點擊加載一個節(jié)點
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，否則不起作用
}
//關鍵點孔飒！
//顯示的圖片是否有子節(jié)點以及是否收縮了建議用不同的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)];?//加載數(shù)據(jù)灌闺，此處用測試數(shù)據(jù)
}
}?else?{
console.log('close');
param.data.children_bak?=?param.data.children;
param.data.children?=?[];?//root節(jié)點會在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目錄下
