echarts的树形结构图及参数
官⽹代码：
myChart.showLoading(); //显⽰Loading标志；
var myChart = echarts.ElementById('页⾯中div的id'));
$.get('data/asset/data/flare.json', function (data) {
myChart.hideLoading(); //得到数据后隐藏Loading标志
echarts.util.each(data.children, function (datum, index) {
index % 2 === 0 && (llapsed = true);
});    //间隔展开⼦数据，animate，display，physics，scale，vis是展开的
myChart.setOption(option = {
tooltip: { //提⽰框组件
trigger: 'item', //触发类型，默认：item（数据项图形触发，主要在散点图，饼图等⽆类⽬轴的图表中使⽤）。可选：'axis'：坐标轴触发，主要在柱状图，折线图等会使⽤类⽬轴的图表中使⽤。'none'：什么都不触发。
triggerOn: 'mousemove' //提⽰框触发的条件，默认mousemove|click（⿏标点击和移动时触发）。可选mousemove：⿏标移动时，click：⿏标点击时，none：
},
series: [ //系列列表
{
type: 'tree', //树形结构
data: [data], //上⾯从flare.json中得到的数据
top: '1%', //距离上
left: '7%', //左
bottom: '1%', //下
right: '20%', //右的距离
symbolSize: 7, //标记的⼤⼩，就是那个⼩圆圈，默认7
label: { //每个节点所对应的标签的样式
normal: {
position: 'left', //标签的位置
verticalAlign: 'middle',//⽂字垂直对齐⽅式，默认⾃动。可选：top，middle，bottom
align: 'right', //⽂字⽔平对齐⽅式，默认⾃动。可选：top，center，bottom
setoptionfontSize: 9 //标签⽂字⼤⼩
}
},
leaves: { //叶⼦节点的特殊配置，如上⾯的树图⽰例中，叶⼦节点和⾮叶⼦节点的标签位置不同
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
expandAndCollapse: true, //⼦树折叠和展开的交互，默认打开
animationDuration: 550, //初始动画的时长，⽀持回调函数，默认1000
animationDurationUpdate: 750//数据更新动画的时长，默认300
}
]
});
});
可以看到每⼀层都是以name，children的形式
附上⼀段我⾃⼰写的代码得到的结果，数据少⼀点看起来更清晰：
⾃⼰写来⽤的js代码，该树状图垂直模式：
myChart.setOption(option = {
tooltip: {
// show：'true',//默认：true；是否显⽰提⽰框组件，包括提⽰框浮层和 axisPointer。
trigger: 'item',//默认：item；触发类型。item：数据项图形触发，主要在散点图，饼图等⽆类⽬轴的图表中使⽤。'axis'：坐标轴触发，主要在柱状图，折线图等会使⽤类⽬轴的图表中使⽤。'none'：什么都不触发。
triggerOn: 'mousemove'
},
series:[
{
type: 'tree',
data: [data],
left: '2%',
right: '2%',
top: '15%',
bottom: '10%',
symbol: 'emptyCircle',
orient: 'vertical',
expandAndCollapse: true,//默认：true；⼦树折叠和展开的交互，默认打开。
initialTreeDepth:2,//默认：2，树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层，...，直到叶⼦节点
label: {
normal: {
position: 'top',//标签的位置。
rotate: -90,//标签旋转。从 -90 度到 90 度。正值是逆时针。
verticalAlign: 'middle',//⽂字垂直对齐⽅式，默认⾃动。
align: 'right',//⽂字⽔平对齐⽅式，默认⾃动。
fontSize: 12,//⽂字的字体⼤⼩
}
},
leaves: {
label: {
normal: {
position: 'bottom',
rotate: -90,
verticalAlign: 'middle',
align: 'left',
fontSize: 8,//⽂字的字体⼤⼩
}
}
},
animationDurationUpdate: 750
}
]
});
再列出⼀些我觉得可能会⽤到的参数，⽅便以后使⽤：
series（系列列表）
1，layout：树图的布局，有正交和径向两种（正交就是⽔平或垂直；径向就是以根节点为原点，每⼀层为⼀环）
2，orient：树图中正交布局的⽅向
3，symbol：标记的图形（默认：emptyCricle）
4，initialTreeDepth：树图初始展开的层级（深度）（默认：2）5，itemStyle：树图中每个节点的样式
6，label：每个节点所对应的⽂本标签的样式
7，rich：⾃定义富⽂本样式，在标签中做出⾮常丰富的效果。8，leaves：叶⼦节点的特殊配置
9，emphasis：树图中个图形和标签⾼亮的样式
10，data：数据格式是树状结构
11，lineStyle：定义树图边的样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。