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

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

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

然后直接在页面上使用

<div class="echartsLeft-list">
   <div class="chart1-title">14 日销售折线图(单位：件)</div>
   <v-chart class="chart1" :option="option1" ref="chart1" />
</div>

 我们在使用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)
},

整体代码：

<template>
   <div class="echartsLeft-list">
      <div class="chart1-title">14 日销售折线图(单位：件)</div>
       <v-chart class="chart1" :option="option1" ref="chart1" />
   </div>
</template>

<script>
export default {
    data() {
        return {
            // echarts图表折线图
            option1: {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            },
           
        }
    },

    mounted() {
        window.addEventListener("resize",this.getresize);
    },
    beforeDestroy() {
        // 页面销毁时销毁监听事件
        window.removeEventListener('resize',this.getresize)
    },
    methods: {
        // echarts随屏幕大小改变
        getresize(){
            this.$refs.chart1.resize()
        }, 
    }
}
</script>