彩色进度条
组件名称:彩色进度条
组件样式:
组件说明: 环的多少通过数据的条数来决定。 每个环的颜色可以通过接口来直接定义,也可以在组件中配置。
请求方式:POST
https://doc.tingyun.com/sense/example/piegroupd3.json
参数:
字段 | 类型 | 描述 | 是否必选 |
---|---|---|---|
currentTime | Number | 当前时间戳 | 是 |
token | String | 盐值,校验规则为md5(timePeriod+currentTime+ 配置的token), 例如:timePeriod为30,currentTime为 1513137332798,token为abc,则应对 301513137332798abc进行md5 |
否 |
timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据:
字段 | 类型 | 描述 |
---|---|---|
series | Array | 可以是任意条数据 |
name | String | 名称 |
unit | String | 单位,一般是% |
value | Number | 值,必须是数字类型 0-100 |
color | String | bar的颜色, "#77E5FF" |
unit单位%,对应的值是0-100之间的数组。 value如果包含小数,在组件中会四舍五入的显示整数。 color可以通过接口传入,也可以在组件中直接配置。组件中配置的颜色优先级高于接口传入的颜色值。
示例
{
"series": [
{ "name": "营收一部","unit":"%", "value": 80, "color":"#2BBBFF"},
{ "name": "财务部门","unit":"%", "value": 36, "color":"#EDFF77"},
{ "name": "运营二部","unit":"%", "value": 26, "color":"#7639FF"},
{ "name": "订单提交","unit":"%", "value": 76, "color":"#88FF77"},
{ "name": "销售部门","unit":"%", "value": 32, "color":"#DB5A5A"}
]
}
unit单位通常为%。也可以填写其他的单位,但是当填写其他单位的时候,环就会变成一个100%状态的环,不再对应百分比。
{
"series": [
{ "name": "营收一部","unit":"%", "value": 80, "color":"#2BBBFF"},
{ "name": "财务部门","unit":"%", "value": 36, "color":"#EDFF77"},
{ "name": "运营二部","unit":"%", "value": 26, "color":"#7639FF"},
{ "name": "订单提交","unit":"ms", "value": 976, "color":"#88FF77"},
{ "name": "销售部门","unit":"ms", "value": 132, "color":"#DB5A5A"}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为4列,字段名称可以任意指定,但是字段顺序不能改变:
字段顺序 | 类型 | 描述 |
---|---|---|
name | String | 名称 |
unit | String | 单位 |
value | Number | 值 |
color | String | 颜色 |
以MySQL为例,SQL示例如下:
SELECT name, unit, value, color FROM color_metrics_test
CSV示例如下:
name,unit,value,color
完成业务数,笔,431,#77E5FF
报错业务数,笔,188,#F30B49
错误影响用户数,个,256,#FF3B3B
平均响应时间,ms,330,#15F4D1