echarts tree类型树,判断此节点是否可以继续展开
程序员文章站
2024-03-19 23:15:10
...
echarts tree类型树,判断此节点是否可以继续展开
实现效果:子节点和父节点交互展开效果
实现重点代码:
// 当此节点下还有子节点时候,设置的节点样式,用于区别 没有子节点的节点的样式
itemStyle: {
normal: {
color: '#b22125'
},
emphasis: {
borderColor: '#ccc'
}
},
代码:可以放在点击这里直接运行此代码
myChart.showLoading();
$.get(ROOT_PATH + 'data/asset/data/flare.json', function (data) {
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',
data: [data],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 7,
// 当此节点下还有子节点时候,设置的节点样式,用于区别 没有子节点的节点的样式
itemStyle: {
normal: {
color: '#b22125'
},
emphasis: {
borderColor: '#ccc'
}
},
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
});