3D 雷达图
组件名称:3D雷达图
组件样式:
组件说明:
如果大屏使用此组件展示,建议使用配置较高的主机。
请求方式:POST
https://report.tingyun.com/example/browser/ux-score.json
参数:
字段 | 类型 | 描述 | 是否必选 |
---|---|---|---|
currentTime | Number | 当前时间戳。 | 是 |
token | String | 盐值,校验规则为md5(timePeriod+currentTime+配置的token), 例如:timePeriod为30,currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 |
否 |
timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据:
字段 | 类型 | 描述 |
---|---|---|
code | Number | 状态码。 |
msg | String | 状态描述。 |
data | Object | 数据对象。 |
value | String | 数据对象。 |
indicator | Object[] | 雷达图指标配置,只支持6个指标。 |
name | String | 指标名称。 |
max | String | 指标最大值。 |
series | Object[] | |
name | Number | 名称。 |
value | Object[] | 格指标数据,跟指标配置一一对应。 |
示例:
HTTP/1.1 200 OK
{
"code": 200,
"msg": "success",
"data": {
"value": 100.0,
"indicator": [
{
"name": "白屏",
"max": 100
},
{
"name": "慢页面占比",
"max": 100
},
{
"name": "可交互",
"max": 100
},
{
"name": "操作时间",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "首屏",
"max": 100
}
],
"series": [
{
"name": "用户体验评分",
"value": [
100,
100,
100,
100,
98,
100
]
}
]
}
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为5列,字段名称可以任意指定,但是字段顺序不能改变:
字段顺序 | 类型 | 描述 |
---|---|---|
value1 | Number | 雷达图数值 |
name1 | String | 指标名称 |
max | Number | 指标最大值 |
name2 | String | 数据名称 |
value2 | Number | 数据值 |
以MySQL为例,SQL示例如下:
SELECT value1, name1, max, name2, value2 FROM radar_test
CSV示例如下:
value1,name1,max,name2,value2
15,1响应时间,100,数据一1,72
15,2消耗流量,100,数据一1,74
15,3卡顿率,100,数据一1,43
15,4错误率,100,数据一1,60
15,5崩溃率,100,数据一1,78
15,6新增一列,100,数据一1,88
15,1响应时间,100,数据二2,61
15,2消耗流量,100,数据二2,57
15,3卡顿率,100,数据二2,82
15,4错误率,100,数据二2,48
15,5崩溃率,100,数据二2,40
15,6新增一列,100,数据二2,11