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 ，整个项目只使用一次，做监测，大致是这个思路。