百度智能小程序 Echarts 图表

ECharts 图表-beta

介绍

ECharts 动态库是智能小程序基于 ECharts 实现的图表动态库，提供了图表在小程序中的使用方法。如果在使用中碰到问题，可以在 Github 提问。

完整的示例程序参见：demo。

使用方法

1. 在项目中引用动态库

参考使用动态库中提供的方法，在 app.json 中增添一项 dynamicLib，与 pages 同级。

"dynamicLib": {
    "echartsLib": {
        "provider": "echarts_4_7_0"
    }
},

目前支持的版本：echarts_4_7_0、echarts_4_4_0，分别对应 ECharts 4.7.0 及 4.4.0 版本，建议使用较新的 echarts_4_7_0 版本。

2. 在使用到图表组件的页面配置动态库

在每个使用到图表组件的页面，配置 *.json 文件如：

{
    "usingSwanComponents": {
        "chart": "dynamicLib://echartsLib/chart"
    }
}

3. 编写 *.swan 文件

<chart option="{{ option }}" style="width: 100%; height: 500px; display: block"></chart>

这是一种最基本的配置方式。

• style 也可以在 *.css 中声明，需要保证 <chart> 是有宽度和高度的。
• option 在 *.js 中绑定到页面的 data 中。

  const option = ...;
  
  Page({
      data: {
          option: option
      }
  });

其中，option 是一个图表配置项，定义了图表的内容和样式。由于本图表组件使用了 ECharts 作为底层实现，所以这个 option 就对应 ECharts 的配置项。一个简单的折线图的配置项可能是这样的——

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

如果你不知道如何编写配置项，可以在 Echarts 官网或 Echarts 社区找到相似的例子，结合 Echarts 配置项文档模仿修改。

动态库属性列表

<chart> 上支持的属性包括：

兼容性说明

以下说明 ECharts 的配置项和 API 与本动态库的差别。

配置项

本动态库支持绝大部分的 ECharts 配置，已知不支持的配置项包括：

• toolbox.feature.dataView

ECharts API 在动态库中的对应使用方法

ECharts 的 API 通过其他方式提供，开发者不能直接访问到全局变量 echarts 和图表实例。

以下具体说明在 ECharts 的 API 在本动态库中对应的用法。

formatter 的回调函数形式

由于无法向动态库传递 function，因此不能直接使用 ECharts 中回调形式的 formatter（如 option.tooltip.formatter）。所以，从 echarts_4_7_0 版本开始，我们提供了字符串模板以解决这个问题。例子参见「定制 formatter」，字符串模板参数是 ${params}，模板语法详见 etpl 模板语法。

该方法对于配置项中所有层级的 formatter 有效，对于其他名称的回调函数无效。

全局方法

实例方法