echarts 树图滚轮放大缩小文字

放大缩小代码

• 使用getZr()注册和取消mousewheel事件

• 字体大小设置放在 textStyle 里面

this.myChart.getZr().off("mousewheel")
this.myChart.getZr().on("mousewheel", (param) => {
    let currentOption = this.myChart.getOption();
    if (currentOption.series[0]) {
        let zoom = currentOption.series[0].zoom;
        currentOption.textStyle.fontSize = 10 * zoom
        currentOption.series[0].label.width = 150 * zoom
        option && this.myChart.setOption(currentOption);
    }
});

整体方法代码

initTree() {
            const echartDom = this.$refs.myEchartsRef;
            this.myChart = this.$echarts.init(echartDom);
            this.myChart.clear()
            const option = {
                color: "#ff0000",
                textStyle: {
                    fontSize: 10
                },
                series: [
                    {
                        type: "tree",
                        orient: "LR", //竖向或水平   TB代表竖向  LR代表水平
                        edgeShape: "polyline", //控制折线的形式
                        id: 0,
                        name: "tree1",
                        data: this.verticalTreeData,
                        top: 0,
                        left: "20%",
                        right: "20%",
                        bottom: 0,
                        symbolSize: 7,
                        edgeForkPosition: "63%",
                        initialTreeDepth: 3,
                        position: "left",
                        roam: true,
                        lineStyle: {
                            width: 1,
                            color: "#3a74ca",
                        },
                        scaleLimit: {
                            min: 1,
                            max: 5
                        },
                        label: {
                            color: "#ffffff",
                            align: "center",
                            borderRadius: 5,
                            width: 150,
                            padding: [5, 0, 0, 0],
                            backgroundColor: "#2a61b3",
                            rich: {
                                oneBox: {
                                    // fontSize: 12,
                                    borderRadius: 5,
                                    fontWeight: "bold",
                                },
                                twoBox: {
                                    // fontSize: 12,
                                    borderRadius: 5,
                                    fontWeight: "bold",
                                },
                                threeBox: {
                                    // fontSize: 12,
                                    borderRadius: 5,
                                    fontWeight: "bold",
                                },
                                bottomBox: {
                                    // fontSize: 12,
                                    color: "#9eb5d8",
                                    padding: 2,
                                    borderRadius: [0, 0, 5, 5],
                                },
                            },
                            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",
                            },
                        },
                        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();
                if (currentOption.series[0]) {
                    let zoom = currentOption.series[0].zoom;
                    currentOption.textStyle.fontSize = 10 * zoom
                    currentOption.series[0].label.width = 150 * zoom
                    option && this.myChart.setOption(currentOption);
                }
            });
        },

• 传送门：