onnet添加仪表盘可视化数据

 

假设把设备 的温度数据可视化到仪表盘

 

 

先保硬件把数据传上来了

 

 然后查看产品key和设备编号,用于数据流绑定

 

 

 

 

 

 RGIiR98YAsG=eRx0ZhshQyPHo0c=

1066528918

创建仪表盘

 

 

 

 

 

 创建一个仪表盘和折线图

 

 仪表盘绑定数据

 

添加数据 选择onenet数据源 

 

 

 

 

 

 

 

 这是已经创建的数据

 

 

 

 数据设置 

温度仪表盘每次只显示一个最新数据

 

 

return [{
    value: data[data.length - 1].value,
    name: '温度'
}]

　　

 

 

 

 

折线图数据

对于折线图 要同时画好多个数据点

官方格式

return [{
    x: "类目1",
    y: 90,
    y1: 70,
    y2: 50
},{
    x: "类目2",
    y: 10,
    y1: 50,
    y2: 30,
},{
    x: "类目3",
    y: 50,
    y1: 90,
    y2: 70
},{
    x: "类目4",
    y: 10,
    y1: 50,
    y2: 30,
}]

　　传感器实时数据

 

 

 

return [{
    x: data[data.length - 4].at,//X轴是时间
    y: data[data.length - 4].value,//Y轴是数据值

}, {
    x: data[data.length - 3].at,
    y: data[data.length - 3].value,

}, {
    x: data[data.length - 2].at,
    y: data[data.length - 2].value,

}, {
    x: data[data.length - 1].at,
    y: data[data.length - 1].value,

}
]

　　

　　

 

 

 

 

 修改样式

y的数据就是

同样道理y1 y2 来区分不同的曲线

 

 

 

 

 

 

 

 数据全部添加

 

 

 

data.forEach((item, index) => {
    item.x = item.update_at
    item.y = item.value
});

　　

 

 

 

 

二、可视化界面按键使用

1.按键外观指令配置