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

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

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

如何使用：

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

// 引入组件
{
  "usingComponents": {
    "ec-canvas": "../components/ec-canvas/ec-canvas"
  }
}
// 页面中使用

  

  
// 页面的js文件
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
    }
  }
});

这里是一些使用说明：

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

最佳实践推荐设置：

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

小程序示例代码：https://developers.weixin.qq.com/s/mt5w4Tmr7vM9

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

如何使用：

可参见此文章及对应插件文档。

该插件提供两种方式

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

下方为使用轻量版的

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

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

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

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

4.在页面中使用

最佳实践推荐设置：

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

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

小程序示例代码：https://developers.weixin.qq.com/s/lEa5U2mW7ZNN

方案比较

整体小程序包体积比较

体积接近

优缺点

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

推荐方案

• 综上，推荐方案一：官方方案（echarts-for-weixin）
• 可按实际需求进行灵活封装，针对不同场景进行数据更新和实例的销毁：可参考https://juejin.cn/post/7303587697100242982-Vue2中ECharts简单封装的一种实践-详
• 常见问题及不支持的特性见github

进一步的实践可以看下篇：小程序中使用ECharts的一种实践 - 落地篇

如有更好的想法和思考，欢迎评论交流。

参考：

• [开盖即食]小程序图表插件 ECharts 实战 | 微信开放社区
• 在微信小程序中使用 ECharts - Apache Echarts
• https://github.com/ecomfe/echarts-for-weixin
• 微信小程序中使用echarts以及踩坑总结
• 微信小程序使用Echarts和分包的完整步骤
• 小程序快速接入 ECharts 图表插件功能 | 微信开放社区
• ECharts图表组件 | 小程序插件 | 微信公众平台