正文

微信小程序使用Echarts和分包的完整步骤

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0720

这篇文章主要给大家介绍了关于微信小程序使用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

?
1
2
3
4
5
{
 "usingComponents": {
 "ec-canvas": "xxx/xxx/xxx/ec-canvas/ec-canvas"
 }
}

xxx.wxml

?
1
2
3
<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。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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就用上了。

?
1
2
3
4
5
6
7
8
9
10
11
12
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

?
1
2
3
data: {
 isUseNewCanvas: true // 这里改成true， 默认是false
}

因为：isUseNewCanvas默认是false，是旧版的canvas。

?
1
2
3
4
<!-- 新的：接口对其了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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
 "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写⬇️面这样：

?
1
url: '/baoziTask/pages/roubaozi/roubaozi'

那怎么查看分包成功呢？

在开发者工具右上角有一个详情按钮，点击查看详情侧滑框，可以看到"本地代码"这一行，后面的大小可以点击，点击后可以看到主包和各个分包的大小。看到主包没有超过2MiB的话，那就可以上传成功了！

群众：为什么你要在KB和MB中间加个 i ？小傲娇：因为要准确表达是1024

总结

到此这篇关于微信小程序使用Echarts和分包的文章就介绍到这了,更多相关微信小程序Echarts和分包内容请搜索米米素材网以前的文章或继续浏览下面的相关文章希望大家以后多多支持米米素材网！

原文链接：https://juejin.cn/post/6931230680898600968