彩条指标
组件名称:彩条指标
组件样式:
组件说明: 传入数据条数可以是1-n条,每行的显示数量会根据宽度自适应。 每个柱子的颜色可以通过接口来直接定义,也可以在组件中配置。
请求方式:POST
https://doc.tingyun.com/sense/example/colorsbarsd3.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 | 值,必须是数字类型 | 
| color | String | bar的颜色, "#77E5FF" | 
value如果包含小数,在组件中会四舍五入的显示整数。 color可以通过接口传入,也可以在组件中直接配置。组件中配置的颜色优先级高于接口传入的颜色值。
示例:
 { 
    "series": [        
        { "name": "完成业务数","unit":"笔", "value": "25983542", "color":"#77E5FF"},
        { "name": "报错业务数","unit":"笔", "value": "695", "color":"#F30B49"},
        { "name": "错误影响用户数","unit":"个", "value": "152", "color":"#FF3B3B"},
        { "name": "平均响应时间","unit":"ms", "value": "59", "color":"#15F4D1"}
    ]
}
数据库接入、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