1 事件：事件綁定，事件命名統一掛載到require(‘echarts/config‘).EVENT（非模塊化為echarts.config.EVENT）命名空間下，建議使用此命名空間作為事件名引用，當前版本支持事件有：
-----------------------基礎事件-----------------------
REFRESH（刷新），
RESTORE（還原），
RESIZE（顯示空間變化），
CLICK（點擊），
DBLCLICK（雙擊），
HOVER（懸浮），
MOUSEOUT（鼠標離開數據圖形），
2.添加節點

param.data.children.push({
name: ‘500‘, // {name: ‘標註1‘, value: 100, x: 50, y: 20},
value: 4,
nodeType: thisTreeType,
id: new Date().getTime().toString(), //自定義屬性
symbol: ‘rectangle‘, //
color: ["red"], //填充色transparent
itemStyle: {
normal: {
color: ["#20B2AA"], //新增節點的填充樣式
label: { //標簽
show: true,
hoverLink: false,
interval: ‘auto‘,
position: ‘inside‘, //標簽的位置
rotate: 0,
formatter: null,
textStyle: {
color: ‘white‘,
fontSize: 16,
align: "left",
baseline: "bottom"
},
}
}
},
symbolSize: [120, 40],
children: []
})
myChart.refresh()

3.獲取數據

myChart.chart.tree.series[0].data

4.例子

var myChart, option;

//加載樹

// 路徑配置
/* require.config({
paths: {
echarts: ‘http://echarts.baidu.com/build/dist‘
}
});*/
require.config({
paths: { //文件路徑
echarts: ‘./echarts/configChart‘
}

});

// Step:4 require echarts and use it in the callback.
// Step:4 動態加載echarts然後在回調函數中開始使用，註意保持按需加載結構定義圖表路徑
require( //所需js
[
‘echarts‘,
‘echarts/chart/tree‘,
],
function(ec) {
// 基於準備好的dom，初始化echarts圖表
myChart = ec.init(document.getElementById(‘main_orgStructure‘));
var commonStyle = {}
option = {
title: {
text: ‘SCADA‘
},
tooltip: {
show: false,
formatter: function(params) { //自定義提示信息
return params.name
}
},
color: [ //節點填充色
"#20B2AA"
],
toolbox: {
show: false,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: false,
series: [{
name: ‘樹圖‘,
type: ‘tree‘,
orient: ‘vertical‘, // vertical horizontal radial//樹的方向
rootLocation: {
x: ‘50%‘,
y: ‘50%‘
}, // 根節點位置 {x: ‘center‘,y: 10}
nodePadding: 20, //節點間距
layerPadding: 60, //層間距
symbol: ‘circle‘,
roam: true, //可以用鼠標縮放 拖動
//direction: ‘inverse‘, //樹反轉
itemStyle: {
normal: {
color: ‘#20B2AA‘, //節點背景色
label: {
show: true,
position: ‘inside‘,
textStyle: {
color: ‘#20B2AA‘,
fontSize: 15,
align: "left"
//fontWeight: ‘bolder‘
}
},
lineStyle: {
color: ‘#DB7093‘,
width: 1,
type: ‘broken‘, // ‘curve‘|‘broken‘|‘solid‘|‘dotted‘|‘dashed‘

}
},
emphasis: {
label: {
show: false
}
}
},
data: thisDataArr
}]
};

echarts 樹圖