Vue项目下使用echarts遇到的图表大小不随页面自适应问题

问题：在页面大小改变时，echarts图表不随页面的大小而改变，还是最开始的样式，我们需要在页面进行大小改变的时候让echarts图表的大小也跟着修改

1、同一个vue组件下只有一个echarts图表

• 只需在mounted加一行代码即可

window.onresize =  myChart.resize;

其中myChart是绑定的图表，代码如下：

...
import echarts from "echarts";
...
var myChart = echarts.init(document.getElementById("myChart"));

2、同一个vue组件下有多个echarts图表

• 1、在mounted中监听页面大小

window.addEventListener('resize',this.resizeEcharts)

• 2、在data中定义timer

data(){
    return {
        timer:null
    }
}

• 3、写方法

mothods:{
    resizeEcharts(){
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{
            this.echarts1.resize()
            this.echarts1.resize()
        },200)
    }
}

最后

• 如果遇到什么问题就留言吧，能解决大家一起解决一下
• 要您觉得有用，就点赞收藏鼓励一下把
• 文章是自己手敲，是对工作日常的总结，如有错误之处，敬请指正