微信小程序使用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,直接翻页到最底部就能获取到定制功能。

相关推荐
AI工具人PM产品经理13 小时前
零基础微信小程序入门:一个真实项目的里程碑路线图
微信小程序·云开发·学习路线·零基础入门·ai 编程
拖孩1 天前
这个小程序是 AI 帮我写的,可它里面一个 AI 功能都没有
前端·后端·微信小程序
克里斯蒂亚诺更新2 天前
小程序自定义导航栏怎么写:从配置到实战
微信小程序
liyinchi19882 天前
微信小程序支付遇到“由于小程序违规,支付功能暂时无法使用” 解决办法
java·微信小程序·go
silianpan2 天前
Office 文档预览 UTS 插件
android·微信小程序·harmonyos
微笑的曙光2 天前
第三期 · 账号体系与双 Token 鉴权:让用户「无感登录,有感安全」
微信小程序
耀耀切克闹灬2 天前
Skyline 渲染问题记录以及总结
微信小程序
小程序开发X2 天前
2026 深圳 APP 开发甄选:技术架构搭建、全流程落地、综合选型解读
微信小程序·小程序·app开发
EatFan3 天前
一个二维码背后的系统设计:批次生成、绑定、扫码与数据统计怎么做?
java·后端·微信小程序·二维码·qrcode
微笑的曙光4 天前
第一期 · 本地优先 MVP:不写一个后端,如何做出完整体验
微信小程序