2021SC@SDUSC
目录
一、前言
本文分析的是，amis框架中的Chart图表
二、代码分析
基本用法
{
"type": "page",
"body": {
"type": "chart",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/chart/chart",
"interval": 5000
}
}
api 返回支持两种格式，一种是直接返回完整 echarts 配置，数据包含在配置里，具体格式请参考后面的静态数据写法，另一种是返回纯数据，具体请参考动态数据写法。
静态数据
在 config 里填写完整的 echarts 配置，这里的数据是静态的。
type": "page",
"body": {
"type": "chart",
"config": {
"title": {
"text": "极坐标双数值轴"
},
"legend": {
"data": [
"line"
]
},
"polar": {
"center": [
"50%",
"54%"
]
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross"
}
},
"angleAxis": {
"type": "value",
"startAngle": 0
},
"radiusAxis": {
"min": 0
},
"series": [
{
"coordinateSystem": "polar",
"name": "line",
"type": "line",
"showSymbol": false,
"data": [
[
0,
0
],
[
0.03487823687206265,
1
],
[
0.06958655048003272,
2
],
[
0.10395584540887964,
3
],
[
0.13781867790849958,
4
],
[
0.17101007166283433,
5
],
[
0.2033683215379001,
6
],
[
0.2347357813929454,
7
],
[
0.26495963211660245,
8
],
[
0.2938926261462365,
9
],
[
0.3213938048432697,
10
]
]
}
],
"animationDuration": 2000
},
"clickAction": {
"actionType": "dialog",
"dialog": {
"title": "详情",
"body": [
{
"type": "tpl",
"tpl": "<span>当前选中值 ${value|json}<span>"
},
{
"type": "chart",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/chart/chart1"
}
]
}
}
}
}
动态数据
如果要实现动态数据，需要在 config 中做调整
其中 api 返回内容是如下写法，可以看到通过数据映射语法，我们可以将 api 放回结果中的 line 字段作为折线的数据。
{
"status": 0,
"msg": "ok",
"data": {
"line": [65, 63, 10, 73, 42, 21]
}
}
除了 config 中的 data，config 里的其它属性也都支持数据映射，还能支持数据映射中的各种过滤器。
配置图标点击行为
可以通过配置"clickAction": {}，来指定图表节点的点击行为，支持 amis 的 行为。
然后在配置的行为中可以通过 数据链 获取到 echarts 鼠标事件 的值，例如下面例子中可以通过${value|json}获取到点击节点的传入的数据值
"type": "page",
"body": {
"type": "chart",
"config": {
"title": {
"text": "极坐标双数值轴"
},
"legend": {
"data": [
"line"
]
},
"polar": {
"center": [
"50%",
"54%"
]
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross"
}
},
"angleAxis": {
"type": "value",
"startAngle": 0
},
"radiusAxis": {
"min": 0
},
"series": [
{
"coordinateSystem": "polar",
"name": "line",
"type": "line",
"showSymbol": false,
"data": [
[
0,
0
],
[
0.03487823687206265,
1
],
[
0.06958655048003272,
2
],
[
0.10395584540887964,
3
],
[
0.13781867790849958,
4
],
[
0.17101007166283433,
5
],
[
0.2033683215379001,
6
],
[
0.2347357813929454,
7
],
[
0.26495963211660245,
8
],
[
0.2938926261462365,
9
],
[
0.3213938048432697,
10
]
]
}
],
"animationDuration": 2000
},
"clickAction": {
"actionType": "dialog",
"dialog": {
"title": "详情",
"body": [
{
"type": "tpl",
"tpl": "<span>当前选中值 ${value|json}<span>"
},
{
"type": "chart",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/chart/chart1"
}
]
}
}
}
}