在Vue中使用ECharts圖表時，可以通過監聽窗口大小變化，動態調整圖表的大小以實現自適應。具體步驟如下：
import echarts from 'echarts'
export default {
data() {
return {
chart: null
}
},
mounted() {
this.chart = echarts.init(this.$refs.chart)
// 初始化圖表
this.chart.setOption({...})
// 監聽窗口大小變化
window.addEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
this.chart.resize()
}
},
beforeDestroy() {
// 在組件銷毀前移除resize事件監聽
window.removeEventListener('resize', this.handleResize)
}
}
ref引用該容器。<template>
<div ref="chart" style="width: 100%; height: 400px;"></div>
</template>
這樣就可以實現當窗口大小變化時，ECharts圖表會自適應調整大小，保持圖表的顯示效果。
