vue2 + echats树状图 点击按钮 展开所有节点/收起所有节点

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>