• ECharts 图表-beta
  • 介绍
• 使用方法
  • 1. 在项目中引用动态库
  • 2. 在使用到图表组件的页面配置动态库
  • 3. 编写 *.swan 文件
• 动态库属性列表
• 兼容性说明
  • 配置项
  • ECharts API 在动态库中的对应使用方法
  • formatter 的回调函数形式

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

全局方法

实例方法