微信小程序引入echarts.js 过大问题解决

已于 2023-04-13 09:04:08 修改
阅读量1.6k 收藏 2
点赞数
文章标签： echarts 微信小程序 前端
于 2023-04-12 16:58:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi450561200/article/details/130111097
版权

其实很简单

       微信小程序开发，及经常使用到Echarts图标框架，继集成步骤就不过多叙述，主要讲如何解决引入后导致微信包大问题，下面是echart githhub源代码，但是下载下来带引入的echarts.js文件将近1M.

GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

解决，在官网定制就好，选择需要 的模块。如图所示我只需要折线图，后续需要新增其他模块直接重新勾选，下载echarts.js替换就好。

ECharts 在线构建

 注意下载下来的js文件是echarts.min .js（如果勾选代码压缩的话），下载下来直接重命名成echarts.js就好。不勾选代码压缩的话，下载下来的文件就是echarts.js，直接替换微信小程序对应的js文件即可，会发现包小很多。

项目截图，大小将近缩小一半，如下图所示：

人民的石头
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序引入的echarts过大如何解决_Taro 解决使用echarts体积过大的问题
weixin_28717807的博客
12-30 3186
背景近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。为什么选择Echarts？因为已有项目使用了ec-echarts, ec-canvas使用了echarts.js, 所以暂时只能沿用, 由于echarts比较大, 建议新开发的简单功能可以使用别的画图组件,单包超过2M，为什么？不处理的情况下, 导...
小程序引入的echarts过大如何解决_在微信小程序中使用 ECharts
weixin_39636411的博客
01-15 1645
官方文档官方已经提供了小程序版的 ECharts echarts-for-weixin 并提供的了使用示例使用方式还是熟悉的 ECharts 的配置方案，只要自己 option 或者完整的将浏览器端的 option 迁移到小程序端即可使用方法引入组件ec-canvas 是 ECharts 提供的微信小程序端的组件，在项目中引入即可import * as echarts from '../../e...
uni-app微信小程序使用ECharts
Hjboke的博客
08-05 1033
uni-app微信小程序使用ECharts
微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
热门推荐
qq_32352777的博客
06-10 1万+
一、微信小程序引入echarts过大最佳解决方案 二、echarts在微信开发者工具中不跟随滑动 三、使用echarts控制台提示使用canvas 2d
微信小程序引入echarts 过大最佳解决方案
weixin_45527865的博客
10-21 6261
引入echarts以后，单echarts代码包已经973KB，如何能压缩大小？ 使用自定义的方法 压缩文件大小 官网地址 可以根据实际项目情况选择用到的echarts组件进行构建，如下图所示： 选择完成以后，点击【下载】就可以下载我们自定义构建的echart文件 注：勾选代码压缩以后下载的文件名称为：echarts.min.js 未勾选代码压缩以后下载的文件名称为：echarts.js 将下载的echarts.min.js重命名为echarts.js替换项目ec-canvas目录下的echart.
微信小程序如何引入使用ECharts（附带自定义定制流程）
m0_71156997的博客
08-01 2192
开发中有时候避免不了引入各种第三方库，以下是详细讲解了微信小程序如何引入ECharts图表。
微信小程序中使用echarts，及echarts.js文件过大问题，并且实现异步请求数据 赋值渲染
liuxiaocaie的博客
11-08 1367
关于这个东西。。。头疼了两天。。。什么全局定义数据啥的 数据能获取，数据能赋值但是无法实现响应式。。。看如下代码吧。 引入这一块，因为小程序不能接受太大文件，可以自定义选择想要的图形，自定义构成一个文件大约小一半从900多kb不按成400多，直接看人家的链接吧，不过多叙述了。。 ​​​​​​微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d_昌杰的攻城狮之路的博客-CSDN博客 如何使用。 1、首先要先去h
小程序引入的echarts过大如何解决_微信小程序Echarts覆盖正常组件问题解决
weixin_39830917的博客
12-20 840
最近公司的项目中需要在小程序内使用echarts组件来展示数据，同时因为使用了自定义导航栏以及蒙版层，导致Echarts图形覆盖于所有组件的上方，不符合设计要求。尝试解决的思路：z-index：Echarts使用的是微信原生canvas，优先级高，z-index完全无效。cover-view：因为page中含有一些如input之类的无法与cover-view进行嵌套使用的元素，故cover-vie...
教你解决Taro微信小程序中使用Echarts体积过大的问题
ForeverCjl的专栏
11-06 4653
背景 近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。 为什么选择Echarts？ 微信小程序目录市面上使用最多的两款图表库，如下： echarts-for-weixin——echarts微信小程序版本 wx-charts——基于微信小程序的图表库 对比两款图表库优缺点刚好相反。 echarts-for-weixin：功能强大，但体积非常大 wx-charts：功能相对简单，但体积小 由于笔者对ech
taro+vue3 引入echarts图表后分包，上传时主包体积太大无法上传解决办法
weixin_43209133的博客
08-18 539
3、由于分包引入了echarts, 小程序上传时，分包里的echarts插件被打包到主包的common.js中导致主包体积过大无法上传，这时config下的dev.js 或者index.js添加以下代码，就可以了，打包时分包里的插件打包进了分包。2、app.config.js 添加文件路径。1、新建分包moduleA。
在微信小程序中如何使用ECharts 避免踩坑
01-08
在微信小程序中如何使用ECharts。坑已踩完，放心参考。 ECharts官网–5分钟上手ECharts ECharts 团队联合微信小程序团队合作，提供了ECharts的小程序版本。开发者可以通过平常的组件开发配置那样去使用ECharts进行开发，高效的实现数据可视化。 一、如何下载ECharts。，以及下载后的目录分析。 ECharts下载链接 下载后echarts-for-weixin-master文件夹里主要了解ec-canvas文件夹，这个文件夹相当于是一个组件，ECharts的组件，因此前面我说着就这平常小程序使用组件一样。 我们到时候导入ECharts只需要导入这个文件夹（组件）
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
Echarts微信小程序-中国与世界地图文件包（china.js,world.js）
09-13
在设计微信小程序，需要使用地图时候，一般引入echarts里面的地图模块，但是该地图只有河南省，如果想要全国或者全球的，资源不好找。本人做过一个项目，刚好找到这两个地图资源包，直接替换，亲测可用。
微信小程序使用echarts获取数据并生成折线图
10-16
在微信小程序中使用ECharts生成折线图是一项常见的数据可视化任务。ECharts是一款由百度开发的开源JavaScript图表库，它提供了丰富的图表类型和强大的交互功能，适用于Web和移动应用。在微信小程序中，我们可以借助...
微信小程序中使用ECharts 异步加载数据的方法
08-27
微信小程序中使用ECharts 异步加载数据的方法 微信小程序中使用ECharts 异步加载数据的方法是指在微信小程序中使用ECharts 库异步加载数据的方法，该方法可以实现在小程序中加载数据并渲染图表。这种方法主要用于...
【微信小程序】使用echarts实现一个界面动态刷新多个柱状图
01-08
最近在写微信小程序遇到了图表相关的问题，项目要求是要用柱状图，同时由于数据较多，需要将一组数据用多个图表表示，而且还要实现动态刷新数据。 关于echarts的下载和引入不多加介绍。 效果图 这里只取一部分数据做...
小程序引入的echarts过大如何解决_记一次完整小程序项目中的的echarts踩坑
weixin_39630855的博客
12-20 1569
主要记录echarts中的坑，基本的使用就不详细说了，随便百度都有。。。先是异步请求数据渲染echarts的方法，踩坑在最后！！！第一步首先引入echartsecharts官网没有小程序版，不过已经有人在github发布echarts的小程序版本了。。但是echarts.js的版本不是最新的，个人推荐去官网在线定制。定制版的echarts体积更小，而且小程序中用到的图表种类不会很多，而且定制非常简...
小程序：uniapp解决 vendor.js 体积过大的问题
最新发布
A_man_of_ideas的博客
09-21 640
如果完成了以上步骤打包完代码，上传时，提示代码体积超过了限制，这个时候试试关闭了开发工具，重新打开，然后上传。问题描述：代码上传、真机调试提示包提交过大，无法上传代码或生成二维码。上，小程序引用服务器文件地址（图片较多的话会节约大量的体积）根据业务类型进行分包处理（分包后单一包的体积迅速减少）
微信小程序_06 将臃肿的单页js文件拆开
u011525168的博客
06-06 296
小程序中每一个页面对应一个Page()方法,我们需要把变量和组件的各种事件都写在一个对象里,然后把对象作为这个参数传递给Page方法 如下定义 const object = { data: { nickName:'酷走天涯' }, // 页面加载完成调用这个方法 onLoad: function (options) { }, bi...
uniAPP开发微信小程序引入echarts，并导入动态数据
07-27
在uni-app开发微信小程序中引入echarts并导入动态数据的方法如下： 1. 首先，确保你已经下载了EchartsForWx插件\[2\]。可以在微信小程序的插件管理中搜索并下载该插件。 2. 在uni-app项目中的static目录下创建一个echarts文件夹，并将下载的EchartsForWx插件解压到该文件夹中。 3. 在需要使用echarts的页面中，引入echarts的核心文件。可以在页面的script标签中使用require语法引入echarts文件，例如： ``` const echarts = require('../../static/echarts/echarts.js'); ``` 4. 在页面的data中定义一个变量，用于存储动态数据，例如： ``` data() { return { chartData: \[\] } } ``` 5. 在页面的onLoad生命周期函数中，获取动态数据并将其赋值给chartData变量，例如： ``` onLoad() { // 获取动态数据的逻辑 // 将数据赋值给chartData变量 this.chartData = dynamicData; } ``` 6. 在页面的onReady生命周期函数中，使用echarts绘制图表。可以在canvas的id属性中指定一个唯一的标识符，然后在onReady函数中使用该标识符获取canvas的上下文，并使用echarts的API绘制图表，例如： ``` onReady() { const chart = echarts.init(this.$refs.chart); // 获取canvas的上下文 const option = { // echarts的配置项 series: \[{ type: 'bar', data: this.chartData }\] }; chart.setOption(option); // 绘制图表 } ``` 7. 在页面的template中，使用canvas标签创建一个画布，并设置一个唯一的id属性，例如： ``` <canvas id="chart" ref="chart"></canvas> ``` 通过以上步骤，你就可以在uni-app开发的微信小程序中引入echarts，并导入动态数据来绘制图表了。记得根据你的实际需求修改echarts的配置项和数据。 #### 引用[.reference_title] - *1* [uniapp - 微信小程序端引入 Echarts 图表及使用详细教程，简单快速的解决方案（拒绝复杂的过程，附带详细的...](https://blog.csdn.net/weixin_50545213/article/details/130131596)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [UNIAPP微信小程序使用Echarts](https://blog.csdn.net/qq_35921773/article/details/127536926)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值