首页 帮助中心 听云大屏 折线图

折线图

组件名称:折线图

组件样式

折线图折线图

组件说明

时序轴,适用于时间序列和数值数据返回格式,如折线图。

请求方式: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
                }
            ]
        }
    ]
}