echarts 树图

Posted 2020-10-07 Wowo丶

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
}]
};