vue使用echarts报错解决

因为echarts版本更新，所以老是有人报这么一个错

版本更新后引入的方法也有所改变

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

下面是常见问题

异步请求数据时总是在created调用但是却在mounted之后执行，导致数据没有载入数据源就直接执行echarts然后没有渲染数，不出效果也不报错，这是我们可以设置一个监听

<template>
  <div class="reports">
    <div ref="a" style="width: 500px; height: 500px;"></div>
  </div>
</template>

watch: {
    option: {
      handler() {
        let mychart = this.$echarts.init(this.$refs.a);
        mychart.setOption(option);
      },
    },
  },

这个时候option一旦被赋值就会立马执行渲染，我们的绘图就会立即执行，操作图的话可以用 updated来代替watch