vue3,uniappx微信小程序项目引入echarts,+分包

1：准备

1.1：下载项目

DCLOUD插件市场地址：https://ext.dcloud.net.cn/plugin?id=15140；
github地址：https://github.com/taojunnan/uniapp_plugin_echarts_weixin；

1.2：这里以DCLOUD插件市场地址为例

打开后页面点击下载示例项目zip

1.3：下载后项目文件（JnChart）

2：使用
 

2.1：在要使用的项目里新建一个文件夹

把下载的JnChart项目里面的components文件夹和static文件夹直接复制粘贴到新建文件夹下。
这里我新建的文件夹名是echarts

 

这里我新建的文件夹是echarts,在pages文件夹下，要使用JnChart组件的页面是address-book.uvue
注意：一定要把要使用JnChart组件的页面文件放在新建的文件夹下。(为分包做铺垫)
 

2.2：使用组件

直接在项目里引入组件即可

optionPie可以直接用echarts的option

基本使用就是这样，其他的需求可以看官方文档。
uniapp vue3 echarts 微信小程序 兼容skyline - DCloud 插件市场

3：分包

小程序官方的规定：

1. 代码包总大小：

   • 主包 + 所有分包： 总和不能超过 16 MB。
   • 单个独立分包： 每个独立分包（independent: true）的最大体积为 2 MB。
   • 单个非独立分包： 每个非独立分包（依赖主包）的最大体积也为 2 MB。

2. 上传时的大小限制：

   • 未压缩代码包大小： 上传时，工具会检查你的代码包（主包 + 此次上传的分包）的未压缩总大小，不能超过 24 MB。即使你代码压缩后小于 16MB，但如果未压缩时超过 24MB，也无法上传。

3. 单个文件大小：

   • 单个文件： 最大不能超过 2 MB。

 用户首次打开小程序时，只会下载主包。只有当用户访问到某个分包内的页面时，微信客户端才会按需下载该分包的代码。

echarts.js文件体积太大。所以需要缩小echarts文件体积

3.1:定制echarts文件

ECharts 在线构建通过链接进入echarts定制页面，勾选自己需要的部分，这里我需要饼图，我只勾选了饼图，其他的都没勾选，同时在最下面把代码压缩勾选上。然后点击下载

下载后把文件改名为echarts.js，然后替换掉项目里的echarts.js
 

3.2:修改pages.json

这样就算单独的一个包了，按照规则，一个包最多2m，之前的操作把echarts.js体积也减少了，在只勾选饼图的情况下echarts.js的体积为400kb，以后所有需要echarts的页面都要写在这个这个分包下。

最后：在小程序上引用这个组件后，可能会在编译器上出现echarts定位偏移，蒙版穿透的问题。用真机调试一下，这些bug大概率在手机上是没有的。