問題:頁面的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>