vue加echarts怎么优化,vue框架内使用echarts的方法

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

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

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

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

删除原有的，重新安装指定版本(仍不好用)。
npm uninstall echarts --save
npm install echarts@4.8.0 --save
3、如果还不好用，查看一下自身的引用时是否引用得不对。

在main.js中改为

import * as echarts from ‘echarts’;//引入echarts
Vue.prototype.$echarts = echarts //引入组件

使用的时候

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

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

var myChart = this. e c h a r t s . i n i t ( t h i s . echarts.init(this. echarts.init(this.refs.chartDom);

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

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

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

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

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

最终完美展示出来了

————————————————
版权声明：本文为CSDN博主「Synnny」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43777007/article/details/115066141