vue 中使用 echarts 自适应问题

echarts 自带的自适应方法  resize()

具体用法：

let xxEcharts = this.$echarts.init(document.getElementById('xxx'))

xxEcharts.setOption(xxxx)  // 参数是 echarts 的option对象

window.onresize = xxEcharts.resize

 

可是，问题来了，同一个页面使用多个echarts 的时候，window.onresize = xxEcharts.resize  只对最后一个echarts有效果

这时候换种写法

window.onresize = function(){

　　xxBarChart.resize()

　　xxxBarChart.resize()

　　xxChart.resize()

　　xxxChart.resize()

}

好了，如今全部的 echarts均可以自适应了，

然而，还没完，仍是会出现各类问题，致使自适应出问题，如今咱们想一想，如何手动触发 resize

首先，确定要把 echarts变量全局化。

我如今 vue的data中设置 xxEcharts : this.$echarts.init(document.getElementById('xxx'))

然而报错，没办法，

再试试在计算函数中声明   

computed:{

　　xxBarChart(){

　　　　return this.$echarts.init(document.getElementById('myChart_ln'))

　　}

}

再试试，居然能够了，虽然不知道原理，可是如今咱们能够手动调起  this.xxBarChart.resize()了

/////////////////////////////////////////////////////////////////////  我是华丽丽的分割线  ////////////////////////////////////////////////////////////////////////////////////////////////////

第二天新加内容：

不知道昨天为啥能够了，今天在使用的时候，华丽丽的报错了，错误很简单，  

在使用 window.onresize = function(){ this.xxcharts.resize() }

的时候，this指向了event对象或者window对象，而不是咱们的 vue对象

 

此时，要改变当前方法的做用域，我第一想到的是call和bind，未试

 

我使用了另一种方法，我在 data 中定义一个属性，叫windowSize，在 methods 中定义了一个方法 windowSizeChange,在windowSizeChange中 ,设置 windowSize 的值，而后在 watch 中 监测 windowSize 并 执行 this.xxcharts.resize()的操做。通过测试，能够解决问题，

 

然而以上仍然没法解决，echarts在子组件中且在同一个页面被调用屡次的时候，没法自适应的问题

解决办法大概是，使用 全局状态监测，好比 使用 vuex，，在 app.vue中 使用 window.resize ，整个项目只使用一次，作监测，大体是这个思路。