Echarts 设置缩放功能后，最小化后，图形乱动

• 给 servies 设置 center 中心点，缩放事件监听，判断最小的时候，给他设置中心点，放大的时候，自动获取中心点

中心点代码

// echarts设备树形结构
initTree() {
    const echartDom = this.$refs.myEchartsRef;
    this.myChart = this.$echarts.init(echartDom);
    this.myChart.clear()
    const option = {
        series: [
            {
                id: 0,
                center: ['50%', '50%'], // 设置中心点
                roam: true,
                scaleLimit: {
                    min: 1,
                    max: 5
                },
            },
        ],
    };
    this.myChart.resize();
    option && this.myChart.setOption(option, true);
    this.myChart.getZr().off("mousewheel")
    this.myChart.getZr().on("mousewheel", (param) => {
        let currentOption = this.myChart.getOption();
        let zoom = currentOption.series[0].zoom;
        if (currentOption.series[0]) {
            if (zoom === 1) {
                currentOption.series[0].center = ['50%', '50%']
            } else {
                currentOption.series[0].center = null
            }
            option && this.myChart.setOption(currentOption);
        }
    });
},

全部代码

        // echarts设备树形结构
        initTree() {
            const echartDom = this.$refs.myEchartsRef;
            this.myChart = this.$echarts.init(echartDom);
            this.myChart.clear()
            const option = {
                color: "#ff0000",
                textStyle: {
                    fontSize: 12
                },
                series: [
                    {
                        type: "tree",
                        orient: "LR", //竖向或水平   TB代表竖向  LR代表水平
                        edgeShape: "polyline", //控制折线的形式
                        center: ['50%', '50%'],
                        id: 0,
                        name: "tree1",
                        data: this.verticalTreeData,
                        top: 0,
                        left: "12%",
                        right: "12%",
                        bottom: 0,
                        symbolSize: 7,
                        edgeForkPosition: "63%",
                        initialTreeDepth: 3,
                        position: "left",
                        roam: true,
                        lineStyle: {
                            width: 1,
                            color: "#3a74ca",
                        },
                        scaleLimit: {
                            min: 1,
                            max: 5
                        },
                        layoutCenter: ['50%', '50%'],
                        label: {
                            // color: "#ffffff",
                            align: "center",
                            borderRadius: 5,
                            width: 140,
                            padding: [5, 0, 0, 0],
                            backgroundColor: "#e4ebff",
                            borderColor: '#bbbbbb',
                            borderWidth: '1',
                            borderType: 'solid',
                            rich: {
                                oneBox: {
                                    // fontSize: 12,
                                    borderRadius: 5,
                                    fontWeight: "bold",
                                    padding: [3, 0, 0, 0],
                                    color: '#4169e1',
                                },
                                twoBox: {
                                    // fontSize: 12,
                                    borderRadius: 5,
                                    fontWeight: "bold",
                                    padding: [3, 0, 0, 0],
                                    color: '#4169e1'
                                },
                                threeBox: {
                                    // fontSize: 12,
                                    borderRadius: 5,
                                    padding: [3, 0, 0, 0],
                                    fontWeight: "bold",
                                    color: '#4169e1'
                                },
                                bottomBox: {
                                    // fontSize: 12,
                                    color: "#9eb5d8",
                                    padding: [5, 0, 3, 0],
                                    borderRadius: [0, 0, 5, 5],
                                    color: '#FF9200'
                                },
                            },
                            formatter: function (param) {
                                const { data } = param;
                                let res = "";
                                switch (data.state) {
                                    case 1:
                                        res += `{oneBox|${data.equipmentName + "\n"}} {bottomBox| ${data.description
                                            }} `;
                                        break;
                                    case 2:
                                        res += `{twoBox|${data.equipmentName + "\n"}} {bottomBox| ${data.description
                                            }} `;
                                        break;
                                    case 3:
                                        res += `{threeBox|${data.equipmentName + "\n"
                                            }} {bottomBox| ${data.description}} `;
                                        break;
                                    default:
                                        res += `{threeBox|${data.equipmentName + "\n"
                                            }} {bottomBox| ${data.description}} `;
                                        break;
                                }
                                return res;
                            },
                        },
                        leaves: {
                            label: {
                                position: "right",
                                verticalAlign: "middle",
                                // fontSize: 10,
                                // lineHeight: 40,
                                align: "center",
                            },
                        },
                        lineStyle: {
                            color: '#4169e1'
                        },
                        expandAndCollapse: false,
                        animationDuration: 550,
                        animationDurationUpdate: 750,
                    },
                ],
            };
            this.myChart.resize();
            option && this.myChart.setOption(option, true);
            this.myChart.getZr().off("mousewheel")
            this.myChart.getZr().on("mousewheel", (param) => {
                let currentOption = this.myChart.getOption();
                let zoom = currentOption.series[0].zoom;
                console.log(currentOption, 'currentOption.series[0]');
                if (currentOption.series[0]) {
                    currentOption.textStyle.fontSize = 12 * zoom
                    currentOption.series[0].label.width = 140 * zoom
                    if (zoom === 1) {
                        currentOption.series[0].center = ['50%', '50%']
                    } else {
                        currentOption.series[0].center = null
                    }
                    option && this.myChart.setOption(currentOption);
                }
            });
        },