在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图表会自适应调整大小,保持图表的显示效果。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
推荐阅读:vue怎么实现echarts图表自适应