解决Echarts中引用词云charts-wordcloud报错series.wordcloud not exists与Uncaught TypeErro ‘extendSeriesModel‘

项目环境在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即可。

  • 21
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是霸波了笨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值