vue2 + echats树状图 点击按钮 展开所有节点/收起所有节点
<template>
<div>
<button @click="expandAll(isExpanded)">
{{ isExpanded ? '一键收起' : '一键展开' }}
</button>
<div ref="echartsTree" style="width: 600px; height: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
isExpanded: true,
myChart: null,
option: {}
};
},
methods: {
getList() {
this.option = {
series: [
{
type: 'tree',
data: [
{
name: 'root',
children: [
{ name: 'child1' },
{ name: 'child2', children: [{ name: 'grandchild1' }] }
]
}
],
expandAndCollapse: true
}
]
}
},
expandAll(e) {
if (e == false) {
this.handleClose();
this.isExpanded = !e;
} else {
this.option.series = {
type: 'tree',
data: [{
name: 'root'
}]
}
this.myChart.setOption(this.option);
this.isExpanded = !e;
}
},
handleClose() {
this.getList();
this.myChart.setOption(this.option);
},
initChart() {
this.myChart = echarts.init(this.$refs.echartsTree);
this.myChart.setOption(this.option);
}
},
mounted() {
this.getList();
this.$nextTick(() => {
this.initChart()
})
}
};
</script>