问题：页面的echart图表在浏览器缩放屏幕比例时无法随着屏幕的比例自动改变大小
解决方式：
可以通过监听窗口的 resize 事件，并在事件回调函数中重新调整图表的大小。
<template>
<div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'MyComponent',
data() {
return {
chart: null,
};
},
mounted() {
//初始化图表
this.initChart();
//监听窗口的 resize 事件，并在事件回调函数中重新调整图表的大小。
window.addEventListener('resize', this.resizeChart);
},
beforeDestroy() {
//销毁
window.removeEventListener('resize', this.resizeChart);
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chartContainer);
// 设置图表配置项和数据...
},
resizeChart() {
//判断图例是否存在
if (this.chart) {
//图例存在调用图表的重置
this.chart.resize();
}
},
},
};
</script>