在画图方法里,写window.onresize()没有实现echart图的自适应:
代码是不是这样的?
this.mychart.setOption(option)
var that = this
window.onresize = function() {
that.mychartOpt.resize()
}
无论怎样改变浏览器窗口大小都没用,气急败坏,去看了echarts官网API,发现问题了
注意这个词:容器,意味着你的图表所在容器的大小发生改变时,上面的方法才会生效,OK,让我们来检查一波代码:
由init的DOM可以看到,我画这个图的容器是 id 为 operationRecord 的div,而显而易见这个容器的宽高是我固定好的。
当我的浏览器大小发生变化时,随之一起改变大小的容器是最上面的div,而图表本身容器大小并没有发生变化,所以不会触发.resize()
事件
解决方案:
文档中有可传参数width、height
只要在使用resize时,传入参数就可以解决,代码:
var that = this
window.onresize = function() {
const wid = that.$refs.optPic.offsetWidth - 40 + 'px'
that.mychartOpt.resize({ width: wid })
}
监听窗口变化,页面多个图正确自适应
我的页面如下:
我一开始把 window.onresize 都写在画图的方法里面,但是测试时发现我在改变浏览器大小时鼠标点的最后一个模块 才会发生反应,所以,需要监听一下窗口发生变化的事件:
首先,把window.onresize 写在 mounted 钩子里面:
mounted() {
// 浏览器窗口大小发生变化
const that = this
this.screenWidth = document.body.clientWidth
window.onresize = () => {
return (() => {
that.screenWidth = document.body.clientWidth
})()
}
}
窗口发生变化就会在执行
然后,监听 screenWidth,写方法
watch: {
screenWidth() {
const wid = (this.$refs.optPic.offsetWidth - 40) + 'px'
if (this.mychartOpt) {
this.mychartOpt.resize({ width: wid })
}
if (this.myChartAlarm) {
this.myChartAlarm.resize({ width: wid })
}
if (this.myChartFault) {
this.myChartFault.resize({ width: wid })
}
}
}
至此,完成~