vue中echarts图表大小适应窗口大小且不需要刷新案例

我就废话不多说了，大家还是直接看代码吧~

内容如下：

// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
//根据窗口的大小变动图表 --- 重点
window.onresize = function(){
  myChart.resize();
  //myChart1.resize();  //若有多个图表变动，可多写
 
}

代码如下：

mounted() {
  
 const that = this
   window.onresize = () => {// 根据窗口大小调整曲线大小
   let myChart = this.$echarts.init(document.getElementById('myChart'));
    myChart.resize();
   }
 },

补充知识：如何解决Vue项目中使用echarts，宽度变化导致图不能resize问题

情景：

开发PC端管理系统，项目左侧目录可收缩，右侧是对应的页面，右侧页面里面包含了echarts开发的几个折线图，如图：

这样就能解决 echarts 折线图，宽度变化 ，导致的图不能resize问题咯~~~

以上这篇vue中echarts图表大小适应窗口大小且不需要刷新案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。