小程序中使用ECharts的一种实践 - 基础篇

小程序中使用ECharts目前有两种方案，我们先看下两种方案的使用实践，之后看下两种方案的区别与优缺点，最后探讨我们目前应该使用哪种方案。

小程序包体积的提示：小程序单个分包/主包大小不能超过2M，整个小程序所有分包大小不超过20M

方案一：使用echarts-for-weixin中的官方组件

如何使用：

clone官方库 echarts-for-weixin 到本地，将其中的ec-canvas目录复制到自己项目的某个目录下（如components）
在自己的组件或页面中，按如下方式使用，

json 复制代码

{
  "usingComponents": {
    "ec-canvas": "../components/ec-canvas/ec-canvas"
  }
}

html 复制代码

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

javascript 复制代码

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素比
  });
  canvas.setChart(chart);
  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

这里是一些使用说明：

这里的ec是约定的配置对象，其中约定onInit为canvas组件就绪后的一个回调函数，在这里开发者可以完成获得echart实例，并将echart实例更新到canvas对象上，然后通过setOption可渲染不同的图表。
属性canvas-id不能相同
如果没有配置ec属性，可以监听init事件，同样可以得到对应的回调参数。
属性forceUseOldCanvas，为可配置是否使用旧版canvas，目前强烈不推荐使用，默认为false
通过小程序依赖分析可知，ec-canvas 文件夹大小为1006k, 如果直接使用，在只有一个页面的情况下，包体积也将是1010k。
如有必要，将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用自定义构建生成并替换 echarts.js

最佳实践推荐设置：

使用自定义构建生成并替换echarts.js ,如上面的示例，如果仅选择柱状图，则包体积将缩小到493k
将ec-canvas文件夹放在分包的目录中且使用ec-canvas的页面放在分包中，即可在减小主包体积

小程序示例代码 ：developers.weixin.qq.com/s/mt5w4Tmr7...

方案二：使用插件市场中的"ECharts图表组件"

如何使用：

可参见此文章及对应插件文档。该插件提供两种方式

v2.1.1 完整版，插件会计算到小程序的分包（主包）中，该完整版占用978.6k大小
v2.1.0 轻量版，没有ECharts依赖库，需自行引入，这里也可以使用官方的自定义构建以减小体积。体积会减少到500k左右

下方为使用轻量版的

在mp后台申请添加该插件
在app.json中添加该插件（可按需放在主包或分包中）

javascript 复制代码

  "subPackages": [
    {
      "root": "sub-pages/demos",
      "pages": [
        "index2/index2"
      ],
      "plugins": {
        "echarts": {
          "version": "2.1.0",
          "provider": "wx1db9e5ab1149ea03"
        }
      }
    }
  ]

javascript 复制代码

{
  "plugins": {
		"echarts": {
      "version": "2.1.0",
      "provider": "wx1db9e5ab1149ea03"
    }
	}
}

在使用的组件或页面中添加该插件

javascript 复制代码

{
  "usingComponents": {
    "chart": "plugin://echarts/chart"
  }
}

在页面中使用

javascript 复制代码

<chart chart-class="chart" id="chart-1" option="{{ option }}" bindinstance="onInstance" />

最佳实践推荐设置：

使用v2.1.0轻量版，并按需自定义构建引入ECharts文件（必须为v5.1.2版本）
将该插件配置到分包中，并在分包中使用该插件，将自定义构建的ECharts文件也放在分包中。

因为该插件需要小程序申请，正常预览需要切换为自己的已开通该插件的小程序的appId

小程序示例代码 ：developers.weixin.qq.com/s/lEa5U2mW7...

方案比较

整体小程序包体积比较

体积接近

优缺点

插件方式-版本为5.1.2，已经很新了，但不是最新版本，echarts-for-weixin可以使用最新版本
都支持自定义构建后按需使用

小程序中使用ECharts的一种实践 - 基础篇

方案一：使用echarts-for-weixin中的官方组件

如何使用：

最佳实践推荐设置：

方案二：使用插件市场中的"ECharts图表组件"

如何使用：

最佳实践推荐设置：

方案比较

整体小程序包体积比较

优缺点

推荐方案

参考：