Vue项目中Echarts图表自适应

1、安装echarts

npm install echarts

1、引入echarts（main.js）

import Vue from 'vue'

import echarts from 'echarts'

Vue.prototype.$echarts = echarts 

3、在组件中使用

<template>
  <div ref="myChart" class="chart-container" />
</template>
<script>
export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.reloadChart() // 监听盒子发生变化并重新加载图表

    window.addEventListener('resize', () => {
      this.reloadChart()
    })
  },
  methods: {
    // 重新加载图表
    reloadChart() {
      this.disposeChart()
      this.drawChart()
    }, // 销毁图表以及重置各个数据
    disposeChart() {
      if (this.myChart) this.myChart.dispose()
    }, // 加载图表

    drawChart() {
      this.myChart = this.$echarts.init(this.$refs.myChart) // 实例化图表
      const option = {
        ...图表配置项
      }

      this.myChart.setOption(option)
    }
  },

  beforeDestroy() {
    //最后记得销毁图表

    this.disposeChart()
  }
}
</script>
<style lang="scss" scoped>
.chart-container {
  　　width: 100%;
  　　height: 100%;
}
</style>