npm install echarts -S

封装echarts插件

src/components/echarts.vue

<template>
  <div :id="echartsDomId"></div>
</template>
<script>
import {EleResize} from "@/assets/js/esresize";
import * as echarts from 'echarts';

export default {
  name: "echarts",
  props: {
    option:{
      type: Object,
      required: true,
    }
  },
  watch:{ //监听echarts配置动态改变数据
    option:{
      handler(newVal){
        this.myChart.setOption(newVal);
      },
      deep:true,
    }
  },
  //初始化页面完成后
  mounted() {
    this.myecharts();
  },
  //计算属性 动态添加id
  computed: {
    echartsDomId(){
      return 'echarts' + Math.random() * 100000;
    }
  },
  methods: {
    myecharts() {
      this.myChart = echarts.init(document.getElementById(this.echartsDomId));
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option);
      //添加监听事件
      EleResize.on(document.getElementById(this.echartsDomId), () => {
        this.myChart.resize();
      })
    }
  },
  //销毁对象实例的最后一步 销毁echarts
  destroyed(){
    this.myChart.dispose();
  }
}
</script>
<style scoped>
div{
  width: 100%;
  height: 100%;
}
</style>

再封装监听窗口变化触发方法

src/assets/js/esresize.js

//EleResize('domId',回调函数)
//echarts resize
var EleResize = {
    _handleResize: function (e) {
        var ele = e.target || e.srcElement
        var trigger = ele.__resizeTrigger__
        if (trigger) {
            var handlers = trigger.__z_resizeListeners
            if (handlers) {
                var size = handlers.length
                for (var i = 0; i < size; i++) {
                    var h = handlers[i]
                    var handler = h.handler
                    var context = h.context
                    handler.apply(context, [e])
                }
            }
        }
    },
    _removeHandler: function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (handlers) {
            var size = handlers.length
            for (var i = 0; i < size; i++) {
                var h = handlers[i]
                if (h.handler === handler && h.context === context) {
                    handlers.splice(i, 1)
                    return
                }
            }
        }
    },
    _createResizeTrigger: function (ele) {
        var obj = document.createElement('object')
        obj.setAttribute('style',
            'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
        obj.onload = EleResize._handleObjectLoad
        obj.type = 'text/html'
        ele.appendChild(obj)
        obj.data = 'about:blank'
        return obj
    },
    _handleObjectLoad: function () {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
        this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
    }
}
if (document.attachEvent) { // ie9-10
    EleResize.on = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (!handlers) {
            handlers = []
            ele.__z_resizeListeners = handlers
            ele.__resizeTrigger__ = ele
            ele.attachEvent('onresize', EleResize._handleResize)
        }
        handlers.push({
            handler: handler,
            context: context
        })
    }
    EleResize.off = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (handlers) {
            EleResize._removeHandler(ele, handler, context)
            if (handlers.length === 0) {
                ele.detachEvent('onresize', EleResize._handleResize)
                delete ele.__z_resizeListeners
            }
        }
    }
} else {
    EleResize.on = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (!handlers) {
            handlers = []
            ele.__z_resizeListeners = handlers

            if (getComputedStyle(ele, null).position === 'static') {
                ele.style.position = 'relative'
            }
            var obj = EleResize._createResizeTrigger(ele)
            ele.__resizeTrigger__ = obj
            obj.__resizeElement__ = ele
        }
        handlers.push({
            handler: handler,
            context: context
        })
    }
    EleResize.off = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners
        if (handlers) {
            EleResize._removeHandler(ele, handler, context)
            if (handlers.length === 0) {
                var trigger = ele.__resizeTrigger__
                if (trigger) {
                    trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
                    ele.removeChild(trigger)
                    delete ele.__resizeTrigger__
                }
                delete ele.__z_resizeListeners
            }
        }
    }
}
export {EleResize}

`## 使用echarts

<template>
  <div style="width: 100%;height: 100%;">
    <div style="width: 80%;height: 70%;background-color: #888888">
<!--
注意：option是echarts的配置选项，
    在为空时，不要初始化组件，所以添加v-if判断option的值存在
-->
      <echarts v-if="config && flag" :option="config"></echarts>
    </div>
    <button @click="flag=!flag">隐藏echarts</button>
    <button @click="update">修改option参数</button>
    <button @click="upData">修改option中的数组</button>
  </div>
</template>
<script>
import echarts from "@/components/echarts";
export default {
  name: "helloWord",
  components:{echarts},
  data() {
    return {
      config:null,    //echarts中的配置参数
      flag:true,    //手动切换是否隐藏
    }
  },
  created() {
    this.reset();
  },
  methods:{
    reset(){
      setTimeout(()=>{
        this.config={
          title: {
            text: "我是初始化数据",
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [500, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        }
      },2000)
    },
    update(){
      this.config={
        title: {
          text: "我是修改后的数据",
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [	//随机数据
              parseInt(Math.random()*100),
              parseInt(Math.random()*100),
              parseInt(Math.random()*100),
              parseInt(Math.random()*100),
              parseInt(Math.random()*100),
              parseInt(Math.random()*100),
              parseInt(Math.random()*100),
            ],
            type: 'line'
          }
        ]
      }
    },
    upData(){
      this.config.series={
        data: [ //随机数据
          parseInt(Math.random()*100),
          parseInt(Math.random()*100),
          parseInt(Math.random()*100),
          parseInt(Math.random()*100),
          parseInt(Math.random()*100),
          parseInt(Math.random()*100),
          parseInt(Math.random()*100),
        ],
        type: 'line'
      }
    }
  }
}
</script>
<style scoped>
</style>