Vue+Echarts 大屏开发遇到的问题

Vue 中使用Echarts 其实很简单，粘就完了


echarts 和axios 使用


问题一：点击图标全屏展示，并且切换图标
一：下载引入screenfull 插件

npm install screenfull --save

//在调用全屏功能的组件中引入
import screenfull from 'screenfull'  

布局如下

定义窗口事件



二：echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）
使用一个window.onresize 时，可以使用，引入第三个问题

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//根据窗口的大小变动图表 --- 重点
window.onresize = function(){
    myChart.resize();
    //myChart1.resize();    //若有多个图表变动，可多写

}

三：在vue开发中，因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。
找了下解决方案，可以采用下面的方式写就可以了。

window.onresize = () => {this.measure()}
window.addEventListener('resize',() => this.measure1(), false)
window.addEventListener('resize',() => this.measure2(), false)
销毁可以采用下面的方式

beforeDestroy () {
  window.removeEventListener('resize', this.measure1(), false)
}
beforeDestroy () {
  window.onresize = null
}

参考地址：https://blog.csdn.net/asm35548/article/details/101797302