标签：滚轮 data myChart 树图 fontSize series option2 echarts zoom

放大缩小代码

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

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

整体方法代码

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],
                            fontSize: 12,
                            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 option2 = this.myChart.getOption();
                if (option2.series[0]) {
                    let zoom = option2.series[0].zoom;
                    option2.textStyle.fontSize = 10 * zoom
                    option2.series[0].label.width = 150 * zoom
                    option && this.myChart.setOption(option2);
                }
            });
        },

• 传送门：

标签：滚轮,data,myChart,树图,fontSize,series,option2,echarts,zoom
来源： https://www.cnblogs.com/DL-CODER/p/16478041.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。