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',
1,
type: 'broken', // 'curve'|'broken'|'solid'|'dotted'|'dashed'

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

//縮放等級

var zr = myChart.getZrender();
zr.painter._layers[1].scale = [1, 1, 0, 0]; //前兩個為縮放大小，后兩個為縮放原點

/////所有的數據

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

、、設置中心點（根節點）

zr.painter._layers[1].position = [10, 10]; //重新定位中心點（根節點）

、、計算樹圖的寬度

function getTreeWidth(zr) {
var nodes = zr.storage._roots;
var max = 0;
var min = 0;
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].type == 'image' || nodes[i].type == 'icon') {
var nodeX = nodes[i].style.x;
if(nodeX > max) {
max = nodeX;
rightNode = nodes[i];
continue;
}
if(nodeX < min) {
min = nodeX;
}
}
}
return max - min;
}

注：原文地址http://www.jianshu.com/p/1393c3ab7444

總結

以上是生活随笔為你收集整理的echarts 树图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。