3D 堆叠柱状图
组件名称:3D堆叠柱状图
组件样式:
样式1:该样式是固定格式(高度定制)的样式,API要求严格,图例必须是4个,数据必须分组两组,且每组里面有两组数据。
样式2:该样式数据配置比较灵活,数据部分在图例和数据的数量都不固定。通过不同的API字段来控制样式,如果在组件创建之后切换了API,需要保存后刷新才能生效。
组件说明:
堆叠柱状图返回格式,data.series必须返回两条数据 。
请求方式:POST
https://report.tingyun.com/example/stackbar.json
参数:
字段 | 类型 | 描述 | 是否必选 |
---|---|---|---|
currentTime | Number | 当前时间戳。 | 是 |
token | String | 盐值,校验规则为md5(timePeriod+currentTime+ 配置的token), 例如:timePeriod为30,currentTime为 1513137332798,token为abc,则应对 301513137332798abc进行md5。 |
否 |
timePeriod | Number | 时间范围分钟数。 | 是 |
样式1正确响应数据:
字段 | 类型 | 描述 |
---|---|---|
status | Number | 状态码 |
data | Object | |
max | String | Y轴最大值 |
legend | Object[] | 图例 |
name | String | 图例名称 |
series | Object[] | 数据 |
id | String | id |
totalname | String | 名称1 |
total | Number | 名称1数字 |
relatedname | String | 名称2 |
related | Number | 名称2数字 |
series | Object[] | 堆叠图数据 |
name | String | 名称 |
list | Object[] | 数据集 |
示例:
样式1:
HTTP/1.1 200 OK
{
"status": 200,
"data": {
"max": 200,
"legend": [
{
"name": "Critical"
},
{
"name": "Major"
},
{
"name": "Mimor"
},
{
"name": "Non-fault inquity"
}
],
"series": [
{
"id": 1,
"totalname": "ICTSM Total",
"total": 90,
"relatedname": "Related Project QTY",
"related": 47,
"series": [
{
"name": "L2",
"list": [
48,
12,
28,
36
]
},
{
"name": "L3",
"list": [
48,
29,
44,
24
]
}
]
},
{
"id": 2,
"totalname": "ICTOM Total",
"total": 99,
"relatedname": "Related Project QTY",
"related": 67,
"series": [
{
"name": "L2",
"list": [
43,
38,
18,
7
]
},
{
"name": "L3",
"list": [
23,
29,
29,
27
]
}
]
}
]
}
}
样式2正确响应数据:
字段 | 类型 | 描述 |
---|---|---|
status | Number | 状态码 |
data | Object | |
max | String | Y轴最大值 |
legend | Object[] | 图例 |
name | String | 图例名称 |
series | Object[] | 数据 |
id | String | id |
singseries | Object[] | 堆叠图数据 |
name | String | 名称 |
list | Object[] | 数据集 |
样式2:
HTTP/1.1 200 OK
{
"status": 200,
"data": {
"max": 200,
"legend": [
{
"name": "Critical"
},
{
"name": "Major"
},
{
"name": "Mimor"
},
{
"name": "Non-fault inquity"
}
],
"singseries":{
"id": 1,
"series": [
{
"name": "L1",
"list": [
20,
30,
40,
50
]
},
{
"name": "L2",
"list": [
30,
0,
50,
0
]
},
{
"name": "L3",
"list": [
30,
0,
50,
20
]
},
{
"name": "L4",
"list": [
30,
10,
50,
20
]
}
]
}
}
}