小程序中使用 ECharts 图表组件

小程序中如果只是简单地展示图表，那么可以使用小程序插件“ECharts 图表组件”，插件开发文档，使用示例小程序如下：

ECharts Gallery

接入步骤

使用 “ECharts 图表” 插件，只需要三步即可

1、插件申请

首先要在小程序管理后台的 “设置-第三方服务-插件管理” 中添加插件。开发者可登录小程序管理后台，通过 wx1db9e5ab1149ea03 查找插件并添加。通过申请后，方可在小程序中使用相应的插件

2、引入插件配置

在 app.json 中插件如下代码，注意 AppId 为 wx1db9e5ab1149ea03

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

3、使用方式

在使用的页面中的 json 配置文件中，插件如下代码：

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

在 wxml 中需要展示图表的位置，插入如下代码：

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

其中 chart-class 为样式类，option 为 ECharts 中的 option 配置对象，bindinstance 会回调 ECharts 实例对象，如果需要操作 ECharts 实例对象可以实现此方法。

图例

ECharts Gallery 截图

注意

• 插件目前2.0版本使用的是全量的 ECharts 5.0.2 版本，总大小约 966KB，所以对包大小敏感的小程序慎重使用，当然可以通过拆包等方式改善此问题。
• 插件使用过程中有任何问题欢迎随时反馈给我。