可以在Vue组件的mounted钩子函数中监听窗口大小改变事件,重新设置图表的宽高来实现自适应。具体代码如下:xmlCopy
<template>
<div class="chart-container" ref="chart"></div>
</template>
<script>
import echarts from 'echarts'
export default {
mounted() {
this.initChart()
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
initChart() {
this.myChart = echarts.init(this.$refs.chart)
this.myChart.setOption({
// 设置图表配置项
})
this.handleResize()
},
handleResize() {
this.myChart.resize()
}
}
}
</script>
<style>
.chart-container {
width: 100%;
height: 100%;
}
</style>