Echarts图表的使用以及如何适应屏幕变化

我在使用echarts时没有使用按需引入的方式，而是全部引入并且挂载到了Vue全局组件中，在main.js中

// 引入Echarts
import ECharts from 'vue-echarts'
import "echarts";
Vue.component("v-chart", ECharts);

然后直接在页面上使用

   
14 日销售折线图(单位：件)
   

 我们在使用echarts的时候往往要考虑适配问题，在阅读echarts的官方文档时，可以看到，有一个方法叫做resize

那我们如何去使用这个方法呢

首先在methods中定义一个方法，通过ref获取页面上的echarts实例，直接调用方法

getresize(){
    this.$refs.chart1.resize()
},

那么什么时候去调用呢，就是当窗口大小发生改变时，在mounted生命周期添加监听页面窗口大小的方法

mounted() {
   window.addEventListener("resize",this.getresize);
},

这样就可以实现适配了，但是有一个问题会出现，那就是你跳转到其他页面时，监听事件并没有被销毁，但echarts实例已经被销毁了，导致找不到resize的报错，所以这个时候就需在beforeDestroy生命周期清楚监听事件

 beforeDestroy() {
    // 页面销毁时销毁监听事件
    window.removeEventListener('resize',this.getresize)
},

整体代码：