前言:
在使用HBuiderX开发过程中,无论是uniapp还是微信小程序,有需要用到echarts进行数据可视化的时候,往往需要引入echarts的依赖。
网上很多echarts的使用和配置教程,本人将在使用过程中遇到的配置问题进行一个分享,希望跟我一样在查看别人教程的时候,别人的项目都是简简单单的几条npm命令就解决了,而我们的却出现错误的情况,本人也是查阅了相关博文以及文档后,将遇到的问题解决了。
遇到的问题和解决办法(自行挑合适的看)
1、echarts安装途径的选择
针对网上很多关于echarts和ucharts的情况介绍,这里就不对两者进行介绍(默认选的是echarts)
安装echarts的时候,分别有①官网下载资源包的、②使用其他博主分享的网盘资源的、③git上clone的、④使用npm命令直接引入的
本人的习惯所驱,基本都是怎么方便怎么来,所以我选的是④npm命令,因为它快捷啊,而且配置全面,不会缺这个少那个的
2、npm命令报错
这里省略掉npm安装echarts教程,网上很多,就简单的几条命令加一个示例引用
在HBuilderX里运行终端
运行
npm install echarts
后,会出现安装不成功,甩出几行错误提示,例如:
npm error errno -4077
npm error network this is a problem related to network connectivity.
遇到这一步,有人就慌了,网上很多博主有分享更换npm版本的相关教程,结果越试越乱,甚至更换④npm这种最简便的方法,改用①②③那样的方法,最后白忙活。
错误做法:对照自己的是不是也这样做过,没试过的不用试,跳过这一步(因为这是错误示范):
×关闭代理:npm config set proxy false
×清除缓存: npm cache clean
×强制清除缓存:npm cache clean --force
以上三步都是无法解决的,会这样提示:
npm error As of npm@5, the npm cache self-heals from corruption issues
npm error by treating integrity mismatches as cache misses. As a result,
npm error data extracted from the cache is guaranteed to be valid. If you
npm error want to make sure everything is consistent, use `npm cache verify`
npm error instead. Deleting the cache can only make npm go slower, and is
npm error not likely to correct any problems you may be encountering!
npm error
npm error On the other hand, if you're debugging an issue with the installer,
npm error or race conditions that depend on the timing of writing to an empty
npm error cache, you can use `npm install --cache /tmp/empty-cache` to use a
npm error temporary cache instead of nuking the actual one.
npm error
npm error If you're sure you want to delete the entire cache, rerun this command
npm error with --force.
3、我最后的做法(顺利解决的):
直接更改代理URL:
npm config set registry https://registry.npm.taobao.org
接着检查一下是不是改过来了:
npm config list
OK,到这一步就剩最后一步了:
npm install echarts
然后就完成了,看结果图:
看文件列表:
这不比手动下载、引入要香嘛?