项目环境在windows下的vite+vue项目
最初遇到的问题是series.wordcloud not exists错误,经过查阅CSDN其他博主的解答,大概是将某min.js文件创建出来,然后在代码中引用。但是此方法又造成了Uncaught TypeErro 'extendSeriesModel’的报错。
经过查阅资料,发现了兼容版本
即 echarts 5.1.2 与 echarts-wordcloud 2.0.0
概述:
我将vue中的node_modules文件进行了重新清理构造,用npm安装echarts@5.1.2,并手动去GitHub下载了echarts-wordcloud 2.0.0的zip包,将解压后的echarts-wordcloud 2.0.0文件夹改名为echarts-wordcloud,并在项目的根目录下,创建了libs目录,将echarts-wordcloud文件复制到libs目录下,修改项目根目录下的package.json,在dependencies中手动添加依赖,“echarts-wordcloud”: “file:./libs/echarts-wordcloud” ,然后在终端执行npm install 刷新依赖即可。
详细步骤:(请务必事先做好项目备份!!!)
一,cd到项目根目录下,删除根目录下的node_modules
rmdir /s /q node_modules
二,删除 package-lock.json 文件(如果存在)
del package-lock.json
三,清理 npm 缓存
npm cache clean --force
四,检察根目录下的 package.json 中的dependencies标签中的内容,如果有echarts与echarts-wordcloud的相关内容,请删除!
五,重新根据 package.json 中的内容,进行安装依赖,命令如下
npm install
上述步骤的执行,都是在终端中,在项目的根目录下执行的,在我们重新执行完npm install后,会发现被删除掉的node_modules文件夹又添加到了根目录下,我们打开它,检查下是没有包含echarts组件的,如果没有包含任何echarts相关文件则证明卸载成功,我们可以重新安装echarts 5.1.2 与 echarts-wordcloud 2.0.0
对于echarts的安装,可以直接使用npm,但是对于echarts-wordcloud的安装,我不建议,因为我之前用npm安装应该是失败了,可能项目原在github,涉及到了网络问题所以npm安装echarts-wordcloud失败。故我们可以用魔法,去GitHub上手动下载echarts-wordcloud 2.0.0.zip
六,基于npm安装echarts 5.1.2
npm install echarts@5.1.2
七,手动去GitHub下载 echarts-wordcloud 2.0.0.zip
下载链接,如果无法打开网页,使用我上传的资源也可
八,在根目录下创建libs目录,将解压出来的echarts-wordcloud 2.0.0改名为echarts-wordcloud,粘贴即可。
九,手动配置根目录下的package.json文件,注意,不是echarts-wordcloud文件下的,而是我们项目根目录下的package.json。手动添加上依赖即可
"dependencies": {
"echarts-wordcloud": "file:./libs/echarts-wordcloud"
}
例如,我目前的package.json中dependencies完整内容:
十,再次执行npm install
npm install
再次运行 npm install,npm 将识别 package.json 中的改变,并根据我们指定的本地路径安装 echarts-wordcloud。
关于在vue文件中import导入wordcloud,我们仍然可以采用官方给定的方式 import ‘echarts-wordcloud’ 即可
import * as echarts from 'echarts'
import 'echarts-wordcloud'
//import '@/utils/echarts-wordcloud.min.js' 失败的导入方式
从上图也可以看出,我在研究目前CSDN上给出的解决方案中的import ‘@/utils/echarts-wordcloud.min.js’ 方式失败了,报错内容一致存在。
总结:
该问题发生的本质原因我也没研究透彻,目前仅仅是怀疑是版本兼容问题,如果大家有遇到跟我一样的错误,并且用CSDN上目前的解决方式没效果,反而出现Uncaught TypeErro ‘extendSeriesModel’ 问题,可以考虑彻底清理掉node_modules目录,然后从依赖中手动删除echarts相关内容,重新npm install构建一个不含有echarts的vue项目,最后我们手动安装兼容版本的echarts和echarts-wordcloud即可。