标签：config 代码 chart 笔记 data api line type amis
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"
}
]
}
}
}
}
标签：config,代码,chart,笔记,data,api,line,type,amis 来源： https://blog.csdn.net/m0_55689825/article/details/121194374
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。