「已解决」 vue 引入 echarts 报init undefined问题

今天是初次使用echarts，寻思放个官方案例先看一下，结果遇到一个了一个很奇怪的问题，一直报如下图所示的错误—“init of undefined”。

搜了一下主要有几种说法，可以按照一下步骤排查：

1、检查一下echarts是否安装成功

2、如果安装成功了，可能是安装的版本过高。

删除原有的，重新安装指定版本(仍不好用)。

1

npm uninstall echarts --save

npm install echarts@4.8.0 --save

1

2

3、如果还不好用，查看一下自身的引用时是否引用得不对。

在main.js中改为

import * as echarts from 'echarts';//引入echarts

Vue.prototype.$echarts = echarts //引入组件

1

2

使用的时候

var myChart = this.$echarts.init(document.getElementById('myChart'));

1

4、仍不好用的，可以考虑将document.getElementById(‘myChart’)换成$refs。

var myChart = this.$echarts.init(this.$refs.chartDom);

1

5、一般这时到第四步都解决了！！！！如果你还没解决，你就要看一下你的标签放置的位置以及你外层代码是否有什么限制。

我再操作一番以后。依然一直在报错！！！！！

这时候我突然想到了刚开始我没有考虑的一个地方，就是网上有说在使用echarts方法初始化前一定会获取一个dom元素，检查dom元素是否建立成功，如果不成功会报错。

可是我的代码也是放在mounted中写的？？？难道是我div放的位置有问题？？？？

顺着这个思路，我在其外层找到了一个原罪，外层的div有一个v-if。将其删除后就好用了。。。。。好吧。。。

最终完美展示出来了