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

相关推荐
微笑的曙光4 小时前
第八期 · 情绪闯关挑战盒:一个「无惩罚」成就系统的数据建模
java·微信小程序
andrsted8 小时前
练题簿在线免费刷题:顺序续练、优先新题与题型筛选,让复习一轮轮推进
微信小程序·小程序·刷题
拖孩9 小时前
全程 AI 写的小程序,刚接上会员虚拟支付,上线第二天就有人真金白银买单了|双签名、定价、iOS 的坑我全踩了一遍
前端·后端·微信小程序
醒醒11110 小时前
深入浅出:如何用 Python 实现一个小程序污点分析引擎
微信小程序
andrsted11 小时前
练题簿在线免费刷题:Excel、CSV 批量导题与章节整理,把现成表格变成日常题库
学习·微信小程序·小程序·刷题·在线刷题
计算机毕设定制辅导-无忧学长11 小时前
《基于微信小程序的校园文化活动报名与管理系统》
java·spring boot·微信小程序·uniapp·校园文化活动报名与管理小程序
fengGer的bugs1 天前
新生儿喂养记录微信小程序:本地存储、四套主题,以及一份可改期的疫苗体检日程
微信小程序
5G微创业1 天前
去除抖音视频水印的Python实现
python·微信小程序·去水印
WeiXin_DZbishe1 天前
基于微信小程序的本地闲置物品交易平台-计算机毕设 附源码【课程设计】26825
vue.js·spring boot·python·微信小程序·架构·php·课程设计
小蒜学长1 天前
基于微信小程序的医院医疗废弃物追溯管理系统(代码+数据库+LW)
java·spring boot·后端·微信小程序·医疗废弃物