ECharts 图表-beta

介绍

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

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

使用方法

1. 在项目中引用动态库

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

• JSON

"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文件如：

• JSON

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

3. 编写 *.swan 文件

• SWAN

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

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

• style也可以在*.css中声明，需要保证<chart>是有宽度和高度的。

• option在*.js中绑定到页面的 data 中。

• JS

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

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

• JS

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有效，对于其他名称的回调函数无效。

全局方法

实例方法