echarts 树图

Posted Wowo丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts 树图相关的知识,希望对你有一定的参考价值。

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 树图的主要内容,如果未能解决你的问题,请参考以下文章

echarts 树图问题

echarts的矩形树图怎么设置最小大小

Echarts - 树图实现四个层级

python pyecharts绘制矩形树图Treemap

关于echarts 径向树状图

echarts2.*版本tree树图点击节点加载数据(或点击节点收缩)实现参考