微信小程序使用Echarts真机调试报错,Echarts占内存过大解决方法

Echarts真机调试报错

解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示。

重点:发布线上时,一定要将这句去掉,现在只是不支持真机调试,线上是可以使用的。

<view class="echartsBox">
    <ec-canvas
     id="mychart-id" 
     canvas-id="mychart" 
     ec="{{ ec }}" 
     force-use-old-canvas="true"></ec-canvas>
</view>

引入Echarts占内存过大解决方法

微信小程序代码包大小限制为2MB,但是echarts代码包就快1M,再结合额外的业务代码以及其他资源很有可能超过2MB的限制,对于这个问题,我们解决方案有两种:

 1、压缩echarts的大小

从echarts官网下载微信小程序集成DEMO以后,官方包内容如下:(ECharts官方文档链接

首先,我们通过官网文档的下载中 官方自定义构建 可以下载经过UglifyJS压缩后的echarts,也可以选择只含有实际项目使用到图表的echarts.js

因为默认通过官方DEMO下载的ec-canvas文件夹中含有微信小程序引入echarts的全部内容,但实际项目中可能用到了柱状图、折线图很多用不到的图表/工具没必要放在项目中占用代码大小

大家可以根据实际项目情况选择用到的echarts组件进行构建,下图时我项目中使用到的组件自定义构建内容:

 

 选择完成以后,点击【下载】就可以下载我们自定义构建的echart文件了

注:勾选代码压缩以后下载的文件名称为:echarts.min.js

       未勾选代码压缩以后下载的文件名称为:echarts.js

 然后我们将自定义构建下载的echarts.min.js重命名为echarts.js再替换项目ec-canvas目录下的echarts.js,访问项目发现echarts相关图表渲染正常,控制台无任何异常输出,这样我们就将原本大小将近1000KB的echarts压缩了一半。

注:自定义构建下载的echarts.min.js重命名后放入项目后可能会出现无法渲染图表、控制台报undefined、找不到echart部分函数错误,说明我们在项目中所使用到的echarts的功能在自定义构建中没有选择到,这个时候需要我们认真核对自定义构建是否漏选了项目中使用到的功能。

2、使用分包

分包功能可以直接参考微信小程序官方文档就可以解决这个问题:官方链接

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值