echarts不会根据页面窗口变化而调整图表的大小,在当前页面的 script 中加入这一段可辅助当前页面刷新
data: {
return {
screenWidth: document.body.clientWidth, // 屏幕宽度
timer: false
}
},
mounted () {
// 监听窗口大小
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth
})()
}
},
watch: {
screenWidth (val) {
// 为了避免频繁触发resize函数导致页面卡顿,使用定时器
if (!this.timer) {
// 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function () {
that.getECharts() // 操作
that.timer = false
}, 400)
}
}
},
methods: {
getECharts () {
var myChart = echarts.init(chartDom);
......
myChart.resize() // 刷新
}
}