微信小程序使用lime-echart踩坑记录

一、使用echarts包

微信小程序项目使用的是uni-app，插件是lime-echart，版本一开始安装的是lime-echart-0.7.9；在项目分包之后，为了避免主包过大，就将这个插件也一并搬到了分包中，在微信开发者工具中表现出来的问题，在切到分包所在的模块时，就会导致页面报错，错误信息如下：

页面[src/manager/fund/components/charts/barChart/index]错误:
Error: module 'src/manager/uni modules/lime-echart/static/echarts.min.js’ is not
defined, require args is "../../../../uni modules/lime-echart/static/echarts.min.js'
at I (WASubContext.js?t=we...03658929&v=2.30.0:1)
at r (WASubContext.js?t=we....3658929&v=2.30.0:1)
at index.js:3
at I (WASubContext.js?t=we....3658929&v=2.30.0:1
at <anonymous>:4736:7
at dowhenAllScriptLoaded (<anonymous>:5391:12)
at HTMLScriptElement.scriptLoaded (<anonymous>:5413:5)
at HTMLScriptElement.<anonymous> (<anonymous>:5438:22)
(env: windows,mp,1.06.2301160; lib: 2.30.)

Error: module 'src/manager/uni modules/lime-
echart/static/echarts.min.js’ is not defined,require args is
../../../../uni modules/lime-echart/static/echarts.min.js'
at I (WASubContext.js?t=we..03658929&v=2.30.0:1)
at r (WASubContext.is?t=we...3658929&v=2.30.0:1
at index.js:3
at I (WASubContextjs?t=we..03658929&v=2.30.0:1)
at <anonymous>:4736:7
at dowhenA1lScriptLoaded (<anonymous>:5391:12)
at HTMLScriptElement.scriptLoaded (<anonymous>:5413:5)
at HTMLScriptElement.<anonymous> (<anonymous>:5438:22)
(env: windows,mp,1.06.2301160; lib: 2.30.0)

在开发时要正常使用图表，就必须在echarts.min.js文件中改动些东西，重新编译后就能正常使用，但是在体验版和开发版中是正常使用的，每次重启项目后都必须要经过这一个步骤有点让人不能忍受，所以就重新又读了一遍文档，发现在该插件中，如果是vue3必须要使用esm格式的包才行，于是就顺着文档提供的地址去下载vue3使用的包，地址：https://github.com/apache/echarts/tree/master/dist，找到并下载了echarts.esm.min.js改名为echarts.min.js直接将路径下uni_modules/lime-echart/static/echarts.min.js的文件替换了esm格式的文件，保存重启后发现直接在编译阶段就报错了，然后我就到component中搜索了一下static目录下是否有引用文件，排除一下是否是因为我替换了js文件导致的，结果发现了在APP-NVUE模式下有引用到static/index.html文件，想着反正也不会用到这个模式，索性就将html文件中的引用都先注释了，然后项目正常启动，测试了一下基本上使用正常。

二、使用定制echarts

从插件下载的包或者下载的esm.min.js包都是很大的全量包，微信小程序包有大小的限制，所以插件大小能小就小，插件文档中也提供了官方定制地址：https://echarts.apache.org/zh/builder.html，定制包后最小也有500kb以上，不过总比全量包要小很多，但是vue3需要使用esm格式的包，官方定制化后的包也没有这种格式的，从插件的示例组件中有提供引入的方法，先把原文贴出来：

// nvue 不需要引入
// #ifdef VUE2
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
// #endif
// #ifdef VUE3
// #ifdef MP
// 由于vue3 使用vite 不支持umd格式的包，小程序依然可以使用，但需要使用require
const echarts = require('../../static/echarts.min');
// #endif
// #ifndef MP
// 由于 vue3 使用vite 不支持umd格式的包，故引入npm的包
import * as echarts from 'echarts/dist/echarts.esm';
// #endif
// #endif

在项目中引用的方式由import改为require引用该插件，然后这个js文件必须要放到插件的static目录下，重新启动运行项目，基本没有问题，预览后你就会发现代码包的总体积成功减了下来，完美！

但是，如果你的js包要是放到static目录外面，你的项目在编译的时候就不会把这个js文件打包到小程序中，一旦切换到使用图表的页面中就会立即报错，找不到js文件；因为uniapp中使用require中不会在项目编译的时候就将引用到的包一起编译，require是运行时调用的，所以在项目中引用到了地址却没有找到对应的js文件就会立即报错。

简单总结一下：

• vue3必须要使用esm包
• 定制包的时候，使用require来引用，并且只能放在插件下的static目录中
• 如果不会用到APP-NVUE模式，可以将static/index.html文件中引用到的文件都移除，省得看到报错心理不爽

三、定制图表过程

直接从百度上搜索echarts官网，切到文档中，选择入门篇-》获取echarts，直接翻页到最底部就能获取到定制功能。