大屏
饼图
饼图
组件名称：饼图
组件样式：
组件说明：
饼图（非3D饼图）。
请求方式：POST
https://report.tingyun.com/example/pie.json
参数：
| 字段 | 类型 | 是否必选 | 描述 |
|---|---|---|---|
| currentTime | Number | 是 | 当前时间戳。 |
| token | String | 否 | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5运算。 |
| timePeriod | Number | 是 | 时间范围分钟数。 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回。 |
| unit | String | 单位。 |
| series | Object[] | 数据对象。 |
| name | String | 数据项名称。 |
| data | Object[] | 数据项。 |
| name | Number | 数据项展示。 |
| value | Number | 性能指标。 |
示例：
HTTP/1.1 200 OK
{
"value": 1.68,
"unit": "秒",
"series": [
{
"name": "DNS",
"data": [
{
"name": "wgz",
"value": 16
},
{
"name": "wgz2",
"value": 6
}
]
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name1 | String | 数据名称 |
| name2 | String | 数据项名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name1, name2, value FROM proportion_test
CSV示例如下：
name1,name2,value
DNS,错误率,111
DNS,吞吐率,222
3D 饼图
组件名称：3D饼图
组件样式：
组件说明：
3D饼图，适用于百分比数据，最多支持6条数据。如果大屏使用此组件展示，建议使用配置较高的主机。
请求方式：POST
https://report.tingyun.com/example/browser/access-mode.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[] | 数据对象 |
| name | String | 名称 |
| value | Number | 值 |
示例：
HTTP/1.1 200 OK
{
"code": 200,
"msg": "success",
"data": [
{
"name": "PC",
"value": 60.53
},
{
"name": "移动端",
"value": 6.58
},
{
"name": "微信",
"value": 32.89
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为4列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name | String | 名称 |
| value | Number | 百分比 |
| score | Number | 值 |
| pv | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name, value, score, pv FROM pie_3d_chart_test
CSV示例如下：
name,value,score,pv
PC,11,12,1122
移动端,21,22,2122
微信,31,32,3122
彩色进度条
**组件名称：**彩色进度条
组件样式：
组件说明： 环的多少通过数据的条数来决定。 每个环的颜色可以通过接口来直接定义，也可以在组件中配置。
请求方式：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
立体占比图
**组件名称：**立体占比图
组件样式：
组件说明： 可以传多条数据，每个数据的颜色可以通过接口来直接定义，也可以在组件中配置。
请求方式：POST
https://doc.tingyun.com/sense/example/d33dpies.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 可以是任意条数据 |
| name | String | 名称 |
| value | Number | 值，必须是数字类型 |
| color | String | 颜色， "#77E5FF" |
示例：
{
"series": [
{ "name": "营收一部", "value": 89, "color": "#23C8F0" },
{ "name": "财务部门", "value": 55, "color": "#FFDB48" },
{ "name": "运营二部", "value": 68, "color": "#02F0F1" },
{ "name": "订单提交", "value": 50, "color": "#17CDF9" },
{ "name": "销售部门", "value": 45, "color": "#14AFD5" }
]
}
数据库接入、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
ECharts饼图
**组件名称：**ECharts折线图
组件样式：
组件说明：
基于echarts4.X开发，可参考echarts官方文档。
请求方式：POST
https://doc.tingyun.com/sense/example/sense3LineChar.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| source | 二维数组 | 参考echarts的dataset |
数据格式可参考echarts4.X的dataset：[https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE](https://echarts.apache.org/zh/tutorial.html#使用 dataset 管理数据)
该组件的series有两个用于轮播显示中间的名称，由于轮播的导致该组件的开发者配置中可配置项并不灵活。右侧的图例上面数值，下面的文字的样式是在代码中固定死的legend.formatter，在配置中不可修改。
示例:
{
"source": [
[
"正常请求次数",
"满请求次数",
"错误请求次数"
],
[
3168,
3901,
4164
]
]
}
3D 单个指标饼图
组件名称：单个指标饼图
组件样式：
组件说明：
单个指标饼图。如果大屏使用此组件展示，建议使用配置较高的主机。
请求方式：POST
https://report.tingyun.com/example/browser/performance-list.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[] | |
| name | String | 指标名称 |
| unit | String | 指标单位 |
| value | String | 值 |
示例：
HTTP/1.1 200 OK
{
"code": 200,
"msg": "success",
"data": [
{
"name": "首屏",
"unit": "ms",
"value": 1000
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name | String | 名称 |
| value | Number | 值 |
| unit | String | 单位 |
以MySQL为例，SQL示例如下：
SELECT name, value, unit FROM pie_chart_test
CSV示例如下：
name,value,unit
首屏,50,ms
迷你饼图
组件名称：迷你饼图
组件样式：
组件说明：
迷你饼图，legend是必须字段，后面饼图的个数和图例的长度相关。
请求方式：POST
https://doc.tingyun.com/example/minipies.json
参数：
| 字段 | 类型 | 是否必选 | 描述 |
|---|---|---|---|
| currentTime | Number | 是 | 当前时间戳。 |
| token | String | 否 | 盐值，用于校验参数的完整性。校验规则为md5(timePeriod+currentTime+配置的token)。例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行MD5运算。 |
| timePeriod | Number | 是 | 时间范围分钟数。 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| legend | Array | 图例，图例的长度和 series中data的长度保持一致 |
| name | String | 图例名称 |
| series | Array | 数据 |
| name | String | 数据名称 |
| data | Array | 数组的每一项必须是数字类型 |
| 示例： |
{
"legend": [
{
"name": "新增用户"
},
{
"name": "活跃设备"
},
{
"name": "启动次数"
}
],
"series": [
{
"name": "V1.2.23",
"data": [
10,
20,
30
]
},
{
"name": "V2.2.10",
"data": [
20,
30,
30
]
},
{
"name": "V3.0.0",
"data": [
30,
40,
10
]
}
]
}
柱状图
柱状图
组件名称：柱状图
组件样式：
组件说明：
类目轴，适用于离散的类目数据返回格式，如柱状图。
请求方式：POST
https://report.tingyun.com/example/category.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回。 |
| xAxis | Object[] | 默认横坐标配置。 |
| type | String | 横坐标轴类型,可以为空，默认为category。 |
| data | Object[] | 横坐标轴数据。 |
| yAxis | Object[] | 默认纵坐标配置，可以不传入该参数则默认只存在一个纵坐标轴，并且类型(type)为vlaue，名称(name)为空。 |
| type | String | 纵坐标轴类型,可以为空，默认为value。 |
| name | String | 纵坐标轴名称,可以为空，对应到大屏项目为单位。 |
| forward | String | 图的方向，0:横向 1:纵项， 可以不存在，默认为0。 |
| stacked | String | series中的bar图是否堆叠，0为不堆叠，1为堆叠 可以不存在，默认为0。 |
| area | String | series中的line图是否堆叠，0为不堆叠，1为堆叠 可以不存在，默认为0。 |
| series | Object[] | 数据对象。 |
| name | String | 数据项名称。 |
| type | String | 横坐标图形，支持line、bar，默认为line，可以不存在。 |
| data | Number[] | 数据项 具体数据和category的长度相同。 |
| yAxisIndex | Number | 数据项使用哪个坐标轴，以0开始，可以不存在，默认为0。 |
示例：
HTTP/1.1 200 OK
{
"value": 123,
"xAxis": [
{
"type": "category",
"data": [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
]
}
],
"yAxis": [
{
"type": "value",
"name": "秒"
},
{
"type": "value",
"name": "次"
}
],
"forward": 0,
"stack": 0,
"area": 0,
"series": [
{
"name": "响应时间",
"type": "line",
"data": [
2.6,
5.9,
9,
26.4,
28.7,
70.7,
175.6,
182.2,
48.7,
18.8,
6,
2.3
]
},
{
"name": "访问量",
"type": "bar",
"yAxisIndex": 1,
"data": [
2,
4.9,
7,
23.2,
25.6,
76.7,
135.6,
162.2,
32.6,
20,
6.4,
3.3
]
}
]
}
3D 柱状图
组件名称：3D柱状图
组件样式：
组件说明：
3D柱状，图适用于时间序列数据格式，只支持一组数据。如果大屏使用此组件展示，建议使用配置较高的主机。
请求方式：POST
https://report.tingyun.com/example/browser/ls-uv.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 | 数据对象。 |
| series | Object[] | |
| data | Object[] | |
| x | Number | x轴数据，只支持时间戳。 |
| y | Number | y轴数据。 |
| name | String | 指标名称。 |
| type | String | 图表类型，只支持column。 |
| yAxis | String | y轴下标。 |
| yAxis | Object[] | y轴配置。 |
| tickUnit | String | y轴单位。 |
示例：
HTTP/1.1 200 OK
{
"code": 200,
"msg": "success",
"data": {
"series": [
{
"data": [
{
"x": 1556005200000,
"y": 3
},
{
"x": 1556005260000,
"y": 13
},
{
"x": 1556005320000,
"y": 4
}
],
"name": "UV",
"type": "column",
"yAxis": 0
}
],
"yAxis": [
{
"tickUnit": "次"
}
]
}
}
3D柱状图2
组件名称：3D柱状图2
组件样式：
组件说明：
无
请求方式：POST
https://doc.tingyun.com/sense/example/bard33ds1.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| title | String | 标题名称，可选参数 |
| total | Number | 总和，可选参数 |
| series | Array | 可以是任意条数据 |
| name | String | 名称 |
| unit | String | 单位，%、ms等。可选参数 |
| value | Number | 数字类型 |
| color | String | bar的颜色， "#77E5FF"。可选参数 |
示例：
{
"title": "业务系统数",
"total": 49,
"series": [
{
"name": "正常",
"unit": "个",
"value": 30
},
{
"name": "严重",
"unit": "个",
"value": 9
},
{
"name": "未知",
"unit": "个",
"value": 10
}
]
}
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
]
}
]
}
}
}
彩色柱状图
**组件名称：**彩色柱状图
组件样式：
组件说明： 行数由数据的条数来决定。行间距可以在组件中配置。 每个柱子的颜色可以通过接口来直接定义，也可以在组件中配置。
请求方式：POST
https://doc.tingyun.com/sense/example/barbpi.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 可以是任意条数据 |
| name | String | 名称 |
| value | Number | 值，必须是数字类型 |
| color | String | bar的颜色， "#77E5FF" |
value如果包含小数，在组件中会四舍五入的显示整数。 color可以通过接口传入，也可以在组件中直接配置。组件中配置的颜色优先级高于接口传入的颜色值。
示例：
{
"series": [
{ "name": "营收一部", "value": 1000, "color": "77E5FF" },
{ "name": "财务部门", "value": 25966, "color": "#EDFF77" },
{ "name": "运营二部", "value": 145896, "color": "#7639FF" },
{ "name": "订单提交", "value": 245896, "color": "#88FF77" },
{ "name": "销售部门", "value": 78526, "color": "#FF7042" },
{ "name": "营收一部1", "value": 2568, "color": "#77E5FF" },
{ "name": "财务部门2", "value": 9584, "color": "#EDFF77" },
{ "name": "运营二部3", "value": 545896, "color": "#7639FF" },
{ "name": "订单提交4", "value": 9849, "color": "#88FF77" },
{ "name": "销售部门5", "value": 58952, "color": "#FF7042" }
]
}
数据库接入、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
渐 变柱状图
**组件名称：**渐变柱状图
组件样式：
组件说明： 这是一个分组的数据。图例的数据决定每组数据的多少。 图例的颜色可以通过接口来直接定义，也可以在组件中配置。
请求方式：POST
https://doc.tingyun.com/sense/example/bargroupbpi.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| legend | Array | 图例数据,数组的长度就是series：value中数组的长度 |
| name | String | 图例名称 |
| color | String | 图例的颜色 |
| series | Array | 可以是任意条数据 |
| name | String | 数据名称 |
| value | Array | 数组中的值必须是数字，数组的长度要小于图例的长度 |
示例： 示例1：
{
"legend": [
{ "name": "成功", "color": "#36C5FF" },
{ "name": "失败", "color": "#F40C4A" }
],
"series": [
{ "name": "营收一部", "value": [50, 80] },
{ "name": "财务部门", "value": [10, 90] },
{ "name": "运营二部", "value": [70, 50] },
{ "name": "订单提交", "value": [90, 20] },
{ "name": "销售部门", "value": [50, 40] }
]
}
示例2：
{
"legend": [
{ "name": "成功", "color": "#36C5FF" },
{ "name": "失败", "color": "#F40C4A" },
{ "name": "未知", "color": "#FF0C2B" },
],
"series": [
{ "name": "营收一部", "value": [50, 80, 20] },
{ "name": "财务部门", "value": [10, 90, 10] },
{ "name": "运营二部", "value": [70, 50, 21] },
{ "name": "订单提交", "value": [90, 20, 45] },
{ "name": "销售部门", "value": [50, 40, 25] }
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为4列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name1 | String | 颜色含义 |
| color | String | 颜色 |
| name2 | String | 名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name1, color, name2, value FROM fade_bar_chart_test
CSV示例如下：
name1,color,name2,value
成功,#36C5FF,营收一部,600
失败,#F40C4A,营收一部,800
未知,#666666,营收一部,100
成功,#36C5FF,财务部门,300
失败,#F40C4A,财务部门,900
未知,#666666,财务部门,100
成功,#36C5FF,运营二部,400
失败,#F40C4A,运营二部,300
未知,#666666,运营二部,100
核心指标
**组件名称：**核心指标
组件样式：
组件说明：
行数由数据的条数来决定。行间距和矩形宽度可以在组件中配置。 每个柱子的颜色可以通过接口来直接定义，也可以在组件中配置。
请求方式：POST
https://doc.tingyun.com/sense/example/barcoreindex.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 | 单位，%、ms等。可选参数 |
| value | Number | 数字类型 |
| color | String | bar的颜色， "#77E5FF"。可选参数 |
| value支持小数。 | ||
| color可以通过接口传入，也可以在组件中直接配置。组件中配置的颜色优先级高于接口传入的颜色值。 |
示例1:
{
"series": [
{ "name": "操作耗时", "value": 1000},
{ "name": "操作次数","value": 800},
{ "name": "启动次数","value": 780},
{ "name": "启动时间","value": 600}
]
}
示例2:
{
"series": [
{
"name": "业务系统A",
"unit": "ms",
"value": 61
},
{
"name": "业务系统B",
"value": 18,
"unit": "ms"
},
{
"name": "业务系统C",
"unit": "ms",
"value": 27
},
{
"name": "业务系统D",
"unit": "ms",
"value": 21
},
{
"name": "业务系统E",
"unit": "ms",
"value": 63
}
]
}
折线图
折线图
组件名称：折线图
组件样式：
组件说明：
时序轴，适用于时间序列和数值数据返回格式，如折线图。
请求方式：POST
https://report.tingyun.com/example/time.json
参数：
| 字段 | 类型 | 是否必选 | 描述 |
|---|---|---|---|
| currentTime | Number | 是 | 当前时间戳。 |
| token | String | 否 | 盐值，用于校验参数的完整性。校验规则为md5(timePeriod+currentTime+配置的token)。例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行md5运算。 |
| timePeriod | Number | 是 | 时间范围分钟数。 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回。 |
| xAxis | Object[] | 默认横坐标配置，可以不传入该参数则默认只存在一个纵坐标轴，并且类型(type)为vlaue。 |
| type | String | 默认横坐标配置，并且类型(type)为vlaue，time为时序。 |
| yAxis | Object[] | 默认纵坐标配置，可以不传入该参数则默认只存在一个纵坐标轴，并且类型(type)为vlaue,名称(name)为空。 |
| type | String | 纵坐标轴类型,可以为空，默认为value。 |
| name | String | 纵坐标轴名称,可以为空，对应到大屏项目为单位。 |
| forward | String | 图的方向，0:横向 1：纵项, 可以不存在，默认为0。 |
| stacked | String | series中的bar图是否堆叠，0为不堆叠，1为堆叠 可以不存在，默认为0。 |
| area | String | series中的line图是否堆叠，0为不堆叠，1为堆叠 可以不存在，默认为0。 |
| series | Object[] | 数据对象。 |
| name | String | 数据项名称。 |
| type | String | 横坐标图形，支持line、bar，默认为line，可以不存在。 |
| data | Object[] | 数据项。 |
| x | Number | 数据项 横坐标数据。 |
| y | Number | 数据项 纵坐标数据。 |
| yAxisIndex | Number | 数据项使用哪个坐标轴，以0开始，可以不存在，默认为0。 |
| xAxisIndex | Number | 数据项使用X轴的哪个坐标轴，以0开始，可以不存在，默认为0。 |
示例：
HTTP/1.1 200 OK
{
"value": 123,
"xAxis": [
{
"type": "time"
}
],
"yAxis": [
{
"type": "value",
"name": "秒"
},
{
"type": "value",
"name": "次"
}
],
"forward": 0,
"stack": 0,
"area": 0,
"series": [
{
"name": "响应时间",
"type": "line",
"data": [
{
"x": 1544496360000,
"y": 122
},
{
"x": 1544496420000,
"y": 422
}
]
},
{
"name": "访问量",
"type": "bar",
"yAxisIndex": 1,
"data": [
{
"x": 1544496360000,
"y": 22
},
{
"x": 1544496420000,
"y": 122
}
]
}
]
}
折线图2
组件名称：折线图2
组件样式：
组件说明：
折线图，暂时最多支持5条数据。组件可以显示附加信息。组件在投屏状态支持鼠标交互。鼠标在坐标区域内移动会显示数值等信息，点击图例会隐藏该条数据。
请求方式：POST
https://doc.tingyun.com/sense/example/lineroewe.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 数据数组，最多5条。 |
| name | String | 名称 |
| data | Array | 数据 |
| x | Number | 数字类型，必须 |
| y | Number | 标准时间戳格式 |
| info | Object | 附加信息，会在组件中一直显示，建议少量使用。 |
| maintitle | String | 主标题 |
| subtitle | String | 副标题 |
示例：
{
"series": [
{
"name": "IOS",
"data": [
{
"y": 23,
"x": 1600150920000
},
{
"y": 68,
"x": 1600064520000
},
{
"y": 83,
"x": 1599978120000
},
{
"y": 70,
"x": 1599891720000
},
{
"y": 48,
"x": 1599805320000
},
{
"y": 63,
"x": 1599718920000
},
{
"y": 19,
"x": 1599632520000
},
{
"y": 66,
"x": 1599546120000
},
{
"y": 17,
"x": 1599459720000
},
{
"y": 98,
"x": 1599373320000
},
{
"y": 81,
"x": 1599286920000
},
{
"y": 63,
"x": 1599200520000
},
{
"y": 94,
"x": 1599114120000
},
{
"y": 24,
"x": 1599027720000
},
{
"y": 77,
"x": 1598941320000
}
]
},
{
"name": "Abdroid",
"data": [
{
"y": 69,
"x": 1600150920000
},
{
"y": 46,
"x": 1600064520000
},
{
"y": 55,
"x": 1599978120000
},
{
"y": 29,
"x": 1599891720000
},
{
"y": 20,
"x": 1599805320000
},
{
"y": 41,
"x": 1599718920000
},
{
"y": 16,
"x": 1599632520000
},
{
"y": 28,
"x": 1599546120000,
"info": {
"maintitle": "2.2.11111111",
"subtitle": "版本发布"
}
},
{
"y": 10,
"x": 1599459720000
},
{
"y": 67,
"x": 1599373320000
},
{
"y": 44,
"x": 1599286920000
},
{
"y": 94,
"x": 1599200520000
},
{
"y": 49,
"x": 1599114120000
},
{
"y": 22,
"x": 1599027720000
},
{
"y": 13,
"x": 1598941320000
}
]
}
]
}
ECharts折线图
组件名称 ：ECharts折线图
组件样式：
组件说明：
基于echarts4.X开发，可参考echarts官方文档。
请求方式：POST
https://doc.tingyun.com/sense/example/sense3LineChar2.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 类型 | 描述 |
|---|---|
| 二维数组 | 参考echarts的dataset |
数据格式可参考echarts4.X的dataset：[https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE](https://echarts.apache.org/zh/tutorial.html#使用 dataset 管理数据)
可在开发者配置中来配置数据的显示条数。echarts不会自动根据数据的条数来更新series配置，需要手动更新。
示例:
{
"source": [
[
"product",
"10:00",
"10:15",
"10:30",
"10:45",
"11:00"
],
[
"新增数",
789,
409,
674,
398,
814
],
[
"启动次数",
406,
375,
913,
540,
972
],
[
"活跃设备",
70,
278,
409,
340,
329
],
[
"使用时长",
671,
330,
875,
21,
728
]
]
}
折线面积图
组件名称：折线面积图
组件样式：
组件说明：
面积/折线图，支持面积和折线两种显示方式切换。 xAxis:data字段数组的长度需要和series中data字段的长度保持一致。
请求方式：POST
https://doc.tingyun.com/sense/example/linearea.json
参数：
| 字段 | 类型 | 是否必选 | 描述 |
|---|---|---|---|
| currentTime | Number | 是 | 当前时间戳。 |
| token | String | 否 | 盐值，用于校验参数的完整性。校验规则为md5(timePeriod+currentTime+配置的token)。例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行MD5运算。 |
| timePeriod | Number | 是 | 时间范围分钟数。 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| xAxis | Object | x轴 |
| data | Array | 数组，值为值字符串类型 |
| series | Array | 数据列，对应数据的条数 |
| name | String | 数据名称 |
| value | Number/String | 数据的值，可以传空 |
| data | Array | x轴坐标 |
示例：
{
"xAxis": {
"data": [
"Jan",
" ",
" ",
" ",
" ",
"Jun",
" ",
" ",
" ",
" ",
" ",
"Dec"
]
},
"series": [
{
"name": "One Web",
"value": 67,
"data": [
86,
47,
36,
93,
67,
33,
62,
80,
19,
43,
80,
53
]
},
{
"name": "Wechat Service Account",
"value": 47,
"data": [
53,
87,
45,
96,
37,
25,
20,
96,
22,
77,
91,
56
]
},
{
"name": "MB Miniprogram",
"value": 5,
"data": [
85,
39,
39,
55,
47,
10,
22,
66,
46,
93,
85,
20
]
}
]
}
迷你面积图
组件名称：迷你面积图
组件样式：
组件说明：
迷你面积图，支持多组数据和自定义列数。
请求方式：POST
https://doc.tingyun.com/example/miniareas.json
参数：
| 字段 | 类型 | 是否必选 | 描述 |
|---|---|---|---|
| currentTime | Number | 是 | 当前时间戳。 |
| token | String | 否 | 盐值，用于校验参数的完整性。校验规则为md5(timePeriod+currentTime+配置的token)。例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行MD5运算。 |
| timePeriod | Number | 是 | 时间范围分钟数。 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 数据 |
| name | String | 名称 |
| value | Number | 值 |
| unit | String | 单位 |
| data | Array | 数组的每一项必须是数字类型 |
示例：
{
"series": [
{
"name": "操作耗时",
"value": 89,
"unit": "ms",
"data": [
36,
4,
18,
33,
95,
46,
19,
34,
97,
40
]
},
{
"name": "可交互时间",
"value": 110,
"unit": "ms",
"data": [
88,
71,
51,
85,
37
]
},
{
"name": "操作次数",
"value": 427,
"data": [
17,
12,
42,
30,
26
]
},
{
"name": "打开次数",
"value": 1003,
"data": [
53,
86,
68,
99,
87
]
},
{
"name": "启动时间",
"value": 1025,
"unit": "ms",
"data": [
25,
48
]
},
{
"name": "请求响应时间",
"value": 1025,
"unit": "ms",
"data": [
35,
89
]
},
{
"name": "启动次数",
"value": 757,
"data": [
79,
98,
20,
5,
17
]
},
{
"name": "成功请求次数",
"value": 10426,
"unit": "次",
"data": [
98,
75,
90,
53,
77
]
}
]
}
轮播折线图
组件名称：轮播折线图
组件样式：
组件说明：
基于ECharts开发的轮 播折线图。用户可以通过灵活的配置实现各种ECharts图表。
默认配置中xAxis:"type"= "time"，即X轴默认为时间轴。如果要使用类目轴，需要配置type=category。series中data依然保持二维数组形式。具体配置信息可以参考ECharts官网。
请求方式：POST
https://doc.tingyun.com/sense/example/sense3LineCharplus.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分 钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| title | String | 标题 |
| series | Array | 参考ECharts的说明 |
示例：
[
{
"title": "核心服务1",
"series": [
{
"name": "Code-Filter1",
"type": "line",
"symbol": "none",
"data": [
[
1630925882877,
55
],
[
1630929482877,
68
],
[
1630933082877,
71
],
[
1630936682877,
30
],
[
1630940282877,
48
],
[
1630943882877,
39
],
[
1630947482877,
19
],
[
1630951082877,
31
],
[
1630954682877,
55
],
[
1630958282877,
56
],
[
1630961882877,
14
],
[
1630965482877,
56
],
[
1630969082877,
71
],
[
1630972682877,
60
],
[
1630976282877,
46
],
[
1630979882877,
52
],
[
1630983482877,
15
],
[
1630987082877,
27
],
[
1630990682877,
21
],
[
1630994282877,
7
]
]
},
{
"name": "Code-HotSpot1",
"type": "line",
"symbol": "none",
"data": [
[
1630925882877,
39
],
[
1630929482877,
32
],
[
1630933082877,
37
],
[
1630936682877,
49
],
[
1630940282877,
25
],
[
1630943882877,
64
],
[
1630947482877,
58
],
[
1630951082877,
8
],
[
1630954682877,
42
],
[
1630958282877,
52
],
[
1630961882877,
1
],
[
1630965482877,
60
],
[
1630969082877,
31
],
[
1630972682877,
56
],
[
1630976282877,
47
],
[
1630979882877,
38
],
[
1630983482877,
62
],
[
1630987082877,
63
],
[
1630990682877,
40
],
[
1630994282877,
8
]
]
}
]
},
{
"title": "核心服务2",
"series": [
{
"name": "Code-Filter2",
"type": "line",
"symbol": "none",
"data": [
[
1630925882877,
55
],
[
1630929482877,
68
],
[
1630933082877,
71
],
[
1630936682877,
30
],
[
1630940282877,
48
],
[
1630943882877,
39
],
[
1630947482877,
19
],
[
1630951082877,
31
],
[
1630954682877,
55
],
[
1630958282877,
56
],
[
1630961882877,
14
],
[
1630965482877,
56
],
[
1630969082877,
71
],
[
1630972682877,
60
],
[
1630976282877,
46
],
[
1630979882877,
52
],
[
1630983482877,
15
],
[
1630987082877,
27
],
[
1630990682877,
21
],
[
1630994282877,
7
]
]
},
{
"name": "Code-HotSpot2",
"type": "line",
"symbol": "none",
"data": [
[
1630925882877,
34
],
[
1630929482877,
42
],
[
1630933082877,
29
],
[
1630936682877,
32
],
[
1630940282877,
63
],
[
1630943882877,
62
],
[
1630947482877,
1
],
[
1630951082877,
47
],
[
1630954682877,
34
],
[
1630958282877,
1
],
[
1630961882877,
55
],
[
1630965482877,
39
],
[
1630969082877,
58
],
[
1630972682877,
54
],
[
1630976282877,
53
],
[
1630979882877,
55
],
[
1630983482877,
65
],
[
1630987082877,
25
],
[
1630990682877,
28
],
[
1630994282877,
53
]
]
}
]
},
{
"title": "核心服务3",
"series": [
{
"name": "Code-Filter3",
"type": "line",
"symbol": "none",
"data": [
[
1630925882877,
55
],
[
1630929482877,
68
],
[
1630933082877,
71
],
[
1630936682877,
30
],
[
1630940282877,
48
],
[
1630943882877,
39
],
[
1630947482877,
19
],
[
1630951082877,
31
],
[
1630954682877,
55
],
[
1630958282877,
56
],
[
1630961882877,
14
],
[
1630965482877,
56
],
[
1630969082877,
71
],
[
1630972682877,
60
],
[
1630976282877,
46
],
[
1630979882877,
52
],
[
1630983482877,
15
],
[
1630987082877,
27
],
[
1630990682877,
21
],
[
1630994282877,
7
]
]
},
{
"name": "Code-HotSpot3",
"type": "line",
"symbol": "none",
"data": [
[
1630925882877,
50
],
[
1630929482877,
8
],
[
1630933082877,
38
],
[
1630936682877,
60
],
[
1630940282877,
56
],
[
1630943882877,
0
],
[
1630947482877,
53
],
[
1630951082877,
17
],
[
1630954682877,
5
],
[
1630958282877,
48
],
[
1630961882877,
42
],
[
1630965482877,
62
],
[
1630969082877,
59
],
[
1630972682877,
63
],
[
1630976282877,
38
],
[
1630979882877,
63
],
[
1630983482877,
5
],
[
1630987082877,
45
],
[
1630990682877,
56
],
[
1630994282877,
30
]
]
}
]
},
{
"title": "核心服务4",
"series": [
{
"name": "Code-Filter4",
"type": "line",
"symbol": "none",
"data": [
[
1630925882877,
55
],
[
1630929482877,
68
],
[
1630933082877,
71
],
[
1630936682877,
30
],
[
1630940282877,
48
],
[
1630943882877,
39
],
[
1630947482877,
19
],
[
1630951082877,
31
],
[
1630954682877,
55
],
[
1630958282877,
56
],
[
1630961882877,
14
],
[
1630965482877,
56
],
[
1630969082877,
71
],
[
1630972682877,
60
],
[
1630976282877,
46
],
[
1630979882877,
52
],
[
1630983482877,
15
],
[
1630987082877,
27
],
[
1630990682877,
21
],
[
1630994282877,
7
]
]
},
{
"name": "Code-HotSpot4",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
11
],
[
1630929482878,
43
],
[
1630933082878,
56
],
[
1630936682878,
43
],
[
1630940282878,
2
],
[
1630943882878,
56
],
[
1630947482878,
3
],
[
1630951082878,
10
],
[
1630954682878,
40
],
[
1630958282878,
40
],
[
1630961882878,
67
],
[
1630965482878,
62
],
[
1630969082878,
67
],
[
1630972682878,
15
],
[
1630976282878,
59
],
[
1630979882878,
18
],
[
1630983482878,
56
],
[
1630987082878,
60
],
[
1630990682878,
25
],
[
1630994282878,
14
]
]
}
]
},
{
"title": "核心服务5",
"series": [
{
"name": "Code-Filter5",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
55
],
[
1630929482878,
68
],
[
1630933082878,
71
],
[
1630936682878,
30
],
[
1630940282878,
48
],
[
1630943882878,
39
],
[
1630947482878,
19
],
[
1630951082878,
31
],
[
1630954682878,
55
],
[
1630958282878,
56
],
[
1630961882878,
14
],
[
1630965482878,
56
],
[
1630969082878,
71
],
[
1630972682878,
60
],
[
1630976282878,
46
],
[
1630979882878,
52
],
[
1630983482878,
15
],
[
1630987082878,
27
],
[
1630990682878,
21
],
[
1630994282878,
7
]
]
},
{
"name": "Code-HotSpot5",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
47
],
[
1630929482878,
51
],
[
1630933082878,
24
],
[
1630936682878,
10
],
[
1630940282878,
58
],
[
1630943882878,
6
],
[
1630947482878,
16
],
[
1630951082878,
29
],
[
1630954682878,
34
],
[
1630958282878,
72
],
[
1630961882878,
65
],
[
1630965482878,
68
],
[
1630969082878,
12
],
[
1630972682878,
53
],
[
1630976282878,
41
],
[
1630979882878,
59
],
[
1630983482878,
63
],
[
1630987082878,
20
],
[
1630990682878,
5
],
[
1630994282878,
48
]
]
}
]
},
{
"title": "核心服务6",
"series": [
{
"name": "Code-Filter6",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
55
],
[
1630929482878,
68
],
[
1630933082878,
71
],
[
1630936682878,
30
],
[
1630940282878,
48
],
[
1630943882878,
39
],
[
1630947482878,
19
],
[
1630951082878,
31
],
[
1630954682878,
55
],
[
1630958282878,
56
],
[
1630961882878,
14
],
[
1630965482878,
56
],
[
1630969082878,
71
],
[
1630972682878,
60
],
[
1630976282878,
46
],
[
1630979882878,
52
],
[
1630983482878,
15
],
[
1630987082878,
27
],
[
1630990682878,
21
],
[
1630994282878,
7
]
]
},
{
"name": "Code-HotSpot6",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
46
],
[
1630929482878,
3
],
[
1630933082878,
21
],
[
1630936682878,
57
],
[
1630940282878,
12
],
[
1630943882878,
22
],
[
1630947482878,
16
],
[
1630951082878,
23
],
[
1630954682878,
73
],
[
1630958282878,
67
],
[
1630961882878,
65
],
[
1630965482878,
40
],
[
1630969082878,
45
],
[
1630972682878,
60
],
[
1630976282878,
54
],
[
1630979882878,
64
],
[
1630983482878,
13
],
[
1630987082878,
23
],
[
1630990682878,
42
],
[
1630994282878,
14
]
]
}
]
},
{
"title": "核心服务7",
"series": [
{
"name": "Code-Filter7",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
55
],
[
1630929482878,
68
],
[
1630933082878,
71
],
[
1630936682878,
30
],
[
1630940282878,
48
],
[
1630943882878,
39
],
[
1630947482878,
19
],
[
1630951082878,
31
],
[
1630954682878,
55
],
[
1630958282878,
56
],
[
1630961882878,
14
],
[
1630965482878,
56
],
[
1630969082878,
71
],
[
1630972682878,
60
],
[
1630976282878,
46
],
[
1630979882878,
52
],
[
1630983482878,
15
],
[
1630987082878,
27
],
[
1630990682878,
21
],
[
1630994282878,
7
]
]
},
{
"name": "Code-HotSpot7",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
17
],
[
1630929482878,
33
],
[
1630933082878,
53
],
[
1630936682878,
15
],
[
1630940282878,
29
],
[
1630943882878,
0
],
[
1630947482878,
10
],
[
1630951082878,
70
],
[
1630954682878,
68
],
[
1630958282878,
58
],
[
1630961882878,
62
],
[
1630965482878,
35
],
[
1630969082878,
74
],
[
1630972682878,
39
],
[
1630976282878,
62
],
[
1630979882878,
4
],
[
1630983482878,
39
],
[
1630987082878,
34
],
[
1630990682878,
12
],
[
1630994282878,
30
]
]
}
]
},
{
"title": "核心服务8",
"series": [
{
"name": "Code-Filter8",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
55
],
[
1630929482878,
68
],
[
1630933082878,
71
],
[
1630936682878,
30
],
[
1630940282878,
48
],
[
1630943882878,
39
],
[
1630947482878,
19
],
[
1630951082878,
31
],
[
1630954682878,
55
],
[
1630958282878,
56
],
[
1630961882878,
14
],
[
1630965482878,
56
],
[
1630969082878,
71
],
[
1630972682878,
60
],
[
1630976282878,
46
],
[
1630979882878,
52
],
[
1630983482878,
15
],
[
1630987082878,
27
],
[
1630990682878,
21
],
[
1630994282878,
7
]
]
},
{
"name": "Code-HotSpot8",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
44
],
[
1630929482878,
48
],
[
1630933082878,
17
],
[
1630936682878,
36
],
[
1630940282878,
18
],
[
1630943882878,
2
],
[
1630947482878,
62
],
[
1630951082878,
67
],
[
1630954682878,
47
],
[
1630958282878,
78
],
[
1630961882878,
26
],
[
1630965482878,
80
],
[
1630969082878,
19
],
[
1630972682878,
57
],
[
1630976282878,
4
],
[
1630979882878,
50
],
[
1630983482878,
25
],
[
1630987082878,
11
],
[
1630990682878,
14
],
[
1630994282878,
41
]
]
}
]
},
{
"title": "核心服务9",
"series": [
{
"name": "Code-Filter9",
"type": "line",
"symbol": "none",
"data": [
[
1630925882878,
55
],
[
1630929482878,
68
],
[
1630933082878,
71
],
[
1630936682878,
30
],
[
1630940282878,
48
],
[
1630943882878,
39
],
[
1630947482878,
19
],
[
1630951082878,
31
],
[
1630954682878,
55
],
[
1630958282878,
56
],
[
1630961882878,
14
],
[
1630965482878,
56
],
[
1630969082879,
71
],
[
1630972682879,
60
],
[
1630976282879,
46
],
[
1630979882879,
52
],
[
1630983482879,
15
],
[
1630987082879,
27
],
[
1630990682879,
21
],
[
1630994282879,
7
]
]
},
{
"name": "Code-HotSpot9",
"type": "line",
"symbol": "none",
"data": [
[
1630925882879,
41
],
[
1630929482879,
18
],
[
1630933082879,
42
],
[
1630936682879,
39
],
[
1630940282879,
14
],
[
1630943882879,
51
],
[
1630947482879,
64
],
[
1630951082879,
33
],
[
1630954682879,
85
],
[
1630958282879,
17
],
[
1630961882879,
80
],
[
1630965482879,
3
],
[
1630969082879,
49
],
[
1630972682879,
13
],
[
1630976282879,
53
],
[
1630979882879,
17
],
[
1630983482879,
9
],
[
1630987082879,
1
],
[
1630990682879,
31
],
[
1630994282879,
17
]
]
}
]
}
]
指标
性能指标
组件名称：性能指标
组件样式：
组件说明：
翻牌类返回格式，类似App产品的PV和Browser的PV，如性能指标。
请求方式：POST
https://report.tingyun.com/example/pv.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | String | 值 |
| unit | String | 单位 |
示例：
HTTP/1.1 200 OK
{
"value": 2500,
"unit": "s"
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为2列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| value | Number | 值 |
| unit | String | 单位 |
以MySQL为例，SQL示例如下：
SELECT value, unit FROM performance_metrics_test
CSV示例如下：
value,unit
1234,ms
气泡图
组件名称：气泡图
组件样式：
组件说明：
气泡图返回格式。
请求方式：POST
https://report.tingyun.com/example/bubble.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Object[] | 数据对象。 |
| name | String | 数据项展示。 |
| value | Number | 指标项值。 |
| unit | String | 指标单位。 |
示例：
HTTP/1.1 200 OK
{
"series": [
{
"name": "黑龙江省",
"value": 76,
"unit": "%"
},
{
"name": "青海省",
"value": 86,
"unit": "%"
},
{
"name": "四川省",
"value": 12,
"unit": "%"
},
{
"name": "贵州省",
"value": 11,
"unit": "%"
},
{
"name": "山西省",
"value": 27,
"unit": "%"
},
{
"name": "海南省",
"value": 81,
"unit": "%"
},
{
"name": "广西壮族自治区",
"value": 41,
"unit": "%"
},
{
"name": "云南省",
"value": 63,
"unit": "%"
},
{
"name": "辽宁省",
"value": 39,
"unit": "%"
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name | String | 名称 |
| value | Number | 值 |
| unit | String | 单位 |
以MySQL为例，SQL示例如下：
SELECT name, value, unit FROM bubble_chart_test
CSV示例如下：
name,value,unit
黑龙江省,76,%
青海省,76,%
四川省,86,%
贵州省,12,%
山西省,27,%
海南省,81,%
PV
组件名称：PV
组件样式：
组件说明：
PV数字组件，适用于各种数字类型数据展示。如果大屏使用此组件展示，建议使用配置较高的主机。
请求方式：POST
https://report.tingyun.com/example/browser/lspv.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 | Number | 数值。 |
示例：
HTTP/1.1 200 OK
{
"code": 200,
"msg": "success",
"data": {
"pv": 50
}
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为1列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| pv | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT pv FROM pv_test
CSV示例如下：
pv
500
数字指标
**组件名称：**数字指标
组件样式：
组件说明：
数字指标返回格式。
请求方式：POST
https://report.tingyun.com/example/pv.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | String | 值 |
| unit | String | 单位 |
示例：
HTTP/1.1 200 OK
{
"value": 2500,
"unit": "s"
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为2列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| value | Number | 值 |
| unit | String | 单位 |
以MySQL为例，SQL示例如下：
SELECT value, unit FROM performance_metrics_test
CSV示例如下：
value,unit
1234,ms
指标组件
组件名称：指标组件
组件样式：
组件说明：
指标组件返回格式。
请求方式：POST
https://report.tingyun.com/example/browser/performance-list.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[] | |
| name | String | 指标名称 |
| unit | String | 指标单位 |
| value | String | 值 |
实例
HTTP/1.1 200 OK
{
"code": 200,
"msg": "success",
"data": [
{
"name": "首屏",
"unit": "ms",
"value": 1000
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name | String | 名称 |
| unit | String | 单位 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name, unit, value FROM metrics_test
CSV示例如下：
name,unit,value
首屏,ms,1234
圆形占比图
**组件名称：**圆形占比图
组件样式：
组件说明：
圆形占比图返回格式
请求方式：POST
https://report.tingyun.com/example/pie.json
参数
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回 |
| unit | String | 单位 |
| series | Object[] | 数据对象 |
| name | String | 数据项名称 |
| data | Object[] | 数据项 |
| name | Number | 数据项展示 |
| value | Number | 性能指标 |
实例
HTTP/1.1 200 OK
{
"data": [
{
"name": "慢页面占比",
"unit": "%",
"value": 24
}
]
}
用户体验评分
**组件名称：**用户体验评分
组件样式：
组件说明：
用户体验评分返回格式
请求方式：POST
https://report.tingyun.com/example/pie.json
参数
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回 |
| unit | String | 单位 |
| series | Object[] | 数据对象 |
| name | String | 数据项名称 |
| data | Object[] | 数据项 |
| name | Number | 数据项展示 |
| value | Number | 性能指标 |
实例
HTTP/1.1 200 OK
{
"value": 1.68,
"unit": "秒",
"series": [
{
"name": "DNS",
"data": [
{
"name": "wgz",
"value": 16
},
{
"name": "wgz2",
"value": 6
}
]
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name1 | String | 数据名称 |
| name2 | String | 数据项名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name1, name2, value FROM proportion_test
CSV示例如下：
name1,name2,value
DNS,错误率,111
DNS,吞吐率,222
数据概览组件
**组件名称：**数据概览组件
组件样式：
组件说明： 数据概览组件返回格式。
请求方式：POST
https://doc.tingyun.com/sense/example/userExperienceReview.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| picedata | Object | 左侧数据，类型为对象 |
| name | String | 数据名称 |
| value | Number | 数据值 |
| datamap | Object[] | 右侧列表数据，类型为数组 |
| value | Number | id，起始值是1 |
| key | String | 数据名称 |
| pice | Number | 数据值 |
示例：
{"status":200,
"data":{
"picedata": { "name": "子域名", "value": 80 },
"datamap": [
{ "value": 1, "key": "体验优秀应用数", "pice": 1500},
{ "value": 2, "key": "良好优秀应用数", "pice": 260}
]
}
}
指标比例图
**组件名称：**指标比例图
组件样式：
组件说明： percent是非必须字段，如果不传，就显示一个完整的环，以及中间的百分比不显示。
请求方式：POST
https://doc.tingyun.com/sense/example/Reviewpie4.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| status | Number | 状态码 |
| data | Object[] | 数据 |
| name | String | 名称 |
| value | Number | 值 |
| percent | Number | 百分比 |
示例:
{
"status": 200,
"data": {
"name": "Pro Total Users",
"value": 39000,
"percent": 30
}
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name | String | 名称 |
| value | Number | 值 |
| percent | Number | 百分比 |
以MySQL为例，SQL示例如下：
SELECT name, value, percent FROM metrics_proportion_test
CSV示例如下：
name,value,percent
Pro Total Users,59000,50
仪表盘
**组件名称：**仪表盘
组件样式：
组件说明： 组件就显示一个百分比。范围是0-100的整数，小数部分会被四舍五入。 传入的name，在组件中不会显示。 组件的颜色可以在配置中进行分段设置。
请求方式：POST
https://doc.tingyun.com/sense/example/gaugebard3.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| name | String | 名称 |
| percent | Number | 0-100的整数 |
如果传入小数会做四舍五入处理。 值的颜色可以在组件中配置。按照区间显示不同的颜色。
示例：
{
"name":"业务可用性",
"percent": 80
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为1列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| percent | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT percent FROM dashboard_test
CSV示例如下：
percent
34
彩条指标
**组件名称：**彩条指标
组件样式：
组件说明： 传入数据条数可以是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
多维指标
组件名称：多维指标
组件样式：
组件说明：
多维指标组件,支持多组数据。支持自定义背景颜色和透明度。
请求方式：POST
https://doc.tingyun.com/sense/example/multimetric.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 数据数组 |
| title | String | 标题，支持传”“（空字符串），然后在配置项中自定义标题 |
| data | Array | 数据 |
| value | Number/String | 默认数字类型，也支持小数和字符串类型。当传空字符串的时候不显示。 |
| name | String | 名称 |
| unit | String | 单位，非必须字段 |
示例：
{
"series": [
{
"title": "IOS端",
"data": [
{
"name": "荣威APP",
"value": 1.4,
"unit": "s"
},
{
"name": "行业最佳",
"value": 0.84,
"unit": "s"
}
]
},
{
"title": "Android端",
"data": [
{
"name": "荣威APP",
"value": 1.317,
"unit": "s"
},
{
"name": "行业最佳",
"value": 1.26,
"unit": "s"
}
]
}
]
}
星级图
组件名称：星级图
组件样式：
组件说明：
星级图返回格式。
请求方式：POST
https://report.tingyun.com/example/multimetric-star.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行MD5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Object[] | 数据项。 |
| name | String | 标题。 |
| data | Object[] | 指标项。 |
| value | Number | 指标值。 |
| name | String | 指标名称。 |
示例：
HTTP/1.1 200 OK
{
"series": [
{
"name": "Service App",
"data": [
{
"value": 4.3,
"name": "iOS"
},
{
"value": 2.7,
"name": "Android"
}
]
},
{
"name": "My Start",
"data": [
{
"value": 36.7,
"name": "iOS"
},
{
"value": 5.8,
"name": "Android"
}
]
}
]
}
雷达图
雷达图
组件名称：雷达图
组件样式：
组件说明：
雷达图（非3D雷达图）。
请求方式：POST
https://report.tingyun.com/example/radar.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 雷达中间指标值。 |
| indicator | Object[] | 指标项及名称 。 |
| series | Object[] | 数据对象。 |
| name | String | 数据项名称。 |
| value | Object[] | 指标项值。 |
示例：
HTTP/1.1 200 OK
{
"value": 67,
"indicator": [
{
"name": "指标A",
"max": 100
},
{
"name": "指标B",
"max": 100
},
{
"name": "指标C",
"max": 100
},
{
"name": "指标D",
"max": 100
},
{
"name": "指标E",
"max": 100
},
{
"name": "指标F",
"max": 100
}
],
"series": [
{
"name": "行业",
"value": [
89,
90,
99,
96,
97,
95
]
},
{
"name": "当前",
"value": [
70,
60,
40,
30,
50,
95
]
}
]
}
数据库接入、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
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
网状雷达图
组件名称：网状雷达图
组件样式：
组件说明：
如果大屏使用此组件展示，建议使用应急配置较高的主机。
请求方式：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
旋转雷达图
组件名称：旋转雷达图
组件样式：
组件说明：
配置项如下：
- 轮播时间间隔
- 颜色和数据配置
当只有1组数据的时候，会自动复制2份，变成3份数据轮播。 当只有2组数据的时候，会复制第一组数据，变成3份数据轮播。
请求方式：POST
https://doc.tingyun.com/sense/example/centerRadar.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 数据 |
| name | String | 标题 |
| value | Number | 数值 |
| data | Array | 子数据 |
| name | String | 名称 |
| value | String | 值 |
| radar | Object | 雷达数据 |
| value | String | 值 |
| indicator | Array | 雷达轴值 |
| name | String | 名称 |
| max | Number | 最大值 |
| series | Array | 轴对应的值 |
| name | String | 名称 |
| value | String | 值 |
示例：
{
"series": [
{
"name": "环形视觉研究所",
"value": 79,
"data": [
{
"name": "用户量",
"value": 66807
},
{
"name": "打开次数",
"value": 16172
},
{
"name": "页面浏览量",
"value": 38250
}
],
"radar": {
"value": 79,
"indicator": [
{
"name": "请求耗时",
"max": 100
},
{
"name": "JS错误率",
"max": 100
},
{
"name": "卡顿率",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "加载耗时",
"max": 100
},
{
"name": "请求错误率",
"max": 100
},
{
"name": "on Ready",
"max": 100
}
],
"series": [
{
"name": "数据一",
"value": [
46,
95,
18,
41,
79,
67,
28
]
}
]
}
},
{
"name": "网易AI体验中心",
"value": 35,
"data": [
{
"name": "用户量",
"value": 52151
},
{
"name": "打开次数",
"value": 43907
},
{
"name": "页面浏览量",
"value": 10827
}
],
"radar": {
"value": 35,
"indicator": [
{
"name": "请求耗时",
"max": 100
},
{
"name": "JS错误率",
"max": 100
},
{
"name": "卡顿率",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "加载耗时",
"max": 100
},
{
"name": "请求错误率",
"max": 100
},
{
"name": "on Ready",
"max": 100
}
],
"series": [
{
"name": "数据一",
"value": [
49,
11,
20,
77,
85,
52,
86
]
}
]
}
},
{
"name": "网易有车",
"value": 31,
"data": [
{
"name": "用户量",
"value": 54886
},
{
"name": "打开次数",
"value": 43033
},
{
"name": "页面浏览量",
"value": 5502
}
],
"radar": {
"value": 31,
"indicator": [
{
"name": "请求耗时",
"max": 100
},
{
"name": "JS错误率",
"max": 100
},
{
"name": "卡顿率",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "加载耗时",
"max": 100
},
{
"name": "请求错误率",
"max": 100
},
{
"name": "on Ready",
"max": 100
}
],
"series": [
{
"name": "数据一",
"value": [
88,
48,
85,
57,
27,
34,
62
]
}
]
}
}
]
}
地图
地图
组件名称：地图
组件样式：
组件说明：
中国地图类返回格式，适用于所有组件里的中国地图返回格式，组件名称如：地图和3D地图里的中国地图均可按照此协议规范返回。
请求方式：POST
https://report.tingyun.com/example/china.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 性能值##.# |
| unit | String | 单位 '秒' |
| legend | Object | legend数据 |
| data | Object[] | legend数据 |
| name | String | legend名称 |
| series | Object[] | 数据项 |
| name | String | 地区名称 |
| value | Number | 性能指标 |
| legendNo | Number | 使用哪个legend，从0开始 |
示例：
HTTP/1.1 200 OK
{
"value": 1.78,
"unit": "秒",
"series": [
{
"name": "北京",
"value": 800
{
"name": "上海",
"value": 580
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为2列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name | String | 城市名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name, value FROM china_map_test
CSV示例如下：
name,value
北京,1000
上海,800
广东,500
深圳,300
中国地图
组件名称：地图/3D地图
组件样式：
组件说明：
中国地图类返回格式，适用于所有组件里的中国地图返回格式，组件名称如：地图和3D地图里的中国地图均可按照此协议规范返回。
请求方式：POST
https://report.tingyun.com/example/china.json
参数：
| 字段 | 类型 | 是否必选 | 描述 |
|---|---|---|---|
| currentTime | Number | 是 | 当前时间戳。 |
| token | String | 否 | 盐值，用于校验参数的完整性。校验规则为md5(timePeriod+currentTime+配置的token)。例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行md5运算。 |
| timePeriod | Number | 是 | 时间范围分钟数。 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 性能值##.#。 |
| unit | String | 单位 '秒'。 |
| series | Object[] | 数据项。 |
| name | String | 地区名称。 |
| Value | Number | 性能指标。 |
示例：
HTTP/1.1 200 OK
{
"value": 1.78,
"unit": "秒",
"series": [
{
"name": "北京",
"value": 800
},
{
"name": "上海",
"value": 580
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为2列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name | String | 城市名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name, value FROM china_map_test
CSV示例如下：
name,value
北京,1000
上海,800
广东,500
深圳,300
世界地图
组件名称：世界地图
组件样式：
组件说明：
世界地图的使用路径为：3D地图 > 在右侧地图类型里选择世界地图。
请求方式：POST
https://report.tingyun.com/example/world.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 性能值##.#。 |
| unit | String | 单位 '秒'。 |
| series | Object[] | 数据项。 |
| name | String | 地区名称。 |
| Value | Number | 性能指标。 |
示例：
HTTP/1.1 200 OK
{
"value": 1.78,
"unit": "秒",
"series": [
{
"name": "中国",
"value": 800
},
{
"name": "美国",
"value": 580
}
]
}
3D 世界地图
组件名称：3D世界地图
组件样式：
组件说明：
3D世界地图返回格式。如果大屏使用此组件展示，建议使用配置较高的主机。
请求方式：POST
https://report.tingyun.com/example/world3d.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值 |
| series | Object[] | 数据项 |
| name | String | 地区名称 |
| title | String | 标题 |
| value | Number | 地图显示值 |
| tip | Object | 气泡 |
| series | Object[] | 气泡饼图 |
| name | String | 名称 |
| data | Object[] | |
| name | String | 饼图数据项名称 |
| value | Number | 饼图数据项值 |
| list | Object | |
| series | Object[] | 列表 |
| title | String | 列表标题 |
| data | Object[] | 列表数据 |
| node | String | 显示字段1 |
| alarmname | String | 显示字段2 |
示例：
HTTP/1.1 200 OK
{
"unit": "s",
"value":243,
"series": [
{
"name": "Germany",
"title": "HEC",
"value": 163,
"tip": {
"series": [
{
"scope": 81,
"name": "Total",
"data": [
{
"name": "Critical",
"value": 43
},
{
"name": "Major",
"value": 28
},
{
"name": "Mimor",
"value": 27
},
{
"name": "Warring",
"value": 39
}
]
}
],
"list": {
"series": [
{
"title": "Critical Alarm",
"data": [
{
"node": "117.231.48.129",
"alarmname": "ch"
}
]
}
]
}
}
}
]
}
3D 地球
组件名称：3D地球
组件样式：
组件说明：
3D地球，适用于文本数据展示。如果大屏使用此组件展示，建议使用配置较高的主机。
请求方式：POST
https://report.tingyun.com/example/browser/map.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 | 数据对象 |
| unit | String | 单位 |
| data | Object[] | |
| firstscreen | Number | 指标值 |
| name | String | 指标名称 |
| type | String | 数据类型 |
示例：
HTTP/1.1 200 OK
{
"code": 200,
"msg": "success",
"data": {
"unit": "ms",
"data": [
{
"firstScreen": 987.0,
"name": "New Zealand",
"type": "country"
},
{
"firstScreen": 983.0,
"name": "Japan",
"type": "country"
},
{
"firstScreen": 980.0,
"name": "England",
"type": "country"
},
{
"firstScreen": 972.0,
"name": "China",
"type": "country"
},
{
"firstScreen": 971.0,
"name": "France",
"type": "country"
},
{
"firstScreen": 967.0,
"name": "Australia",
"type": "country"
}
]
}
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为5列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| unit | String | 单位 |
| name | String | 名称 |
| type | String | 类型 |
| locationId | Number | 值 |
| firstScreen | Number | 指标值 |
以MySQL为例，SQL示例如下：
SELECT unit, name, type, locationId, firstScreen FROM earth_3d_test
CSV示例如下：
unit,name,type,locationId,firstScreen
ms,China,country,25,111.22
ms,Japan,country,45,222.33
占比图
占比图
组件名称: 占比图
组件样式：
组件说明：
占比图返回格式
请求方式：POST
https://report.tingyun.com/example/pie.json
参数
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回 |
| unit | String | 单 位 |
| series | Object[] | 数据对象 |
| name | String | 数据项名称 |
| data | Object[] | 数据项 |
| name | Number | 数据项展示 |
| value | Number | 性能指标 |
实例
HTTP/1.1 200 OK
{
"data": [
{
"name": "慢页面占比",
"unit": "%",
"value": 24
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name1 | String | 数据名称 |
| name2 | String | 数据项名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name1, name2, value FROM proportion_test
CSV示例如下：
name1,name2,value
DNS,错误率,111
DNS,吞吐率,222
3D水柱图
**组件名称：**3D水柱图
组件样式：
组件说明：
3D水柱图返回格式。
请求方式：POST
https://report.tingyun.com/example/pie.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回。 |
| unit | String | 单位。 |
| series | Object[] | 数据对象。 |
| name | String | 数据项名称。 |
| data | Object[] | 数据项。 |
| name | Number | 数据项展示。 |
| value | Number | 性能指标。 |
示例：
HTTP/1.1 200 OK
{
"value": 1.68,
"unit": "秒",
"series": [
{
"name": "DNS",
"data": [
{
"name": "wgz",
"value": 16
},
{
"name": "wgz2",
"value": 6
}
]
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name1 | String | 数据名称 |
| name2 | String | 数据项名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name1, name2, value FROM proportion_test
CSV示例如下：
name1,name2,value
DNS,错误率,111
DNS,吞吐率,222
分类占比图
组件名称: 分类占比图
组件样式：
组件说明：
分类占比图返回格式。
请求方式：POST
https://report.tingyun.com/example/pie.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回。 |
| unit | String | 单位。 |
| series | Object[] | 数据对象。 |
| name | String | 数据项名称。 |
| data | Object[] | 数据项。 |
| name | Number | 数据项展示。 |
| value | Number | 性能指标。 |
示例：
HTTP/1.1 200 OK
{
"data": [
{
"name": "慢页面占比",
"unit": "%",
"value": 24
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name1 | String | 数据名称 |
| name2 | String | 数据项名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name1, name2, value FROM proportion_test
CSV示例如下：
name1,name2,value
DNS,错误率,111
DNS,吞吐率,222
三维饼状占比图
组件名称: 三维饼状占比图
组件样式：
组件说明：
三维饼状占比图返回格式。
请求方式：POST
https://report.tingyun.com/example/pie.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回。 |
| unit | String | 单位。 |
| series | Object[] | 数据对象。 |
| name | String | 数据项名称。 |
| data | Object[] | 数据项。 |
| name | Number | 数据项展示。 |
| value | Number | 性能指标。 |
示例：
HTTP/1.1 200 OK
{
"data": [
{
"name": "慢页面占比",
"unit": "%",
"value": 24
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name1 | String | 数据名称 |
| name2 | String | 数据项名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name1, name2, value FROM proportion_test
CSV示例如下：
name1,name2,value
DNS,错误率,111
DNS,吞吐率,222
方式占比图
组件名称: 方式占比图
组件样式：
组件说明：
方式占比图返回格式。
请求方式：POST
https://report.tingyun.com/example/pie.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| value | Number | 平均值, 该健可以不存在，当红绿灯不存在时可以不返回。 |
| unit | String | 单位。 |
| series | Object[] | 数据对象。 |
| name | String | 数据项名称。 |
| data | Object[] | 数据项。 |
| name | Number | 数据项展示。 |
| value | Number | 性能指标。 |
示例：
HTTP/1.1 200 OK
{
"data": [
{
"name": "慢页面占比",
"unit": "%",
"value": 24
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为3列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| name1 | String | 数据名称 |
| name2 | String | 数据项名称 |
| value | Number | 值 |
以MySQL为例，SQL示例如下：
SELECT name1, name2, value FROM proportion_test
CSV示例如下：
name1,name2,value
DNS,错误率,111
DNS,吞吐率,222
表格
轮播列表
组件名称：轮播列表
组件样式 ：
组件说明：
轮播列表返回格式。
请求方式：POST
https://report.tingyun.com/example/owslist.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| status | Number | 状态码。 |
| menus | Object[] | |
| name | String | 列表分类。 |
| seriestitle | Object[] | 列表标题。 |
| textAlign | Object[] | 列表样式，可选：left/right/center。 |
| series | Object[] | 列表数据。 |
| name | String | 列表显示数据1。 |
| num | String | 列表显示数据2。 |
说明：seriestitle是表头，有几个数据就是有几列。下面的textAlign以及series[i]中数组的长度应该和表头的列数保持一致。
示例：
{
"status": 200,
"menus": [
{
"id": 1,
"name": "TT in Progress for Projects",
"seriestitle": ["Customer","Version","SR QTY"],
"textAlign":["left","center","center"],
"series": [
["dkjyvmj.info........clf.tn","1.1.0",40],
["zbpqjndpf.info........slvrwebbvc.tc","2.1.0",50]
]
},
{
"id": 2,
"name": "TT Untimely Response",
"seriestitle": ["Customer","Version","SR QTY"],
"textAlign":["left","center","center"],
"series": [
["dkjyvmj.info........clf.tn","1.1.0",40],
["zbpqjndpf.info........slvrwebbvc.tc","2.1.0",50]
]
},
{
"id": 3,
"name": "OWS Platform Version",
"seriestitle": ["Customer","Version","SR QTY"],
"textAlign":["left","right","center"],
"series": [
["dkjyvmj.info........clf.tn","1.1.0",40],
["zbpqjndpf.info........slvrwebbvc.tc","2.1.0",50]
]
}
]
}
数据库接入、CSV接入
SQL查询结果和CSV文件内容均为5列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| id | Number | 分组id，同一个分组中的数据的id相同 |
| name | String | 分组名称，同一个分组中的数据的name相同 |
| seriestitle | String | 表头的列名，多个列名之间用“|”隔开 |
| textAlign | String | 标统的对齐方式，多个列之间用“|”隔开 |
| series | String | 数据，不同列的数据之间用“|”隔开 |
以MySQL为例，SQL示例如下：
SELECT id, name, seriestitle, textAlign, series FROM ows_list_test
CSV示例如下：
id,name,seriestitle,textAlign,series
1,一分组,a|b|c,left|right|center,1a|11|12
1,一分组,a|b|c,left|right|center,2a|21|22
1,一分组,a|b|c,left|right|center,3a|31|32
1,一分组,a|b|c,left|right|center,4a|41|42
2,二分组,a|b|c,left|right|center,1b|11|12
2,二分组,a|b|c,left|right|center,2b|21|22
2,二分组,a|b|c,left|right|center,3b|31|32
3,三分组,a|b|c,left|right|center,1c|11|12
3,三分组,a|b|c,left|right|center,1c|21|22
4,四分组,a|b|c,left|right|center,1d|41|42
告警列表
组件名称：告警列表
组件样式：
组件说明：
告警列表返回格式。
请求方式：POST
https://report.tingyun.com/example/alarmlist.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Object[] | 数据对象。 |
| status | Number | 告警图标状态3-红,2-黄,1-绿。 |
| title | String | 列表标题。 |
| content | String | 列表内容。 |
| time | String | 时间yyyy-MM-dd HH:mm:ss。 |
示例：
HTTP/1.1 200 OK
{
"series": [
{
"status": 3,
"title": "MySQL-10.128.0.36:3306/gartner",
"content": "系统不可用",
"time": "18:42:30"
},
{
"status": 2,
"title": "MySQL-10.128.0.36:3306/gartner",
"content": "系统可用性较低",
"time": "14:42:30"
},
{
"status": 1,
"title": "MySQL-10.128.0.36:3306/gartner",
"content": "系统正常",
"time": "10:42:30"
}
]
}
数 据库接入、CSV接入
SQL查询结果和CSV文件内容均为4列，字段名称可以任意指定，但是字段顺序不能改变：
| 字段顺序 | 类型 | 描述 |
|---|---|---|
| status | Number | 状态 |
| title | String | 标题 |
| content | String | 内容 |
| time | String | 时间 |
以MySQL为例，SQL示例如下：
SELECT status, title, content, time FROM alarm_list_test
CSV示例如下：
status,title,content,time
3,MySQL-10.128.0.36:3306/gartner,系统不可用,18:42:30
2,MySQL-10.128.0.36:3306/gartner,系统可用性较低,14:42:30
1,MySQL-10.128.0.36:3306/gartner,系统正常,10:42:30
告警列表2
组件名称：告警列表2
组件样式：
组件说明：
无
请求方式：POST
https://doc.tingyun.com/sense/example/barcoreindex2.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 可以是任意条数据 |
| name | String | 名称 |
| value | Number | 数字类型 |
| color | String | 颜色， 如"#77E5FF"。可选参数 |
value如果包含小数，在组件中会四舍五入的显示整数。 color可以通过接口传入，也可以在组件中直接配置。组件中配置的颜色优先级高于接口传入的颜色值。
示例：
{
"series": [
{
"name": "发生警报数",
"value": 58679,
"color": "#00d4f3"
},
{
"name": "影响应用数字",
"value": 58753,
"color": "#08d69d"
},
{
"name": "影响事务数",
"value": 34842,
"color": "#00d4f3"
},
{
"name": "待处理告警数",
"value": 9411,
"color": "#08d69d"
}
]
}
多字段列表
组件名称： 多字段列表
组件样式：
组件说明：
普通列表返回格式。
请求方式：POST
https://doc.tingyun.com/sense/example/sense3List.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| status | Number | 状态码 |
| series | Object[] | |
| header | Object[] | 列表header |
| list | Object[] | 列表数据 |
| other | Object[] | 其它数据(可选字段) |
| name | String | 指标名称 |
| value | Number | 指标值 |
示例：
HTTP/1.1 200 OK
{
"status": 200,
"series": [
{
"header": [
{"key1":"健康度"},
{"key2":"业务系统"},
{"key3":"响应时间"},
{"key4":"吞吐率"},
{"key5":"峰值吞吐率"},
{"key6":"折线图"}
],
"list": [
{"key1":"良好","key2":80,"key3":"卡顿","key4":"12%","key5":"12%","key6":[12,14,15,13,18,17,16,19]},
{"key1":"一般","key2":80,"key3":"崩溃","key4":"12%","key5":"12%","key6":[12,14,15,13,18,17,16,19]},
{"key1":"严重","key2":80,"key3":"想用时间","key4":"12%","key5":"12%","key6":[12,14,15,13,18,17,16,19]},
],
"other":[
{"name":"总任务数","value":155},
{"name":"任务类型数","value":"33ms"},
]
}
]
}
图例列表
组件名称： 图例列表
组件样式：
组件说明：
普通列表返回格式。
请求方式：POST
https://doc.tingyun.com/sense/example/tablelegend.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| status | Number | 状态码 |
| series | Object[] | |
| header | Object[] | 列表header |
| legend | Object[] | 图例数组 |
| list | Object[] | 列表数据 |
| other | Object[] | 其它数据(可选字段) |
| name | String | 指标名称 |
| value | Number | 指标值 |
示例：
HTTP/1.1 200 OK
{
"status": 200,
"series": [
{
"legend":["荣威","行业最佳"],
"header": [
{"key1": "响应时间"},
{"key2": "崩溃率"},
{"key3": "错误率"},
{"key4": "卡顿率"},
{"key5": "流量消耗"}
],
"list": [{
"key1": "0.535s",
"key2": "2.241%",
"key3": "1.460%",
"key4": "0.640%",
"key5": "9.191KB"
},{
"key1": "",
"key2": "",
"key3": "",
"key4": "",
"key5": ""
}]
}
]
}
告警故障列表
组件名称：告警故障列表
组件样式：
组件说明：
告警故障列表组件，左侧列表的groupId对应右侧的id，中间的infolist只有三个信息。 通过配置，可以设置左侧显示的条数和轮播时间间隔，以及右侧可显示的条数。
请求方式：POST
https://doc.tingyun.com/example/alarmailist.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行MD5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 左侧列表数据组 |
| id | Number | 左侧数据ID（必填且唯一） |
| groupId | Number | 对应右侧故障列表ID |
| name | String | 左侧数据名称 |
| value | Number | 左侧数据值(非必填字段) |
| color | String | 左侧数据的颜色 (非必填字段） |
| group | Array | 右侧列表数据组 |
| id | Number | 右侧数据ID |
| name | String | 名称 |
| info | Array | 子信息列表 |
| name | String | 子信息标题 |
| value | String | 子信息详情 |
| infolist | Array | 中间的三列信息 |
| name | String | 名称 |
| value | String | 值 |
示例：
{
"infolist": [
{
"name": "告警数",
"value": 32389
},
{
"name": "压缩率",
"value": "73.30%"
},
{
"name": "故障数",
"value": 5
}
],
"group": [
{
"id": 1,
"name": "1基于AI在32分钟内聚合了15个事件",
"info": [
{
"name": "影响指标",
"value": "每分钟错误数, 吞吐率, 响应时间, 错误率"
},
{
"name": "影响对象",
"value": "com.macro.mall.MallDemoApplication"
},
{
"name": "数据来源",
"value": "Tingyun 3.0 默认数据源"
}
]
},
{
"id": 2,
"name": "2基于AI在2分钟内聚合了3个事件",
"info": [
{
"name": "影响指标",
"value": "0.59625"
},
{
"name": "影响对象",
"value": "KaKa_demo#10.128.1.93#9092#tx_gz"
},
{
"name": "数据来源",
"value": "Zabbix"
}
]
},
{
"id": 3,
"name": "3基于AI在1小时37分钟48秒内聚合了4个事件",
"info": [
{
"name": "影响指标",
"value": "每分钟错误数, 吞吐率, 响应时间, 错误率"
},
{
"name": "影响对象",
"value": "com.macro.mall.MallDemoApplication"
},
{
"name": "数据来源",
"value": "Tingyun 3.0 默认数据源"
}
]
},
{
"id": 4,
"name": "4基于AI在3小时41分钟1秒内聚合了24个事件",
"info": [
{
"name": "影响指标",
"value": "每分钟错误数, 吞吐率, 响应时间, 错误率"
},
{
"name": "影响对象",
"value": "com.macro.mall.MallDemoApplication"
},
{
"name": "数据来源",
"value": "Tingyun 3.0 默认数据源"
}
]
},
{
"id": 5,
"name": "5基于AI在1小时53秒内聚合了2个事件",
"info": [
{
"name": "影响指标",
"value": "每分钟错误数, 吞吐率, 响应时间, 错误率"
},
{
"name": "影响对象",
"value": "com.macro.mall.MallDemoApplication"
},
{
"name": "数据来源",
"value": "Tingyun 3.0 默认数据源"
}
]
}
],
"series": [
{
"id": 1,
"name": "G1-URI/actuator/info-001",
"value": 44,
"groupId": 1
},
{
"id": 2,
"name": "G1-URI/actuator/info-002",
"value": 45,
"groupId": 1
},
{
"id": 3,
"name": "G2-URI/actuator/info-003",
"value": 56,
"groupId": 2
},
{
"id": 4,
"name": "G3-URI/actuator/info-004",
"value": 65,
"groupId": 3
},
{
"id": 5,
"name": "G4-URI/actuator/info-005",
"value": 34,
"groupId": 4
},
{
"id": 6,
"name": "G5-URI/actuator/info-006",
"value": 56,
"groupId": 5
},
{
"id": 7,
"name": "G5-URI/actuator/info-007",
"value": 78,
"groupId": 5
},
{
"id": 8,
"name": "G4-URI/actuator/info-008",
"value": 34,
"groupId": 4
},
{
"id": 9,
"name": "G3-URI/actuator/info-009",
"value": 23,
"groupId": 3
},
{
"id": 10,
"name": "G2-URI/actuator/info-010",
"value": 66,
"groupId": 2
}
]
}
告警信息
组件名称：告警信息
组件样式：
组件说明：
配置项如下：
- 字号
- 粗细
- 文字间距
当告警信息出现series不为空时组件出现，当series = null 时组件消失。
请求方式：POST
https://doc.tingyun.com/sense/example/alarminfolist.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| color | String | 组件颜色 |
| title | String | 组件最左侧大号标题 |
| series | Array | 组件数据，当series = null 时组件会消失 |
| name | String | 子数据的标题 |
| value | String | 子数据的内容 |
示例：
{
"color": "#f52626",
"title": "严重",
"series": [
{
"name": "发生时间",
"value": "2021-06-1710:53:23"
},
{
"name": "持续时间",
"value": "4分钟"
},
{
"name": "事件对象",
"value": "wangyiyouche/mu/chemy"
},
{
"name": "事件路述",
"value": "严重告警 onBeady 大于或等于阈值(onReady:1029ms，阈值:800ms)"
}
]
}
翻页列表
组件名称：翻页列表
组件样式：
组件说明：
配置项如下：
- 文字大小
- 每页显示行数
- 每行停留时间
- 表格偏移设置
- 表格颜色配置
请求方式：POST
https://doc.tingyun.com/sense/example/tablelist.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| seriestitle | Array[String] | 表格头部 |
| textAlign | Array[String] | 表格默认偏移设置（可以通过配置项修改） |
| thwidth | Array[number] | 表格相对宽度设置 |
| params | Array[object] | 每列数据的额外非显示数据（非必须参数，可用于回调联动） |
| series | Array[Array] | 数据列，数据长度和表格头部长度一致 |
示例：
{
"seriestitle": [
"页面名称",
"PV(万次)",
"onReady(ms)",
"加载耗时(ms)",
"性能评分"
],
"textAlign": [
"left",
"center",
"center",
"center",
"center"
],
"thwidth": [
30,
20,
20,
20,
20
],
"params": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
},
{
"id": 4
},
{
"id": 5
}
],
"series": [
[
"网易Al体验中心-首页",
24.24,
150,
286,
98
],
[
"wangyiai/my/cherry",
11.5,
432,
989,
92
],
[
"wangyiai/card",
10.89,
167,
176,
89
],
[
"wangyiai/loopart",
83.12,
289,
327,
72
],
[
"网易Al体验中心-订单",
8.36,
150,
286,
71
]
]
}
混合列表
雷达图列表
组件名称： 雷达图列表
组件样式：
组件说明：
雷达图列表返回格式。
请求方式：POST
https://doc.tingyun.com/sense/example/radarapp.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 | 数据对象。 |
| seriestitle | Object[] | 表格头部字段 |
| textAlign | Object[] | 表格列表的css样式“text-align”,left,right.center…… |
| series | Object[] | 表格body数据 |
| radars | Object[] | 雷达图数据，长度与表格body的行数一致 |
| value | Number | 数字0-100 |
| indicator | Object[] | 雷达图指标配置，支持5或者6个指标。 |
| name | String | 指标名称。 |
| max | String | 指标最大值。 |
| series | Object[] | |
| name | Number | 名称。 |
| value | Object[] | 格指标数据,跟指标配置一一对应。 |
示例：
{
"seriestitle": [
"应用名称",
"打分"
],
"textAlign": [
"left",
"center"
],
"series": [
[
"Test_health_0",
95
],
[
"Test_health_1",
88
],
[
"Test_health_2",
78
],
[
"Test_health_3",
85
]
],
"radars": [
{
"value": 95,
"indicator": [
{
"name": "白屏",
"max": 100
},
{
"name": "慢页面占比",
"max": 100
},
{
"name": "可交互",
"max": 100
},
{
"name": "操作时间",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "首屏",
"max": 100
}
],
"series": [
{
"name": "用户体验评分",
"value": [
58,
80,
64,
61,
1,
95
]
}
]
},
{
"value": 88,
"indicator": [
{
"name": "白屏",
"max": 100
},
{
"name": "慢页面占比",
"max": 100
},
{
"name": "可交互",
"max": 100
},
{
"name": "操作时间",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "首屏",
"max": 100
}
],
"series": [
{
"name": "用户体验评分",
"value": [
94,
69,
99,
90,
69,
78
]
}
]
},
{
"value": 78,
"indicator": [
{
"name": "白屏",
"max": 100
},
{
"name": "慢页面占比",
"max": 100
},
{
"name": "可交互",
"max": 100
},
{
"name": "操作时间",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "首屏",
"max": 100
}
],
"series": [
{
"name": "用户体验评分",
"value": [
94,
15,
74,
16,
20,
84
]
}
]
},
{
"value": 85,
"indicator": [
{
"name": "白屏",
"max": 100
},
{
"name": "慢页面占比",
"max": 100
},
{
"name": "可交互",
"max": 100
},
{
"name": "操作时间",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "首屏",
"max": 100
}
],
"series": [
{
"name": "用户体验评分",
"value": [
99,
19,
63,
54,
57,
10
]
}
]
}
]
}
雷达图列表2
组件名称： 雷达图列表2
组件样式：
组件说明：
API同雷达图列表。
雷达图支持任意多边形。支持通过API来控制是否显示左侧雷达图。
雷达图的颜色依赖右侧的列表。雷达图中间可以传字符串，比如”良好“、‘’一般‘’等。
请求方式：POST
https://doc.tingyun.com/sense/example/radarapp.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| seriestitle | Object[] | 表格头部字段 |
| textAlign | Object[] | 表格列表的css样式“text-align”,left,right.center…… |
| series | Object[] | 表格body数据 |
| radars | Object[] | 雷达图数据，长度与表格body的行数一致。可不传该参数。 |
示例1
{
"seriestitle": [
"应用名称",
"打分"
],
"textAlign": [
"left",
"center"
],
"series": [
[
"Test_health_0",
95
],
[
"Test_health_1",
88
],
[
"Test_health_2",
78
],
[
"Test_health_3",
85
]
]
}
示例2:
{
"seriestitle": [
"应用名称",
"打分"
],
"textAlign": [
"left",
"center"
],
"series": [
[
"Test_health_0",
95
],
[
"Test_health_1",
88
],
[
"Test_health_2",
78
],
[
"Test_health_3",
85
]
],
"radars": [
{
"value": 95,
"indicator": [
{
"name": "白屏",
"max": 100
},
{
"name": "慢页面占比",
"max": 100
},
{
"name": "可交互",
"max": 100
},
{
"name": "操作时间",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "首屏",
"max": 100
}
],
"series": [
{
"name": "用户体验评分",
"value": [
58,
80,
64,
61,
1,
95
]
}
]
},
{
"value": 88,
"indicator": [
{
"name": "白屏",
"max": 100
},
{
"name": "慢页面占比",
"max": 100
},
{
"name": "可交互",
"max": 100
},
{
"name": "操作时间",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "首屏",
"max": 100
}
],
"series": [
{
"name": "用户体验评分",
"value": [
94,
69,
99,
90,
69,
78
]
}
]
},
{
"value": 78,
"indicator": [
{
"name": "白屏",
"max": 100
},
{
"name": "慢页面占比",
"max": 100
},
{
"name": "可交互",
"max": 100
},
{
"name": "操作时间",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "首屏",
"max": 100
}
],
"series": [
{
"name": "用户体验评分",
"value": [
94,
15,
74,
16,
20,
84
]
}
]
},
{
"value": 85,
"indicator": [
{
"name": "白屏",
"max": 100
},
{
"name": "慢页面占比",
"max": 100
},
{
"name": "可交互",
"max": 100
},
{
"name": "操作时间",
"max": 100
},
{
"name": "操作可用性",
"max": 100
},
{
"name": "首屏",
"max": 100
}
],
"series": [
{
"name": "用户体验评分",
"value": [
99,
19,
63,
54,
57,
10
]
}
]
}
]
}
概览列表
组件名称： 概览列表
组件样式：
组件说明：
普通列表返回格式。
请求方式：POST
https://doc.tingyun.com/sense/example/sense3List.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| status | Number | 状态码 |
| series | Object[] | |
| header | Object[] | 列表header |
| list | Object[] | 列表数据 |
| other | Object[] | 其它数据(可选字段) |
| name | String | 指标名称 |
| value | Number | 指标值 |
示例：
HTTP/1.1 200 OK
{
"status": 200,
"series": [
{
"header": [
{"key1":"健康度"},
{"key2":"业务系统"},
{"key3":"响应时间"},
{"key4":"吞吐率"},
{"key5":"峰值吞吐率"}
],
"list": [
{"key1":"良好","key2":80,"key3":"卡顿","key4":"12%","key5":"12%"},
{"key1":"一般","key2":80,"key3":"崩溃","key4":"12%","key5":"12%"},
{"key1":"严重","key2":80,"key3":"想用时间","key4":"12%","key5":"12%"},
],
"other":[
{"name":"总任务数","value":155},
{"name":"任务类型数","value":"33ms"},
]
}
]
}
关系图
拓扑
组件名称：拓扑
组件样式：
组件说明： TOPO组件返回格式。
请求方式：POST
https://doc.tingyun.com/sense/example/topo.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| status | number | 状态 |
| data | Object | 拓扑数据，类型为对象 |
| linkeDataArray | Object[] | 拓扑连线数据，类型为数组 |
| respTime | number | 响应时间 |
| error | number | 错误率 |
| maxThrought | number | 最大响应时间 |
| from | string | 开始节点 |
| to | string | 连接节点 |
| nodeDataArray | Object[] | 拓扑节点数据，类型为数组 |
| id | string | 节点ID, from, to, 当type=11的时候, id拼接逻辑xx_[0-type]_x_x_x, type为前端应用分类,APPLICATION,BROWSER,NETWORK,APP,USER; 当type=14的时候,id拼接逻辑x_x_x_x_type_x, type为数据库类型分类, ORACLE,MYSQL,DB2,OTHER; 当type=15的时候,id拼接逻辑x_x_x_x_type_x, type为NOSQL类型分类,REDIS,MEMCACHED,MONGODB,OTHER; |
| graphId | number | 节点位置ID |
| type | number | 节点类型 FRONT = 11;APPLICATION = 12;BIZSYSTEM = 13;DATABASE = 14;NOSQL = 15;MQ = 16;EXTERNAL = 17;GROUP = 18; |
| info | Object | 节点详情，类型为对象 |
| name | string | 节点名称 |
| health | number | 健康度, 节点颜色标识 -1=默认, 0=健康, 1=警戒, 2=严重, 5=取消 |
| subType | number | 节点type=12的时候二级分类, Oracle = 1;MySQL = 2;PostgreSQL = 3;SQLServer = 4;DB2 = 5;SQLite = 6;Sybase = 7;Derby = 8;Unknown = 9; |
示例：
{
"status": 200,
"data":{
"linkeDataArray":[{
"from": "1169_[0-User]_0_0_0_[User]",
"to": "1169_2397_0_0_0_[apm-dc-server]",
"error": 2,
"respTime": 312.0263,
"response": 28,
"maxThrought": 0.04
},{
"error": 2,
"from": "1169_2397_0_0_0_[apm-dc-server]",
"respTime": 0,
"response": 28,
"maxThrought": 2.13,
"to": "1169_0_0_MQ_Kafka_[Kafka]"
},{
"error": 5,
"from": "1169_2397_0_0_0_[apm-dc-server]",
"maxThrought": 3.08,
"respTime": 0,
"response": 28,
"to": "1169_0_0_Database_MySQL_[MySQL]"
},{
"error": 1,
"from": "1169_2397_0_0_0_[apm-dc-server]",
"response": 37,
"maxThrought": 0.01,
"respTime": 0,
"to": "1169_0_0_External_dubbo_[dubbo]"
},{
"error": 2,
"from": "1169_2397_0_0_0_[apm-dc-server]",
"response": 0,
"maxThrought": 6.58,
"respTime": 0,
"to": "1169_0_0_NoSQL_Redis_[Redis]"
}],
"nodeDataArray":[{
"graphId": 16553,
"id": "1169_2397_0_0_0_[apm-dc-server]",
"type": 12,
"info":{
"name":"A",
"subType": 1
}
},{
"graphId": 16557,
"id": "1169_[0-User]_0_0_0_[User]",
"type": 11,
"info":{
"name":"B"
}
},{
"cursor": "pointer",
"fill": "#0085c9",
"graphId": 16565,
"id": "1169_0_0_Database_MySQL_[MySQL]",
"type": 14,
"info":{
"name":"C",
"subType": 2
}
},{
"graphId": 16566,
"id": "1169_0_0_External_dubbo_[dubbo]",
"type": 17,
"info":{
"name":"D"
}
},{
"graphId": 16564,
"id": "1169_0_0_MQ_Kafka_[Kafka]",
"type": 16,
"info":{
"name":"E"
}
},{
"graphId": 16567,
"id": "1169_0_0_NoSQL_Redis_[Redis]",
"show": 1,
"type": 15,
"info":{
"name":"F"
}
}]
}
}
3D桑基图
组件名称： 3D桑基图
组件样式：
组件说明： 桑基图组件返回格式。
请求方式：POST
https://doc.tingyun.com/sense/example/sankey.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token)。例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行MD5运算。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| nodes | Object[] | 节点数组。 |
| id | Number、String | ID可以是字符串或者数字。 |
| name | String | 节点的名称。 |
| links | Object[] | 链接数组。 |
| from | Number | 链接的起点，对应节点在数组中的下标（不是ID）。 |
| to | Number | 链接的终点，对应节点在数组中的下标（不是ID）。 |
| weight | Number | 链接的宽度。 |
说明：nodes中的id最好采用数组的下标，方便与links中对应。
示例： 示例1：
{
"nodes": [
{ "id": 0, "name": "node0" },
{ "id": 1, "name": "node1" },
{ "id": 2, "name": "node2" },
{ "id": 3, "name": "node3" },
{ "id": 4, "name": "node4" }
],
"links": [
{ "from": 0, "to": 2, "weight": 8 },
{ "from": 1, "to": 2, "weight": 2 },
{ "from": 1, "to": 3, "weight": 2 },
{ "from": 0, "to": 3, "weight": 2 },
{ "from": 2, "to": 3, "weight": 2 },
{ "from": 2, "to": 4, "weight": 2 },
{ "from": 3, "to": 4, "weight": 4 }
]
}
示例2：
links中字段名称也可以采用另外一种表示法：source-target-value，他们分布对应from-to-weight。
{
"nodes": [
{ "node": 0, "name": "node0" },
{ "node": 1, "name": "node1" },
{ "node": 2, "name": "node2" },
{ "node": 3, "name": "node3" },
{ "node": 4, "name": "node4" },
{ "node": 5, "name": "node5" },
{ "node": 6, "name": "node6" },
{ "node": 7, "name": "node7" },
{ "node": 8, "name": "node8" },
{ "node": 9, "name": "node9" },
{ "node": 10, "name": "node10" },
],
"links": [
{ "source": 0, "target": 1, "value": 1 },
{ "source": 0, "target": 2, "value": 1 },
{ "source": 0, "target": 3, "value": 2 },
{ "source": 0, "target": 4, "value": 1 },
{ "source": 0, "target": 5, "value": 1 },
{ "source": 1, "target": 6, "value": 1 },
{ "source": 2, "target": 7, "value": 1 },
{ "source": 3, "target": 7, "value": 2 },
{ "source": 4, "target": 8, "value": 1 },
{ "source": 5, "target": 9, "value": 1 },
{ "source": 7, "target": 10, "value": 3 },
{ "source": 8, "target": 10, "value": 1 },
{ "source": 6, "target": 10, "value": 1 },
]
}
层级树
组件名称：层级树
组件样式：
组件说明： 类似层级和数结构的功能组件。有明确的层级关系，需要通过参数指定层级。 组件支持任意多层级，层级的图片暂时不支持修改，三级和三级以下图标都一样。 组件支持自由拖动位置并保存位置。组件的颜色支持通过自定义修改。
请求方式：POST
https://doc.tingyun.com/sense/example/hierarchytree.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行MD5。 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| nodes | Array | 节点数组 |
| id | string | 唯一的id |
| zIndex | number | 层级，值越小层级越高 |
| name | string | 节点名称 |
| value | string/number | 节点在值，可以是数字或者字符串（如：良好，优秀） |
| links | Array | 链接数组 |
| source | string | 指向链接的起点的id |
| target | String | 指向链接的终点的id |
示例：
{
"nodes": [
{ "id": "a1", "zIndex": 1, "name": "主调中心-南京", "value": 78 },
{ "id": "a2", "zIndex": 1, "name": "主调中心-扬州", "value": 87 },
{ "id": "b1", "zIndex": 2, "name": "扬州汇集中心", "value": 54 },
{ "id": "b2", "zIndex": 2, "name": "淮安汇集中心", "value": 65 },
{ "id": "b3", "zIndex": 2, "name": "宿迁汇聚中心", "value": 57 },
{ "id": "b4", "zIndex": 2, "name": "徐州汇聚中心", "value": 55 },
{ "id": "c1", "zIndex": 3, "name": "扬州分公司", "value": 23 },
{ "id": "c2", "zIndex": 3, "name": "宝应站", "value": 22 },
{ "id": "c3", "zIndex": 3, "name": "金湖站", "value": 25 },
{ "id": "c4", "zIndex": 3, "name": "淮安分公司", "value": 26 },
{ "id": "c5", "zIndex": 3, "name": "淮阴三站", "value": 28 },
{ "id": "c6", "zIndex": 3, "name": "淮安四站", "value": 12 },
{ "id": "c7", "zIndex": 3, "name": "洪泽站", "value": 17 },
{ "id": "c8", "zIndex": 3, "name": "宿迁分公司", "value": 26 },
{ "id": "c9", "zIndex": 3, "name": "刘老涧二站", "value": 34 },
{ "id": "c10", "zIndex": 3, "name": "泗洪站", "value": 38 },
{ "id": "c11", "zIndex": 3, "name": "泗阳站", "value": 23 },
{ "id": "c12", "zIndex": 3, "name": "睢陵二站", "value": 19 },
{ "id": "c13", "zIndex": 3, "name": "皂河二站", "value": 12 },
{ "id": "c14", "zIndex": 3, "name": "徐州分公司", "value": 27 },
{ "id": "c15", "zIndex": 3, "name": "刘山站", "value": 23 },
{ "id": "c16", "zIndex": 3, "name": "邳州站", "value": 22 },
{ "id": "c17", "zIndex": 3, "name": "解台站", "value": 45 },
{ "id": "c18", "zIndex": 3, "name": "蔺家坝站", "value": 21 }
],
"links": [
{ "source": "a1", "target": "a2" },
{ "source": "a1", "target": "b1" },
{ "source": "a1", "target": "b2" },
{ "source": "a1", "target": "b3" },
{ "source": "a1", "target": "b4" },
{ "source": "a2", "target": "b1" },
{ "source": "a2", "target": "b2" },
{ "source": "a2", "target": "b3" },
{ "source": "a2", "target": "b4" },
{ "source": "b1", "target": "c1" },
{ "source": "b1", "target": "c2" },
{ "source": "b1", "target": "c3" },
{ "source": "b2", "target": "c4" },
{ "source": "b2", "target": "c5" },
{ "source": "b2", "target": "c6" },
{ "source": "b2", "target": "c7" },
{ "source": "b3", "target": "c8" },
{ "source": "b3", "target": "c9" },
{ "source": "b3", "target": "c10" },
{ "source": "b3", "target": "c11" },
{ "source": "b3", "target": "c12" },
{ "source": "b3", "target": "c13" },
{ "source": "b4", "target": "c14" },
{ "source": "b4", "target": "c15" },
{ "source": "b4", "target": "c16" },
{ "source": "b4", "target": "c17" },
{ "source": "b4", "target": "c18" }
]
}
拓扑3D
组件名称：拓扑3D
组件样式：
组件说明： 支持自定义节点颜色和节点节点模型（暂时不支持上传节点模型）。 可以在配置中读取节点的数据，然后根据value字段来设置节点的颜色。
请求方式：POST
https://doc.tingyun.com/sense/example/topo3d.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| nodes | Array | 节点数组 |
| id | String | 节点唯一的id |
| name | String | 节点的名称 |
| value | String/Number | 节点的值支持数字和字符串类型 |
| links | Array | 节点之间的链接 |
| source | String | 链接的起点对应节点的id |
| target | String | 链接的重点对应节点的id |
| info | String | 链接连的名称 |
示例：
{
"nodes": [
{ "id": "1", "name": "节点1", "value": 22 },
{ "id": "2", "name": "节点2", "value": 82 },
{ "id": "3", "name": "节点3", "value": 44 },
{ "id": "4", "name": "节点4", "value": 32 },
{ "id": "5", "name": "节点5", "value": 77 },
{ "id": "6", "name": "节点6", "value": 65 },
{ "id": "7", "name": "节点7", "value": 15 }
],
"links": [
{ "source": "1", "target": "2","info":"节点1->节点2" },
{ "source": "1", "target": "3" },
{ "source": "1", "target": "4" },
{ "source": "1", "target": "5" },
{ "source": "1", "target": "6" },
{ "source": "1", "target": "7" }
]
}
星空环布图
组件名称：星空环布图
组件样式：
组件说明：
组件支持自定义图例颜色，分组颜色以及指针节点颜色配置。
请求方式：POST
https://doc.tingyun.com/example/sense3Hostlist.json
参数：
| 字段 | 类型 | 是否必选 | 描述 |
|---|---|---|---|
| currentTime | Number | 是 | 当前时间戳。 |
| token | String | 否 | 盐值，用于校验参数的完整性。校验规则为md5(timePeriod+currentTime+配置的token)。例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行MD5运算。 |
| timePeriod | Number | 是 | 时间范围分钟数。 |
正确响应数据：
| 字段 | 类型 | 是否必选 | 描述 |
|---|---|---|---|
| legend | Array | 是 | 图例 |
| name | String | 是 | 图例名称 |
| max | Number | 是 | 最大值 |
| color | String | 是 | 图例颜色 |
| group | Array | 是 | 分组信息 |
| id | Number | 是 | 唯一的ID |
| name | String | 是 | 名称 |
| color | String | 是 | 分组颜色 |
| series | Array | 是 | 列表信息 |
| name | String | 是 | 名称 |
| groupId | Number | 是 | 对应的分组ID |
| value | Number | 是 | 值 |
| data | Array | 是 | 数据，数据长度和图例的长度对应 |
示例：
{
"legend": [
{
"name": "CPU使用率",
"max": 100,
"color": "#31F1FF"
},
{
"name": "内存使用率",
"max": 100,
"color": "#704AEA"
},
{
"name": "磁盘容量",
"max": 100,
"color": "#52F8BD"
}
],
"group": [
{
"id": 1,
"name": "业务系统01",
"color": "#00FFF9"
},
{
"id": 2,
"name": "业务系统02",
"color": "#57BFFF"
},
{
"id": 3,
"name": "业务系统03",
"color": "#537FFD"
},
{
"id": 4,
"name": "业务系统04",
"color": "#36FFA0"
}
],
"series": [
{
"name": "G1-demo-base-000",
"groupId": 1,
"value": 4,
"data": [
45,
18,
6
]
},
{
"name": "G1-demo-base-001",
"groupId": 1,
"value": 89,
"data": [
93,
36,
48
]
},
{
"name": "G1-demo-base-002",
"groupId": 1,
"value": 28,
"data": [
45,
37,
17
]
},
{
"name": "G1-demo-base-003",
"groupId": 1,
"value": 51,
"data": [
15,
85,
41
]
},
{
"name": "G1-demo-base-004",
"groupId": 1,
"value": 17,
"data": [
91,
97,
75
]
},
{
"name": "G1-demo-base-005",
"groupId": 1,
"value": 25,
"data": [
12,
95,
94
]
},
{
"name": "G1-demo-base-006",
"groupId": 1,
"value": 51,
"data": [
80,
65,
98
]
},
{
"name": "G1-demo-base-007",
"groupId": 1,
"value": 26,
"data": [
66,
12,
36
]
},
{
"name": "G1-demo-base-008",
"groupId": 1,
"value": 90,
"data": [
86,
23,
64
]
},
{
"name": "G1-demo-base-009",
"groupId": 1,
"value": 64,
"data": [
71,
45,
27
]
},
{
"name": "G1-demo-base-010",
"groupId": 1,
"value": 83,
"data": [
13,
4,
32
]
},
{
"name": "G1-demo-base-011",
"groupId": 1,
"value": 22,
"data": [
51,
12,
89
]
},
{
"name": "G1-demo-base-012",
"groupId": 1,
"value": 98,
"data": [
46,
24,
59
]
},
{
"name": "G1-demo-base-013",
"groupId": 1,
"value": 67,
"data": [
97,
68,
17
]
},
{
"name": "G1-demo-base-014",
"groupId": 1,
"value": 39,
"data": [
8,
70,
70
]
},
{
"name": "G1-demo-base-015",
"groupId": 1,
"value": 8,
"data": [
28,
89,
83
]
},
{
"name": "G2-demo-base-001",
"groupId": 2,
"value": 6,
"data": [
81,
80,
82
]
},
{
"name": "G2-demo-base-002",
"groupId": 2,
"value": 20,
"data": [
52,
31,
34
]
},
{
"name": "G2-demo-base-003",
"groupId": 2,
"value": 8,
"data": [
49,
71,
28
]
},
{
"name": "G2-demo-base-004",
"groupId": 2,
"value": 28,
"data": [
62,
38,
53
]
},
{
"name": "G2-demo-base-005",
"groupId": 2,
"value": 7,
"data": [
15,
40,
72
]
},
{
"name": "G2-demo-base-006",
"groupId": 2,
"value": 49,
"data": [
30,
42,
47
]
},
{
"name": "G2-demo-base-007",
"groupId": 2,
"value": 10,
"data": [
98,
80,
41
]
},
{
"name": "G2-demo-base-008",
"groupId": 2,
"value": 9,
"data": [
96,
34,
21
]
},
{
"name": "G2-demo-base-009",
"groupId": 2,
"value": 17,
"data": [
89,
88,
98
]
},
{
"name": "G2-demo-base-010",
"groupId": 2,
"value": 82,
"data": [
51,
84,
5
]
},
{
"name": "G2-demo-base-011",
"groupId": 2,
"value": 13,
"data": [
86,
79,
88
]
},
{
"name": "G2-demo-base-012",
"groupId": 2,
"value": 57,
"data": [
51,
38,
34
]
},
{
"name": "G2-demo-base-013",
"groupId": 2,
"value": 3,
"data": [
68,
82,
53
]
},
{
"name": "G2-demo-base-014",
"groupId": 2,
"value": 56,
"data": [
52,
71,
70
]
},
{
"name": "G2-demo-base-015",
"groupId": 2,
"value": 45,
"data": [
40,
9,
4
]
},
{
"name": "G2-demo-base-016",
"groupId": 2,
"value": 25,
"data": [
58,
75,
33
]
},
{
"name": "G2-demo-base-017",
"groupId": 2,
"value": 73,
"data": [
45,
23,
94
]
},
{
"name": "G2-demo-base-018",
"groupId": 2,
"value": 61,
"data": [
90,
11,
20
]
},
{
"name": "G2-demo-base-019",
"groupId": 2,
"value": 33,
"data": [
52,
20,
41
]
},
{
"name": "G2-demo-base-020",
"groupId": 2,
"value": 32,
"data": [
62,
19,
95
]
},
{
"name": "G3-demo-base-001",
"groupId": 3,
"value": 38,
"data": [
4,
67,
21
]
},
{
"name": "G3-demo-base-002",
"groupId": 3,
"value": 20,
"data": [
4,
40,
82
]
},
{
"name": "G3-demo-base-003",
"groupId": 3,
"value": 29,
"data": [
95,
30,
64
]
},
{
"name": "G3-demo-base-004",
"groupId": 3,
"value": 38,
"data": [
84,
55,
6
]
},
{
"name": "G3-demo-base-005",
"groupId": 3,
"value": 2,
"data": [
80,
56,
64
]
},
{
"name": "G3-demo-base-006",
"groupId": 3,
"value": 89,
"data": [
91,
39,
12
]
},
{
"name": "G3-demo-base-007",
"groupId": 3,
"value": 18,
"data": [
42,
26,
48
]
},
{
"name": "G3-demo-base-008",
"groupId": 3,
"value": 3,
"data": [
16,
25,
11
]
},
{
"name": "G3-demo-base-009",
"groupId": 3,
"value": 52,
"data": [
41,
66,
89
]
},
{
"name": "G3-demo-base-010",
"groupId": 3,
"value": 48,
"data": [
75,
63,
51
]
},
{
"name": "G3-demo-base-011",
"groupId": 3,
"value": 12,
"data": [
89,
34,
38
]
},
{
"name": "G3-demo-base-012",
"groupId": 3,
"value": 49,
"data": [
95,
53,
68
]
},
{
"name": "G4-demo-base-001",
"groupId": 4,
"value": 58,
"data": [
63,
59,
26
]
},
{
"name": "G4-demo-base-002",
"groupId": 4,
"value": 22,
"data": [
2,
47,
13
]
},
{
"name": "G4-demo-base-003",
"groupId": 4,
"value": 42,
"data": [
3,
2,
71
]
},
{
"name": "G4-demo-base-004",
"groupId": 4,
"value": 38,
"data": [
55,
92,
72
]
},
{
"name": "G4-demo-base-005",
"groupId": 4,
"value": 67,
"data": [
7,
95,
37
]
},
{
"name": "G4-demo-base-006",
"groupId": 4,
"value": 48,
"data": [
16,
90,
60
]
},
{
"name": "G4-demo-base-007",
"groupId": 4,
"value": 32,
"data": [
71,
52,
22
]
},
{
"name": "G4-demo-base-008",
"groupId": 4,
"value": 82,
"data": [
86,
22,
37
]
},
{
"name": "G4-demo-base-009",
"groupId": 4,
"value": 49,
"data": [
76,
51,
45
]
},
{
"name": "G4-demo-base-010",
"groupId": 4,
"value": 97,
"data": [
95,
59,
85
]
},
{
"name": "G4-demo-base-011",
"groupId": 4,
"value": 82,
"data": [
18,
39,
89
]
},
{
"name": "G4-demo-base-012",
"groupId": 4,
"value": 55,
"data": [
88,
72,
63
]
}
]
}
层级树2
组件名称：层级树2
组件样式：
组件说明：
高度定制化组件
类似层级和数结构的功能组件。有明确的层级关系，需要通过参数指定层级。
组件支持自由拖动位置并保存位置。组件的颜色支持通过自定义修改。
组件配合API可支持折叠，甚至支持下钻，鼠标移动到节点上显示节点信息。
请求方式：POST
https://doc.tingyun.com/sense/example/hierarchytree2.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行MD5。 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| nodes | Array | 节点数组 |
| id | string | 唯一的id |
| zIndex | number | 层级，值越小层级越高 |
| name | string | 节点名称 |
| scale | number | 节点缩放系数 |
| info | string | 节点hover信息 |
| hasChildren | boolean | 节点是否 支持折叠 |
| hasNodes | boolean | 节点是否有下钻拓扑 |
| value | string/number | 节点在值，可以是数字或者字符串（如：良好，优秀） |
| links | Array | 链接数组 |
| source | string | 指向链接的起点的id |
| target | String | 指向链接的终点的id |
示例：
{
"nodes": [
{
"id": "a",
"zIndex": 1,
"name": "PEK T2航站楼",
"value": 60,
"scale": 1.5,
"hasChildren": true
},
{
"id": "b",
"zIndex": 1,
"name": "PEK T3航站楼",
"value": 90,
"scale": 1.5,
"hasChildren": true
},
{
"id": "c",
"zIndex": 1,
"name": "PEK T1网络",
"value": 98,
"scale": 1.5
},
{
"id": "d",
"zIndex": 1,
"name": "PEK T1 3A",
"value": 96,
"scale": 1.5
},
{
"id": "e",
"zIndex": 1,
"name": "PEK T1主机",
"value": 88,
"scale": 1.5
},
{
"id": "a1",
"zIndex": 2,
"name": "A",
"value": 11,
"scale": 1
},
{
"id": "a2",
"zIndex": 2,
"name": "B",
"value": 22,
"scale": 1
},
{
"id": "a3",
"zIndex": 2,
"name": "C",
"value": 33,
"scale": 1
},
{
"id": "a4",
"zIndex": 2,
"name": "J",
"value": 44,
"scale": 1
},
{
"id": "a5",
"zIndex": 2,
"name": "D",
"value": 55,
"scale": 1
},
{
"id": "a6",
"zIndex": 2,
"name": "G",
"value": 66,
"scale": 1
},
{
"id": "b1",
"zIndex": 2,
"name": "A",
"value": 22,
"scale": 1
},
{
"id": "b2",
"zIndex": 2,
"name": "G",
"value": 33,
"scale": 1
},
{
"id": "b3",
"zIndex": 2,
"name": "F",
"value": 44,
"scale": 1
},
{
"id": "b4",
"zIndex": 2,
"name": "J",
"value": 55,
"scale": 1
},
{
"id": "b5",
"zIndex": 2,
"name": "H",
"value": 66,
"scale": 1
},
{
"id": "z1",
"zIndex": 3,
"name": "MCSS-DCS01",
"value": 66,
"scale": 1.8
},
{
"id": "z2",
"zIndex": 3,
"name": "OMSE01",
"value": 66,
"scale": 1.8
},
{
"id": "z3",
"zIndex": 3,
"name": "网络单元1",
"value": 55,
"scale": 1.4
},
{
"id": "z4",
"zIndex": 3,
"name": "网络单元2",
"value": 44,
"scale": 1.5
},
{
"id": "z5",
"zIndex": 3,
"name": "网络单元3",
"value": 33,
"scale": 1.5
},
{
"id": "z6",
"zIndex": 3,
"name": "网络单元4",
"value": 22,
"scale": 1.5
},
{
"id": "z7",
"zIndex": 3,
"name": "网络单元5",
"value": 11,
"scale": 1.5
},
{
"id": "z8",
"zIndex": 3,
"name": "网络单元6",
"value": 66,
"scale": 1.5
},
{
"id": "z9",
"zIndex": 3,
"name": "网络单元7",
"value": 55,
"scale": 1
},
{
"id": "z10",
"zIndex": 3,
"name": "网络单元8",
"value": 44,
"scale": 1
}
],
"links": [
{
"source": "a",
"target": "a1",
"value": 1
},
{
"source": "a",
"target": "a2",
"value": 1
},
{
"source": "a",
"target": "a3",
"value": 1
},
{
"source": "a",
"target": "a4",
"value": 1
},
{
"source": "a",
"target": "a5",
"value": 1
},
{
"source": "a",
"target": "a6",
"value": 1
},
{
"source": "b",
"target": "b1",
"value": 1
},
{
"source": "b",
"target": "b2",
"value": 1
},
{
"source": "b",
"target": "b3",
"value": 1
},
{
"source": "b",
"target": "b4",
"value": 1
},
{
"source": "b",
"target": "b5",
"value": 1
},
{
"source": "a1",
"target": "z1",
"value": 1
},
{
"source": "a2",
"target": "z1",
"value": 1
},
{
"source": "a3",
"target": "z1",
"value": 1
},
{
"source": "a4",
"target": "z1",
"value": 1
},
{
"source": "a5",
"target": "z1",
"value": 1
},
{
"source": "a6",
"target": "z1",
"value": 1
},
{
"source": "b1",
"target": "z1",
"value": 1
},
{
"source": "b2",
"target": "z1",
"value": 1
},
{
"source": "b3",
"target": "z1",
"value": 1
},
{
"source": "b4",
"target": "z1",
"value": 1
},
{
"source": "b5",
"target": "z1",
"value": 1
},
{
"source": "c",
"target": "z2",
"value": 4
},
{
"source": "d",
"target": "z1",
"value": 4
},
{
"source": "e",
"target": "z3",
"value": 4
},
{
"source": "a2",
"target": "z2",
"value": 1
},
{
"source": "a2",
"target": "z4",
"value": 1
},
{
"source": "a2",
"target": "z8",
"value": 1
},
{
"source": "a2",
"target": "z10",
"value": 1
},
{
"source": "a3",
"target": "z10",
"value": 1
},
{
"source": "a4",
"target": "z1",
"value": 1
},
{
"source": "a4",
"target": "z4",
"value": 1
},
{
"source": "a5",
"target": "z1",
"value": 1
},
{
"source": "a5",
"target": "z6",
"value": 1
},
{
"source": "a5",
"target": "z1",
"value": 1
},
{
"source": "a5",
"target": "z7",
"value": 1
},
{
"source": "b1",
"target": "z4",
"value": 1
},
{
"source": "b2",
"target": "z7",
"value": 1
},
{
"source": "b3",
"target": "z8",
"value": 1
},
{
"source": "b4",
"target": "z5",
"value": 1
},
{
"source": "b5",
"target": "z9",
"value": 1
}
]
}
下钻示例：
{
"nodes": [
{
"id": "a0",
"zIndex": 1,
"name": "防火墙",
"value": 10,
"scale": 1,
"info": "报警:XXX-XUIO-001"
},
{
"id": "b0",
"zIndex": 2,
"name": "负载均衡",
"value": 80,
"scale": 1
},
{
"id": "c0",
"zIndex": 3,
"name": "MQ3A-1",
"value": 10,
"scale": 1
},
{
"id": "c1",
"zIndex": 3,
"name": "MCSS-2",
"value": 80,
"scale": 1,
"hasNodes": true
},
{
"id": "c2",
"zIndex": 3,
"name": "MCSS-3",
"value": 10,
"scale": 1
},
{
"id": "c3",
"zIndex": 3,
"name": "MCSS-4",
"value": 10,
"scale": 1,
"info": "报警:XXX-MUIK-002"
},
{
"id": "c4",
"zIndex": 3,
"name": "MQ3A-5",
"value": 10,
"scale": 1,
"info": "报警:XXX-YUIN-003"
},
{
"id": "d0",
"zIndex": 4,
"name": "Rounter_DCS",
"value": 10,
"scale": 1
},
{
"id": "e0",
"zIndex": 5,
"name": "RCPE-E0",
"value": 10,
"scale": 1
},
{
"id": "e1",
"zIndex": 5,
"name": "RCPE-E1",
"value": 10,
"scale": 1
},
{
"id": "e2",
"zIndex": 5,
"name": "RCPE-E2",
"value": 10,
"scale": 1
},
{
"id": "f0",
"zIndex": 6,
"name": "OMSE-F0",
"value": 10,
"scale": 1
},
{
"id": "f1",
"zIndex": 6,
"name": "OMSE-F1",
"value": 10,
"scale": 1
},
{
"id": "f2",
"zIndex": 6,
"name": "OMSE-F2",
"value": 10,
"scale": 1
},
{
"id": "f3",
"zIndex": 6,
"name": "OMSE-F3",
"value": 10,
"scale": 1
},
{
"id": "f4",
"zIndex": 6,
"name": "OMSE-F4",
"value": 10,
"scale": 1
}
],
"links": [
{
"source": "a0",
"target": "b0",
"value": 2
},
{
"source": "b0",
"target": "c1",
"value": 1
},
{
"source": "b0",
"target": "e2",
"value": 1
},
{
"source": "b0",
"target": "c2",
"value": 1
},
{
"source": "b0",
"target": "c3",
"value": 1
},
{
"source": "c1",
"target": "c0",
"value": 1
},
{
"source": "c3",
"target": "c4",
"value": 1
},
{
"source": "c1",
"target": "d0",
"value": 1
},
{
"source": "c2",
"target": "d0",
"value": 1
},
{
"source": "c3",
"target": "d0",
"value": 1
},
{
"source": "d0",
"target": "e0",
"value": 1
},
{
"source": "d0",
"target": "e1",
"value": 1
},
{
"source": "d0",
"target": "e2",
"value": 1
},
{
"source": "e0",
"target": "f0",
"value": 1
},
{
"source": "e0",
"target": "f1",
"value": 1
},
{
"source": "e1",
"target": "f1",
"value": 1
},
{
"source": "e1",
"target": "f2",
"value": 1
},
{
"source": "e2",
"target": "f2",
"value": 1
},
{
"source": "e2",
"target": "f3",
"value": 1
},
{
"source": "e2",
"target": "f4",
"value": 1
}
],
"childrenNodes": [
{
"id": "c1",
"data": {
"nodes": [
{
"id": "a0",
"zIndex": 1,
"name": "逻辑服务器单元1",
"value": 80,
"scale": 1,
"info": {}
},
{
"id": "a1",
"zIndex": 1,
"name": "逻辑服务器单元2",
"value": 10,
"scale": 1
},
{
"id": "b0",
"zIndex": 2,
"name": "RP-HSY-AZI-XX01",
"value": 10,
"scale": 1
},
{
"id": "c0",
"zIndex": 3,
"name": "虚拟化宿主单元1",
"value": 10,
"scale": 1
},
{
"id": "c1",
"zIndex": 3,
"name": "虚拟化宿主单元2",
"value": 10,
"scale": 1
},
{
"id": "c2",
"zIndex": 3,
"name": "虚拟化宿主单元3",
"value": 10,
"scale": 1
},
{
"id": "d0",
"zIndex": 4,
"name": "物理服务器设备1",
"value": 10,
"scale": 1
},
{
"id": "d1",
"zIndex": 4,
"name": "物理服务器设备2",
"value": 10,
"scale": 1
},
{
"id": "d2",
"zIndex": 4,
"name": "物理服务器设备3",
"value": 10,
"scale": 1
}
],
"links": [
{
"source": "a0",
"target": "b0",
"value": 1
},
{
"source": "a1",
"target": "b0",
"value": 1
},
{
"source": "b0",
"target": "c0",
"value": 1
},
{
"source": "b0",
"target": "c1",
"value": 1
},
{
"source": "b0",
"target": "c2",
"value": 1
},
{
"source": "c0",
"target": "d0",
"value": 1
},
{
"source": "c1",
"target": "d1",
"value": 1
},
{
"source": "c2",
"target": "d2",
"value": 1
}
]
}
}
]
}
环形拓扑
组件名称： 环形拓扑
组件样式：
组件说明：
环形拓扑图，需要指定层级。
请求方式：POST
https://doc.tingyun.com/sense/example/ringtopology.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token)。例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行MD5运算。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| nodes | Object[] | 节点数组。 |
| id | Number、String | ID可以是字符串或者数字。 |
| name | String | 节点的名称。 |
| zIndex | Number | 节点的层级。 |
| links | Object[] | 链接数组。 |
| source | Number | 链接的起点，对应节点在数组中的下标（不是ID）。 |
| target | Number | 链接的终点，对应节点在数组中的下标（不是ID）。 |
| value | Number | 链接的值。 |
说明：nodes中的id最好采用数组的下标，方便与links中对应。
示例： 示例1：
{
"nodes": [
{
"id": 0,
"zIndex": 1,
"name": "节点0",
"value": 22
},
{
"id": 1,
"zIndex": 1,
"name": "节点1",
"value": 87
},
{
"id": 2,
"zIndex": 1,
"name": "节点2",
"value": 49
},
{
"id": 3,
"zIndex": 1,
"name": "节点3",
"value": 22
},
{
"id": 4,
"zIndex": 1,
"name": "节点4",
"value": 50
},
{
"id": 5,
"zIndex": 1,
"name": "节点5",
"value": 82
},
{
"id": 6,
"zIndex": 1,
"name": "节点6",
"value": 49
},
{
"id": 7,
"zIndex": 1,
"name": "节点7",
"value": 40
},
{
"id": 8,
"zIndex": 1,
"name": "节点8",
"value": 86
},
{
"id": 9,
"zIndex": 1,
"name": "节点9",
"value": 57
},
{
"id": 10,
"zIndex": 1,
"name": "节点10",
"value": 55
},
{
"id": 11,
"zIndex": 1,
"name": "节点11",
"value": 91
},
{
"id": 12,
"zIndex": 1,
"name": "节点12",
"value": 28
},
{
"id": 13,
"zIndex": 1,
"name": "节点13",
"value": 73
},
{
"id": 14,
"zIndex": 1,
"name": "节点14",
"value": 73
},
{
"id": 15,
"zIndex": 1,
"name": "节点15",
"value": 76
},
{
"id": 16,
"zIndex": 1,
"name": "节点16",
"value": 96
},
{
"id": 17,
"zIndex": 1,
"name": "节点17",
"value": 64
},
{
"id": 18,
"zIndex": 1,
"name": "节点18",
"value": 55
},
{
"id": 19,
"zIndex": 1,
"name": "节点19",
"value": 19
}
],
"links": [
{
"source": 0,
"target": 0,
"value": 66
},
{
"source": 1,
"target": 0,
"value": 53
},
{
"source": 2,
"target": 0,
"value": 63
},
{
"source": 3,
"target": 1,
"value": 16
},
{
"source": 4,
"target": 2,
"value": 32
},
{
"source": 5,
"target": 1,
"value": 80
},
{
"source": 6,
"target": 2,
"value": 23
},
{
"source": 7,
"target": 2,
"value": 12
},
{
"source": 8,
"target": 6,
"value": 80
},
{
"source": 9,
"target": 3,
"value": 61
},
{
"source": 10,
"target": 1,
"value": 99
},
{
"source": 11,
"target": 0,
"value": 13
},
{
"source": 12,
"target": 0,
"value": 33
},
{
"source": 13,
"target": 11,
"value": 38
},
{
"source": 14,
"target": 13,
"value": 17
},
{
"source": 15,
"target": 9,
"value": 86
},
{
"source": 16,
"target": 0,
"value": 84
},
{
"source": 17,
"target": 11,
"value": 43
},
{
"source": 18,
"target": 5,
"value": 13
},
{
"source": 19,
"target": 8,
"value": 99
}
]
}
示例2：
zIndex分两层
{
"nodes": [
{
"id": 0,
"zIndex": 1,
"name": "节点0",
"value": 98
},
{
"id": 1,
"zIndex": 1,
"name": "节点1",
"value": 57
},
{
"id": 2,
"zIndex": 1,
"name": "节点2",
"value": 26
},
{
"id": 3,
"zIndex": 1,
"name": "节点3",
"value": 95
},
{
"id": 4,
"zIndex": 1,
"name": "节点4",
"value": 58
},
{
"id": 5,
"zIndex": 1,
"name": "节点5",
"value": 53
},
{
"id": 6,
"zIndex": 1,
"name": "节点6",
"value": 22
},
{
"id": 7,
"zIndex": 1,
"name": "节点7",
"value": 55
},
{
"id": 8,
"zIndex": 1,
"name": "节点8",
"value": 93
},
{
"id": 9,
"zIndex": 1,
"name": "节点9",
"value": 72
},
{
"id": 10,
"zIndex": 1,
"name": "节点10",
"value": 53
},
{
"id": 11,
"zIndex": 1,
"name": "节点11",
"value": 81
},
{
"id": 12,
"zIndex": 1,
"name": "节点12",
"value": 70
},
{
"id": 13,
"zIndex": 1,
"name": "节点13",
"value": 84
},
{
"id": 14,
"zIndex": 1,
"name": "节点14",
"value": 26
},
{
"id": 15,
"zIndex": 1,
"name": "节点15",
"value": 20
},
{
"id": 16,
"zIndex": 1,
"name": "节点16",
"value": 50
},
{
"id": 17,
"zIndex": 1,
"name": "节点17",
"value": 91
},
{
"id": 18,
"zIndex": 1,
"name": "节点18",
"value": 18
},
{
"id": 19,
"zIndex": 1,
"name": "节点19",
"value": 40
},
{
"id": 20,
"zIndex": 1,
"name": "节点20",
"value": 63
},
{
"id": 21,
"zIndex": 1,
"name": "节点21",
"value": 21
},
{
"id": 22,
"zIndex": 1,
"name": "节点22",
"value": 71
},
{
"id": 23,
"zIndex": 1,
"name": "节点23",
"value": 92
},
{
"id": 24,
"zIndex": 1,
"name": "节点24",
"value": 11
},
{
"id": 25,
"zIndex": 1,
"name": "节点25",
"value": 16
},
{
"id": 26,
"zIndex": 1,
"name": "节点26",
"value": 99
},
{
"id": 27,
"zIndex": 1,
"name": "节点27",
"value": 94
},
{
"id": 28,
"zIndex": 1,
"name": "节点28",
"value": 88
},
{
"id": 29,
"zIndex": 1,
"name": "节点29",
"value": 86
},
{
"id": 30,
"zIndex": 1,
"name": "节点30",
"value": 71
},
{
"id": 31,
"zIndex": 1,
"name": "节点31",
"value": 20
},
{
"id": 32,
"zIndex": 2,
"name": "节点32",
"value": 66
},
{
"id": 33,
"zIndex": 2,
"name": "节点33",
"value": 56
},
{
"id": 34,
"zIndex": 2,
"name": "节点34",
"value": 57
},
{
"id": 35,
"zIndex": 2,
"name": "节点35",
"value": 24
}
],
"links": [
{
"source": 34,
"target": 22,
"value": 75
},
{
"source": 33,
"target": 10,
"value": 86
},
{
"source": 32,
"target": 27,
"value": 10
},
{
"source": 33,
"target": 11,
"value": 72
},
{
"source": 33,
"target": 10,
"value": 68
},
{
"source": 32,
"target": 27,
"value": 16
},
{
"source": 33,
"target": 8,
"value": 60
},
{
"source": 35,
"target": 8,
"value": 31
},
{
"source": 34,
"target": 13,
"value": 67
},
{
"source": 35,
"target": 8,
"value": 28
},
{
"source": 35,
"target": 1,
"value": 78
},
{
"source": 35,
"target": 4,
"value": 40
},
{
"source": 33,
"target": 27,
"value": 58
},
{
"source": 34,
"target": 13,
"value": 90
},
{
"source": 32,
"target": 11,
"value": 64
},
{
"source": 32,
"target": 26,
"value": 64
},
{
"source": 33,
"target": 6,
"value": 18
},
{
"source": 35,
"target": 4,
"value": 30
},
{
"source": 35,
"target": 1,
"value": 39
},
{
"source": 33,
"target": 11,
"value": 70
},
{
"source": 32,
"target": 12,
"value": 90
},
{
"source": 35,
"target": 11,
"value": 29
},
{
"source": 35,
"target": 3,
"value": 85
},
{
"source": 35,
"target": 7,
"value": 49
},
{
"source": 34,
"target": 27,
"value": 79
},
{
"source": 35,
"target": 23,
"value": 97
},
{
"source": 33,
"target": 28,
"value": 40
},
{
"source": 34,
"target": 28,
"value": 64
},
{
"source": 32,
"target": 26,
"value": 19
},
{
"source": 32,
"target": 16,
"value": 65
},
{
"source": 32,
"target": 8,
"value": 40
},
{
"source": 32,
"target": 10,
"value": 46
}
]
}
混合柱状图
汇总柱状图
组件名称： 汇总柱状图
组件样式：
组件说明：
以饼图的方式轮播显示每组数据。
请求方式：POST
https://doc.tingyun.com/sense/example/bard3pie.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5 | 否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 可以是任意条数据 |
| name | String | 名称 |
| data | Array | 子数据，可多条数据。 |
| name | String | 名称 |
| value | Number | 数字类型 |
| color | String | bar的颜色， "#77E5FF"。可选参数 |
value如果包含小数，在组件中会四舍五入的显示整数。 color可以通过接口传入，也可以在组件中直接配置。组件中配置的颜色优先级高于接口传入的颜色值。
示例:
{
"series": [
{
"name": "版本一",
"data": [
{
"name": "活跃数",
"value": 601,
"color": "#0091D2"
},
{
"name": "新增数",
"value": 299,
"color": "#27BA93"
},
{
"name": "启动次数",
"value": 589,
"color": "#B42E2E"
}
]
},
{
"name": "版本二",
"data": [
{
"name": "活跃数",
"value": 362,
"color": "#f091D2"
},
{
"name": "新增数",
"value": 446,
"color": "#270A93"
},
{
"name": "启动次数",
"value": 708,
"color": "#B49E2E"
}
]
},
{
"name": "版本三",
"data": [
{
"name": "活跃数",
"value": 233,
"color": "#f09102"
},
{
"name": "新增数",
"value": 743,
"color": "#970A93"
},
{
"name": "启动次数",
"value": 226,
"color": "#042E2E"
}
]
}
]
}
漏斗图
组件名称 ：漏斗图
组件样式：
组件说明：
漏斗图表示数据的流向，一般情况下数值会依次减少（增加）。漏斗按照数组的顺序从上往下开始绘制。
请求方式：POST
https://doc.tingyun.com/sense/example/funnel3d.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 可以是任意条数据 |
| name | String | 名称 |
| value | Number | 值，必须是数字类型 |
| color | String | bar的颜色， "#77E5FF" |
color可以通过接口传入，也可以在组件中直接配置。组件中配置的颜色优先级高于接口传入的颜色值。
示例：
{
"series": [
{
"name": "访问整车下定页面",
"value": 93
},
{
"name": "点击立即订购按钮",
"value": 77
},
{
"name": "点击支付按钮",
"value": 54
}
]
}
柱状折线混合图
3D 柱状折线图
组件名称：3D柱状折线图
组件样式：
组件说明：
曲线图加柱状图，适用于时间序列数据格式，必须返回两组type=column，两组type=line数据，并且四组数据x轴数据都是一样的。如果大屏使用此组件展示，建议使用配置较高的主机。
请求方式：POST
https://report.tingyun.com/example/browser/ls-performance.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 | 数据对象 |
| overview | Object | |
| tick | Number | x轴时间粒度，分钟为单位 |
| series | Object[] | |
| data | Object[] | |
| x | Number | x轴数据，只支持时间戳 |
| y | Number | y轴数据 |
| name | String | 数据项名称 |
| type | String | 横坐标图形，column显示柱状图，line显示曲线图 |
| yAxis | String | 数据项使用哪个坐标轴，从0开始 |
| yAixs | Object[] | 数据项y轴 |
| tickUnit | String | y轴单位 |
示例：
{
"id": 1,
"code": 200,
"data": {
"overview": {
"tick": 1
},
"yAxis": [
{
"tickUnit": "次"
},
{
"tickUnit": "ms",
"opposite": true
}
],
"series": [
{
"name": "DNS",
"type": "column",
"yAxis": 0,
"data": [
{
"y": 460,
"x": 1582882920000
},
{
"y": 4850,
"x": 1582882980000
},
{
"y": 687,
"x": 1582883040000
},
{
"y": 4870,
"x": 1582883100000
},
{
"y": 1861,
"x": 1582883160000
},
{
"y": 3818,
"x": 1582883220000
},
{
"y": 3743,
"x": 1582883280000
},
{
"y": 2238,
"x": 1582883340000
},
{
"y": 3944,
"x": 1582883400000
},
{
"y": 1569,
"x": 1582883460000
},
{
"y": 2619,
"x": 1582883520000
},
{
"y": 3200,
"x": 1582883580000
},
{
"y": 587,
"x": 1582883640000
},
{
"y": 3625,
"x": 1582883700000
},
{
"y": 4845,
"x": 1582883760000
},
{
"y": 1635,
"x": 1582883820000
},
{
"y": 927,
"x": 1582883880000
},
{
"y": 1087,
"x": 1582883940000
},
{
"y": 4504,
"x": 1582884000000
},
{
"y": 4017,
"x": 1582884060000
},
{
"y": 1737,
"x": 1582884120000
},
{
"y": 120,
"x": 1582884180000
},
{
"y": 502,
"x": 1582884240000
},
{
"y": 829,
"x": 1582884300000
},
{
"y": 740,
"x": 1582884360000
},
{
"y": 1584,
"x": 1582884420000
}
]
},
{
"name": "SSL",
"type": "column",
"yAxis": 0,
"data": [
{
"y": 693,
"x": 1582882920000
},
{
"y": 3387,
"x": 1582882980000
},
{
"y": 3415,
"x": 1582883040000
},
{
"y": 2131,
"x": 1582883100000
},
{
"y": 4372,
"x": 1582883160000
},
{
"y": 4635,
"x": 1582883220000
},
{
"y": 959,
"x": 1582883280000
},
{
"y": 3011,
"x": 1582883340000
},
{
"y": 3242,
"x": 1582883400000
},
{
"y": 2669,
"x": 1582883460000
},
{
"y": 3593,
"x": 1582883520000
},
{
"y": 1555,
"x": 1582883580000
},
{
"y": 4464,
"x": 1582883640000
},
{
"y": 716,
"x": 1582883700000
},
{
"y": 4022,
"x": 1582883760000
},
{
"y": 733,
"x": 1582883820000
},
{
"y": 3078,
"x": 1582883880000
},
{
"y": 3298,
"x": 1582883940000
},
{
"y": 3572,
"x": 1582884000000
},
{
"y": 3659,
"x": 1582884060000
},
{
"y": 4636,
"x": 1582884120000
},
{
"y": 4128,
"x": 1582884180000
},
{
"y": 2728,
"x": 1582884240000
},
{
"y": 1947,
"x": 1582884300000
},
{
"y": 2299,
"x": 1582884360000
},
{
"y": 3340,
"x": 1582884420000
}
]
},
{
"name": "首屏",
"type": "line",
"yAxis": 1,
"data": [
{
"y": 2066,
"x": 1582882920000
},
{
"y": 2983,
"x": 1582882980000
},
{
"y": 4851,
"x": 1582883040000
},
{
"y": 3773,
"x": 1582883100000
},
{
"y": 4532,
"x": 1582883160000
},
{
"y": 2218,
"x": 1582883220000
},
{
"y": 3912,
"x": 1582883280000
},
{
"y": 3925,
"x": 1582883340000
},
{
"y": 179,
"x": 1582883400000
},
{
"y": 2591,
"x": 1582883460000
},
{
"y": 1994,
"x": 1582883520000
},
{
"y": 859,
"x": 1582883580000
},
{
"y": 2463,
"x": 1582883640000
},
{
"y": 1287,
"x": 1582883700000
},
{
"y": 3748,
"x": 1582883760000
},
{
"y": 3555,
"x": 1582883820000
},
{
"y": 1090,
"x": 1582883880000
},
{
"y": 4991,
"x": 1582883940000
},
{
"y": 2135,
"x": 1582884000000
},
{
"y": 1881,
"x": 1582884060000
},
{
"y": 4426,
"x": 1582884120000
},
{
"y": 1893,
"x": 1582884180000
},
{
"y": 4943,
"x": 1582884240000
},
{
"y": 3629,
"x": 1582884300000
},
{
"y": 2574,
"x": 1582884360000
},
{
"y": 2310,
"x": 1582884420000
}
]
},
{
"name": "建连",
"type": "line",
"yAxis": 1,
"data": [
{
"y": 1639,
"x": 1582882920000
},
{
"y": 970,
"x": 1582882980000
},
{
"y": 178,
"x": 1582883040000
},
{
"y": 3194,
"x": 1582883100000
},
{
"y": 129,
"x": 1582883160000
},
{
"y": 3852,
"x": 1582883220000
},
{
"y": 3424,
"x": 1582883280000
},
{
"y": 1751,
"x": 1582883340000
},
{
"y": 3006,
"x": 1582883400000
},
{
"y": 3315,
"x": 1582883460000
},
{
"y": 1643,
"x": 1582883520000
},
{
"y": 3661,
"x": 1582883580000
},
{
"y": 2640,
"x": 1582883640000
},
{
"y": 2970,
"x": 1582883700000
},
{
"y": 4306,
"x": 1582883760000
},
{
"y": 3140,
"x": 1582883820000
},
{
"y": 458,
"x": 1582883880000
},
{
"y": 4169,
"x": 1582883940000
},
{
"y": 4719,
"x": 1582884000000
},
{
"y": 138,
"x": 1582884060000
},
{
"y": 4301,
"x": 1582884120000
},
{
"y": 3577,
"x": 1582884180000
},
{
"y": 3672,
"x": 1582884240000
},
{
"y": 220,
"x": 1582884300000
},
{
"y": 2075,
"x": 1582884360000
},
{
"y": 4671,
"x": 1582884420000
}
]
}
]
}
}
柱状折线图
组件名称：柱状折线图
组件样式：
组件说明：
柱状折线图适用于时间序列数据格式，必须返回两组type=column，两组type=line数据，并且四组数据x轴数据都是一样的。如果大屏使用此组件展示，建议使用应急配置较高的主机。
请求方式：POST
https://report.tingyun.com/example/browser/ls-performance.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| code | Number | 状态码 |
| data | Object | 数据对象 |
| series | Object[] | |
| name | String | 数据项名称 |
| data | Object[] | |
| x | Number | x轴数据,只支持时间戳 |
| y | Number | y轴数据 |
| yAxis | Object[] | 数据项y轴 |
| tickUnit | String | y轴单位 |
示例：
HTTP/1.1 200 OK
{
"code": 200,
"data": {
"series": [
{
"name": "a.tingyun.com",
"data": [
{
"y": 712,
"x": 1576837140000
},
{
"y": 4871,
"x": 1576837200000
},
{
"y": 4020,
"x": 1576837260000
}
]
},
{
"name": "b.tingyun.com",
"data": [
{
"y": 237,
"x": 1576837140000
},
{
"y": 1648,
"x": 1576837200000
},
{
"y": 98,
"x": 1576837260000
}
]
},
{
"name": "c.tingyun.com",
"data": [
{
"y": 4339,
"x": 1576837140000
},
{
"y": 2740,
"x": 1576837200000
},
{
"y": 3305,
"x": 1576837260000
}
]
},
{
"name": "d.tingyun.com",
"data": [
{
"y": 2692,
"x": 1576837140000
},
{
"y": 1434,
"x": 1576837200000
},
{
"y": 1494,
"x": 1576837260000
}
]
},
{
"name": "e.tingyun.com",
"data": [
{
"y": 4128,
"x": 1576837140000
},
{
"y": 3170,
"x": 1576837200000
},
{
"y": 2580,
"x": 1576837260000
}
]
}
],
"yAxis": [
{
"tickUnit": "次"
}
]
}
}
混合折线图
指标面积图
组件名称：指标面积图
组件样式：
组件说明：
指标面积图支持多组数据，每条数据的data可以支持任意长度的数据。
请求方式：POST
https://doc.tingyun.com/sense/example/titlearea.json
参数：
| 字段 | 类型 | 是否必选 | 描述 |
|---|---|---|---|
| currentTime | Number | 是 | 当前时间戳。 |
| token | String | 否 | 盐值，用于校验参数的完整性。校验规则为md5(timePeriod+currentTime+配置的token)。例如：timePeriod为30，currentTime为1513137332798，token为abc，则应对301513137332798abc进行MD5运算。 |
| timePeriod | Number | 是 | 时间范围分钟数。 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| series | Array | 数据列，对应数据的条数 |
| name | String | 数据名称 |
| title | String | 副标题 |
| value | Number/String | 数据的值，可以传空 |
| data | Array | 数组的值必须是数字类型 |
示例：
{
"series": [
{
"name": "Monthly Active Users",
"title": "(12.21-12.21)",
"value": 44,
"data": [
7,
10,
98,
83,
19,
73,
38,
28,
76,
59,
67,
66
]
},
{
"name": "Daily Activate Units",
"title": "(12.20-12.21)",
"value": 47,
"data": [
85,
88,
10,
46,
46,
41,
79,
58,
95,
59,
77,
60
]
},
{
"name": "Average Concurrent Users",
"title": "(11:55)",
"value": 67,
"data": [
9,
94,
69,
28,
3,
65,
96,
89,
88,
83,
47,
90
]
}
]
}
面积图
矩形树图
组件名称：矩形树图
组件样式：
组件说明：
矩形树图返回格式。
请求方式：POST
https://doc.tingyun.com/sense/example/treemap.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳。 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+配置的token),例如：timePeriod为30，currentTime为1513137332798,token为abc,则应对301513137332798abc进行md5。 | 否 |
| timePeriod | Number | 时间范围分钟数。 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| children | Object[] | 数据项。 |
| name | String | 标题。 |
| value | Number | 指标值。 |
| children | Object[] | 子节点。 |
示例：
HTTP/1.1 200 OK
{
"children": [
{
"name": ">100",
"value": 14,
"children": [
{
"name": ">1000",
"value": 10
},
{
"name": ">100",
"value": 4
}
]
},
{
"name": "50~100",
"value": 14
},
{
"name": "31~50",
"value": 12
},
{
"name": "11~20",
"value": 12
},
{
"name": "21~30",
"value": 6
},
{
"name": "3~5",
"value": 11
},
{
"name": "0~2",
"value": 8
},
{
"name": "6~10",
"value": 5
}
]
}
其他组件
ECharts图表
组件名称：ECharts图表
组件样式：
组件说明：
Echarts图表，是通过直接调用javascript eval方法，执行编辑器内字符串，生成图表。
注意事项：
-
请按照官方API编写图表配置项。
-
动态更新图表需要使用this.myChart对象更新。
-
编辑器供了全局jquery,$,echarts对象。
-
如果图表不能正常渲染，请检查控制台是否报错。
请求方式：POST
https://report.tingyun.com/Echarts
示例：
//根据echarts官方API 配置option属性，注意图标配置项必须命名option，否则不能正常渲染。
var option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
//demo 动态更新图表；
//必须通过 this.myChart 动态更新图表；
//编辑器提供了全局jquery,$,echarts对象。
this.demointer = setInterval(function () {
var data = this.myChart.getOption().series[0].data;
for (var i = 0; i < 5; i++) {
data.shift();
data.push(Math.floor(Math.random()*100));
}
this.myChart.setOption({series: [{data: data}]});
}.bind(this), 3000);
Highcharts图表
组件名称：Highcharts图表
组件样式：
组件说明：
Highcharts图表，是通过直接调用javascript eval方法，执行编辑器内字符串，生成图表。
注意事项：
-
请按照官方API编写图表配置项。
-
不能通过Highcharts.chart('renderTo',option)初始化图表,只能传入option渲染图表。
-
动态更新图表需要使用this.myChart对象更新。
-
编辑器供了全局jquery,$,Highcharts对象。
-
如果图表不能正常渲染，请检查控制台是否报错。
请求方式：POST
https://report.tingyun.com/HighCharts
示例：
//根据highcharts官方API 配置option属性，注意图标配置项必须命名option，否则不能正常渲染。
var option = {
chart: {
type: 'column'
},
title: {
text: '2015年1月-5月，各浏览器的市场份额'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: '总的市场份额'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '{series.name}
',
pointFormat: '{point.name}: {point.y:.2f}% of total
'
},
series: [{
name: '浏览器品牌',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
};
//demo 动态更新图表；
//必须通过 this.myChart 动态更新图表；
//编辑器提供了全局jquery,$,echarts对象。
this.demointer = setInterval(function () {
var data = this.myChart.series[0].data;
var newdata = [];
for (var i = 0; i < data.length; i++) {
newdata[i]={name:data[i].name,y:Math.floor(Math.random()*100)};
}
this.myChart.update({series: [{ data: newdata}]});
}.bind(this), 3000);
Iframe
组件名称：Iframe
组件样式：
组件说明：
动态设置iframe src属性，只能设置https://地址。
请求方式：POST
https://report.tingyun.com/