小程序Echarts图表集成与分包优化实战教程

前言

假期虽已结束，但影响仍在（比如腹部的赘肉）。我的假期预研任务是在小程序中实现数据图形化展示。经调研Ucharts、F2、Wx-charts及Echarts等库，最终仅尝试了F2和Echarts。鉴于Echarts近期更新频繁且我对该库更为熟悉，故选定Echarts作为解决方案，F2虽已实现但因熟悉度不足而放弃。

进入正题

参考他人文章中的Echarts官网链接，我直接查阅了官方文档，步骤相对简单，此处也提供相关链接。主要实施步骤如下：

1、下载官网示例代码。

2、将示例代码中的ec-canvas文件夹复制至项目目录。

3、在具体页面中，像使用普通组件一样引入ec-canvas。

4、在具体页面的JS文件中完成初始化配置。

下载官网示例后，找到包含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变量的作用在于处理异步数据获取后的动态渲染。当获取到数据后，利用该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，点击构建。等待构建完成后自动下载echarts.min.js文件，体积减少约200KiB。将其重命名为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下的所有文件被视为一个独立包，未在此路径下的文件均打包至app主包内。

name为分包别名，用于预下载配置。预下载旨在用户进入某页面时，主动下载可能跳转的分包以提升访问速度。例如，当用户进入某页面且大概率会点击跳转至分包页面时，可预先下载该分包，避免跳转时才下载。

independent标识分包是否独立，我未实际使用，故无直观感受。该配置允许分包单独运行，不依赖app主包。需通过配置preloadRule实现，具体需参考官网及自行尝试。链接：分包预下载。

pages字段易于理解，即包内包含的页面路径。

跳转至分包内页面时，需正确编写跳转URL，例如跳转至roubaozi页面时URL如下：


url: '/baoziTask/pages/roubaozi/roubaozi'

如何验证分包是否成功？

在开发者工具右上角点击“详情”按钮，展开侧滑框，查看“本地代码”一行。点击大小数值，可查看主包及各分包的具体大小。若主包未超过2MiB，则上传成功。

群众疑问：为何在KB和MB间加i？小傲娇回答：为了准确表达1024进制。

总结

至此，关于微信小程序使用Echarts和分包的文章介绍完毕。更多相关微信小程序Echarts和分包内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

微信小程序集成Echarts与分包配置的完整指南

前言

进入正题

echarts.js体积过大与上传项目2MiB限制问题

echarts.js体积优化

上传项目2MiB限制解决

总结

实用工具推荐