微信小程序使用Echarts和分包的完整步骤
前言
假期虽然结束了,但是它以另外一种形式展示我们身上(摸摸自己的小肚子)。在小程序上以图形化显示数据就是分给我的假期预研任务,查了一下网上大佬们的文章了解到了Ucharts,F2,Wx-charts和Echarts,只尝试了F2和Echarts,由于Echarts的最近更新最近和我对Echarts更为熟悉,所以我选择了Echarts,F2也试了下,虽然弄出来了,但是我不是太熟悉所以就放弃了。
进入正题
首先我是看到别人的文章写Echarts的,给了官网的传送门,然后就去官网顺着看了,比较简单,这里我也给个传送门吧。大体上的步骤
1、下载官网例子。
2、把官网例子中的ec-canvas文件夹复制到项目目录中。
3、在具体的页面中像使用组件一样引入ec-canvas。
4、在具体的页面的js中进行初始化。
在下载完官网例子后,找到ec-canvas文件夹,里面有echarts.js,wx-canvas.js还有ec-canvas四件套。然后把这个文件夹复制到自己项目的目录下,一开始我是放到utils下的,后来分包之后就放别的地方,这里就当放在utils下了。然后项目就大了700+KiB。
页面中
xxx.json
{ "usingComponents": { "ec-canvas": "xxx/xxx/xxx/ec-canvas/ec-canvas" } }
xxx.wxml
<view class="container-echarts margin-top-10"> <ec-canvas class="mycharts" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view>
xxx.js 首先要引入echarts然后才能用下面的initChart方法,所以根据放置的ec-canvas的路径引入echarts。
import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // 根据放置的ec-canvas的路径引入echarts let chart = null // 用一个变量保存echarts的初始化 let options = { // 图形配置,用过echarts的人都知道是嘛意思~ 这里给出官网线图的基础例子 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }] } function initChart(canvas, width, height, dpr) { // 这里的canvas,width,height,dpr都可以不用管 const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // 像素 }); canvas.setChart(chart); chart.setOption(options); return chart; } Page({ data: { ec: { onInit: initChart // 这里不要加括号哦! } } });
保存运行,到这一步理论上echarts已经可以显示了,实际怎么样还要自己调试的。
用一个chart变量保存echarts的初始化,官网上把options也写在方法里,我给拿出来了。那chart有什么用呢?因为大部分的数据都是异步获取的,所以要动态渲染echarts。当拿到数据后,这个chart就用上了。
chart.setOption({ xAxis: { data: newData.map(item => { return item[0]; }) }, series: { data: newData.map(item => { return item[1]; }) } })
这里关于data的数据格式,看每个人的options里面要渲染的是什么图吧。我这里用的是官网给的这个例子传送门,echarts的数据更新可以直接用setOption。
在开发者工具中的放大缩小滚动没有用,但是上传到体验版上后在手机上是好的。微信对canvas有type="2d",在ec-canvas中想要使用type="2d"的话,要改动ec-canvas.js
data: { isUseNewCanvas: true // 这里改成true, 默认是false }
因为:isUseNewCanvas默认是false,是旧版的canvas。
<!-- 新的:接口对其了H5 --> <canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas> <!-- 旧的 --> <canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
echarts.js体积大的问题,上传项目2MiB限制问题
就下载的ec-canvas里面的echarts.js有几百KiB,相对于2MiB的来说挺大的,当我上传项目的时候提示我超出限制,那能想到的就是减小echarts.js的体积和分包两个能即时见效的方法了。
echarts.js体积大的问题
在echarts的官网有按需构建的方法(传送门---在线定制),进入下面的在线定制,选择自己需要图,我就选了折线图,坐标系选了直角坐标系,组件里除了刷选,工具栏和自定义图形外别的都选了,其它选项把svg也勾上了,然后点击下载进入building页面,这里等它构建完成会自动下载一个echarts.min.js文件,大小最后少了200来KiB。然后把它重命名成echarts.js替换进ec-canvas里。
上传项目2MiB限制问题
echarts.js的体积减少了,但是上传的限制问题还在,那就是分包了。
在app.json里面,有一个subpackages
{ "subPackages": [ { "root": "xxx/xxx", "name": "xxx", "independent": false, "pages": [ "pages/xxx", "pages/xxx", "pages/xxx" ] }, { "root": "baoziTask/", "name": "baozi", "pages": [ "pages/roubaozi/roubaozi" ] } ], }
这个分包在官网上讲的挺简单的,但是在我使用时是这样理解的。
root是要分包的路径,我是放到根目录的。那么baoziTask下的所有文件都会被认为是一个包。那不在这个baoziTask路径下的文件都会被打包进app这个主包内。
name就是分包的别名,预下载的时候会用,这个预下载就当在某个页面的时候,想主动下载这个可能被使用的分包,以提高访问速度。比如当我进入某个页面的时候,很大可能会点击某处跳转到某个分包里面,这个时候可以预下载这个分包,而不用跳转的时候才下载这个分包。
independent是分包是否独立,但是我没用过就没有直观的感觉。说是可以单独运行,不依赖app这个主包。这个需要配置,不是代码的下载,配置preloadRule,具体的话得看官网和自己尝试了。传送门---分包预下载
pages就更好理解了啊,就是包内的页面呗。
想要跳转到这些分包内的页面的时候给跳转的url写对路径就可以了,就比如跳转到roubaozi的时候url写⬇️面这样:
url: '/baoziTask/pages/roubaozi/roubaozi'
那怎么查看分包成功呢?
在开发者工具右上角有一个详情按钮,点击查看详情侧滑框,可以看到"本地代码"这一行,后面的大小可以点击,点击后可以看到主包和各个分包的大小。看到主包没有超过2MiB的话,那就可以上传成功了!
群众:为什么你要在KB和MB中间加个 i ?小傲娇:因为要准确表达是1024
总结
到此这篇关于微信小程序使用Echarts和分包的文章就介绍到这了,更多相关微信小程序Echarts和分包内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-05-09
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下...2016-10-25
- 众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下...2021-08-06