Vue使用Echarts统计图随浏览器窗口变化大小

• 在 Vue 中使用 echarts 时，可以在 mounted 钩子函数中初始化 echarts 实例，并在 window 的 resize 事件中调用 echarts 实例的 resize 方法来重新渲染图表。具体实现如下

1. 在 mounted 钩子函数中初始化 echarts 实例，并将图表渲染到指定的元素中。

mounted() {
    this.chart = echarts.init(document.getElementById("chart"))
    this.chart.setOption(this.options)
}

2. 为 window 绑定 resize 事件，并在事件处理函数中调用 echarts 实例的 resize 方法。

mounted() {
    this.chart = echarts.init(document.getElementById("chart"))
    this.chart.setOption(this.options)
    window.addEventListener("resize", this.onResize)
},
methods: {
    onResize() {
        this.chart.resize()
    }
}

3. 注意：如果在组件销毁时需要清除事件监听，可以在 beforeDestroy 钩子函数中调用 window.removeEventListener 方法

beforeDestroy() {
    window.removeEventListener("resize", this.onResize)
}