vue2+echart 树状图节点密集，可滚动鼠标缩放， 尺寸根据节点调整

vue2+echart 树状图节点密集，可滚动鼠标缩放， 尺寸根据节点调整

<template>
    <div ref="chart" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            const chart = echarts.init(this.$refs.chart);
            const option = {
                series: [
                    {
                        type: 'tree',
                        orient: "TB", //竖向或水平   TB代表竖向  LR代表水平
                        edgeShape: 'polyline', //设置直线
                        symbolSize: 10, // 调整节点大小
                        layout: 'orthogonal', // 设置布局为直角坐标系
                        roam: true, // 开启漫游
                        emphasis: {
                            focus: 'descendant'
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750,
                        data: [
                            {
                                name: '根节点',
                                children: [
                                    {
                                        name: '子节点1', children: [
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                            { name: '子节点1' },
                                            { name: '子节点2' },
                                        ]
                                    },
                                    { name: '子节点2' }
                                ]
                            }
                        ],
                        // 其他配置...
                    }
                ]
            };

            chart.setOption(option);

            chart.on('click', (params) => {
                if (params.dataType === 'node') {
                    // 取消之前高亮的节点
                    chart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: this.currentIndex
                    });

                    // 高亮当前点击的节点
                    this.currentIndex = params.dataIndex;
                    chart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: this.currentIndex
                    });
                }
            });

            // 保存echarts实例
            this.chart = chart;
        }
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose(); // 清理chart实例
        }
    }
};
</script>