# ChartSpace 图表组件
ChartSpace 是一套图表组件，组件中提供了一系列常用图表，并提供高度灵活的开发扩展能力，帮助你快速搭建属于自己的图表分析应用。
**注意事项**：ChartSpace 已升级至 VChart，如果你是新用户，欢迎使用 [VChart](https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/block)。如果你是 ChartSpace 用户，欢迎升级至 VChart，如何升级详见[如何升级 VChart](https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/component/extend/how-to-upgrade-to-vchart)。
## 体验组件示例效果
开放平台提供了[小程序示例代码包](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/ff6ce2130e14dedc19f8cf0c6f116f48_6Z2hAxfujd.zip)，你可以将代码包下载到本地，并使用[飞书开发者工具](https://open.feishu.cn/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN)导入代码包，以体验 ChartSpace 组件的示例效果。
关于示例代码包的导入和运行方法，可参见[示例代码使用说明](https://open.feishu.cn/document/uYjL24iN/uYDM04iNwQjL2ADN#c0e6747)。成功运行示例小程序后，图表的示例效果如下所示。
## 使用限制
ChartSpace 图表组件对飞书版本、开发环境均有要求，本章节为你提供相关的限制说明。
### 飞书版本要求
ChartSpace 图表组件支持飞书 V3.45 及以上的版本。
当你需要正式发布应用前，建议登录[开发者后台](https://open.feishu.cn/app)，在对应的小程序应用中进入 **应用能力** > **小程序** 功能页，将 **小程序配置** 中的 **最低兼容飞书版本** 设置为 3.45。当用户的飞书版本过低的时候，会提示用户更新。
### 开发环境要求
飞书小程序需要使用[飞书开发者工具](https://open.feishu.cn/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN)进行开发调试，并上传至飞书开发者后台的应用中。
## 使用组件
在使用 ChartSpace 飞书小程序组件库前，请确保你已经了解小程序的开发流程以及小程序的配置项。详情可参见[开发小程序](https://open.feishu.cn/document/home/develop-a-gadget-in-5-minutes/create-a-custom-app)和配置小程序（[全局配置](https://open.feishu.cn/document/uYjL24iN/uEDNuEDNuEDN)、[页面配置](https://open.feishu.cn/document/uYjL24iN/ucjL34yN/config-applet/page-config)）。
飞书小程序目前内置了 ChartSpace 图表库（即原生图表库），具体使用方式如下：
1. 调整 app.json 配置。
```json
"useExtendedLib": {
"chartSpace": true
}
```
2. 在使用的页面 json 配置中，增加如下代码。
```json
"usingComponents": {
"chart-space": "/lark-chartspace/index"
}
```
3. 在对应的 ttml 中使用 ``。
```html
```
4. 在对应的 index.js 中配置数据。
```js
Page({
data: {
spec: {
type: "line",
data: [
{
name: "line",
values: [
{
x: "1号",
y: 0.012
},
{
x: "2号",
y: -0.01
},
{
x: "3号",
y: 0.005
},
{
x: "4号",
y: 0.007
}
]
}
],
xField: "x",
yField: "y",
},
events: [
{
element: "chart",
type: "touchstart",
handler: (event, datum) => {
console.log(event, datum);
}
}
],
styles: null
},
onChartInit(chart) {
console.log('chart 实例初始化完成', chart);
},
onChartReady(chart) {
console.log('chart 实例渲染完成', chart);
},
});
```
其中:
- `spec` 是 ChartSpace 的核心概念，与 `echarts`的`option` 类似，是一个用来描述图表的对象。
- `options` 为一些额外的参数类型，目前支持的有 `tooltipRenderMode` 选项，如果需要自定义 tooltip，可以使用该字段。
- `chartinit` 是一个回调函数，在图表初始化完成后调用，其中的入参 `instance` 为图表的实例，可用于注册事件、主题等。
- `chartready` 是一个回调函数，在图表完成渲染后调用。
- `events` 是一个数组，用于注册一系列事件。
## 暂不支持的功能
飞书小程序现阶段基于序列化的问题，暂不支持在 setData 以及 triggerEvent 中传递复杂的对象及函数，只支持可序列化的数据。因此，events 功能、chartinit 回调参数、chartready 回调参数暂不可用。
如果你需要使用 chart 实例的功能，目前可以通过 [Component 构造器](https://open.feishu.cn/document/uYjL24iN/uADMx4CMwEjLwATM) 中提供的 selectComponent 方法解决。示例操作如下：
1. 为组件 `` 标明 id 属性。
2. 通过 `selectComponent` 方法获取图表实例。
示例代码配置如下：
```javascript
onChartReady() {
console.log('chart 实例渲染完成');
this.selectComponent("#chart1", res => {
const chartInstance = res && res.ttCanvas && res.ttCanvas.chart;
...
});
},
```