小程序echarts太大

最新推荐文章于 2024-05-21 19:26:31 发布
最新推荐文章于 2024-05-21 19:26:31 发布
阅读量6.2k 收藏 1
点赞数 1
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hero_rong/article/details/91368541
版权

当在小程序里面使用echarts，发现项目过大的时候，可以

在线定制 （https://echarts.baidu.com/builder.html）

可自由选择所需图表、坐标系、组件进行打包下载，并且可对渲染引擎、兼容及压缩问题进行设置，想用什么图表就选什么图表

 

Hero_rong
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
小程序多个echars_微信小程序中使用echarts以及踩坑总结
weixin_39636696的博客
12-22 1104
人在家中坐，锅从天上来。半个月前本来在家写着一个项目，还没来得及提测，领导突然一个电话，需要立刻去支援另一个项目，一打听，一个烂尾半年的项目，纵使内心不愿意，还是要去啊。因为鲁迅说过，生活就像强*，既然不能反抗，那就好好享受吧。这个项目分为PC端、用户端小程序和商家端小程序，这里主要讲讲在商家端中的某个模块，需要用到数据统计图表，当时觉得有两个插件不错：因为之前在项目中使用echarts比较多，所...
uniapp中使用echars解决编译后文件过大问题
程序员小翟
07-15 1978
解决echarts.js文件过大的问题
uniapp开发微信小程序引入echarts
最新发布
C_0010的博客
05-21 1039
使用uniapp在开发微信小程序的时候怎么正确引入echarts呢？官方插件市场早已给你准备好了！
uni-app使用echarts并解决echarts文件过大的问题
qq_46499695的博客
04-03 1万+
背景 这几天写小程序需要用到echarts，又因为我用uni-app开发，因此研究了好久uni-app引用echarts，遇到了也最终解决了好多bug，我感觉大家应该在使用的时候应该都会遇到，因此专门来写一篇博客，希望可以给大家提供一点帮助！！ 第一次写，保证超详细！！！ 正文 一、uni-app引用echarts 原生开发和uni-app开发需要引用的echarts不同，我们着重讲uni-app开发，原生的大家另行研究吧。 首先，要去下载插件（用hbuilder编辑器下载.....
小程序引入的echarts过大如何解决_微信小程序中使用Echarts
weixin_39632891的博客
12-20 799
我们首先下载echarts微信版,下载地址为：https://github.com/ecomfe/echarts-for-weixin，然后我们把下载好的文件放在我们的小程序中，小编是建立了一个libs用来存储这些引用的库。json文件中的配置："usingComponents": {"ec-canvas": "/libs/ec-canvas/ec-canvas"}js中引用let echarts...
uni-app H5使用 tabbars切换,echartst图表变小 宽度只有100px问题解决
LlanyW的专栏
09-14 906
这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。tabbars点击事件：onTabItemTap，点击回来时，将chart:true，tabbars跳转后，将echarts删除，跳转回来之后，再重新绘制。
VUE引入Echarts 打包文件过大——解决方法1：按需引入
xiaozhuge_S
06-05 1万+
在vue中引入echarts文件 ，打包太大怎么办？ 可以按需引入 在vue项目中加入了echarts图表。在进行项目打包时发现，因为引入了全局的echarts，导致打包文件太大，在查找了一系列的文章，根据别人写的文章进行尝试，可能因为项目场景配置不同，发现各种问题报错。经过解决报错，终于问题解决！非常之不容易啊～ 对在vue中引入的echarts代码进行了整理，分享给还在踩坑的人，希望有所帮助。...
微信小程序echarts
04-09
微信小程序Echarts是一款将流行的JavaScript数据可视化库Echarts与微信小程序平台相结合的工具。Echarts是由百度开发的一个基于canvas的图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图、散点图等，适用...
微信小程序使用echarts实现统计图功能
04-24
本资源主要分享如何使用echarts实现数据的统计功能。 分享的本示例中，是使用echarts完成条形图的功能，主要因为示例中存在echarts的组件代码，该代码为echarts的源码，行数较多，为方便使用，便直接放在本资源中，...
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
微信小程序echarts组件
10-24
为了兼容小程序 Canvas，ECharts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。index.json 配置如下： { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }
uniapp开发APP使用echart
chenyidong521的博客
07-15 1809
uniapp使用echart完成图表
echarts+bmap
coolsunxu的博客
06-30 890
echarts+bmap
echarts 按需引入解决打包体积过大问题
yjl13598765406的博客
06-12 2076
echarts 按需引入解决打包体积过大问题
uniapp文件体积超过 500KB报错
weixin_42112342的博客
01-17 5379
文件体积超过500kb
[JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。ec-canvas/echarts.js
热门推荐
guochanof的专栏
06-16 1万+
全部图表的echarts.js非常大,如果你的项目较大可能会导致项目上传失败, 在你把整个js导入项目时开发者工具也会有如下提示: [JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。ec-canvas/echarts.js 处理方法: 按你项目所需的图表定制化下载, 定制地址https://echarts.apache.org/zh/builder.html 勾选你所需要的图表,最下方点下载, ...
uniapp中使用echart的总结
qq_44173499的博客
03-01 1万+
uniapp中使用echart的总结 最近的任务是用uniapp开发移动端，要用echart。在uniapp选择了两个插件做开发 第一个： http://https://ext.dcloud.net.cn/plugin?id=1207 第二个： echarts图表在移动端的应用 - DCloud 插件市场 但是第二个菜鸟级别的我，没有找到如何在同一个页面上使用这个插件写多个图表， 最后使用第一个使用的最多。 在使用第一个的过程中遇到了两个问题 ①柱状图渐变色不能使用 ②图表不..
uniapp 引入插件市场的echart插件，使用指南！+踩坑记录！！血泪史！！！
柑橘乌云_
04-11 7133
在uniapp做的微信小程序中使用echarts，通过echart-for-wx 插件，遇到图表不报错，不显示图表等bug，踩坑记录，最重要的是插件版本和echart.js版本的对应关系，以及压缩版本的echart.js的版本对应关系。
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
qq_52212982的博客
07-24 2574
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
小程序echarts地图放大缩小
04-18
在小程序中使用echarts地图进行放大缩小操作，可以通过以下步骤实现： 1. 引入echarts库：在小程序的页面中引入echarts库，可以通过npm安装或者直接引入CDN链接。 2. 创建canvas：在小程序的wxml文件中创建一个canvas标签，并设置宽高和id属性。 3. 获取canvas实例：在小程序的js文件中，通过wx.createCanvasContext方法获取canvas的上下文对象。 4. 初始化echarts：使用echarts.init方法初始化echarts实例，并将canvas的上下文对象传入。 5. 设置地图配置：通过echarts.setOption方法设置地图的配置项，包括地图类型、数据等。 6. 监听手势事件：通过canvas的touchstart、touchmove、touchend事件监听用户的手势操作。 7. 处理手势事件：根据用户手势的变化，调用echarts实例的setOption方法更新地图的缩放比例。 下面是一个示例代码： ```javascript // wxml文件 <canvas id="map" style="width: 100%; height: 100%;"></canvas> // js文件 const echarts = require('echarts'); Page({ onLoad: function () { const ctx = wx.createCanvasContext('map'); const chart = echarts.init(ctx); // 设置地图配置 const option = { // 地图配置项 }; chart.setOption(option); // 监听手势事件 let touchStartDistance = 0; let touchMoveDistance = 0; let scale = 1; let lastScale = 1; wx.onTouchStart((e) => { if (e.touches.length === 2) { touchStartDistance = this.getDistance(e.touches); } }); wx.onTouchMove((e) => { if (e.touches.length === 2) { touchMoveDistance = this.getDistance(e.touches); scale = touchMoveDistance / touchStartDistance * lastScale; chart.setOption({ geo: { zoom: scale } }); } }); wx.onTouchEnd(() => { lastScale = scale; }); }, // 计算两个触摸点之间的距离 getDistance(touches) { const x1 = touches.clientX; const y1 = touches.clientY; const x2 = touches.clientX; const y2 = touches.clientY; return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); } }); ``` 这样就可以在小程序中使用echarts地图进行放大缩小操作了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值