var data ={
"name": "flare",
{
"name": "flex",
},
{
"name": "scale",
},
{
"name": "display",
}
]
};
var myChart = echarts.init(document.getElementById('test'))
myChart.showLoading();
myChart.hideLoading();
echarts.util.each(data.children, function (datum, index) {
index % 2 === 0 && (datum.collapsed = true);
});
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
symbol:'rect',
data: [data],
top: '1%',
left: '70%',
bottom: '1%',
right: '40%',
symbolSize:7,
lineStyle:{
curveness:1
},
itemStyle:{
borderColor:'#fff',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fff' // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
},
label: {
normal: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
borderWidth:2,
borderColor:'#000',
padding: [10, 80],
fontSize: 15
}
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
//html
<div id="test" style="width:1000px;height:700px;"></div>
复制代码