仪表盘，折线图、地图，ONENET应用编辑器2.0（View 2.0）控件使用_goview大屏对接

前言

—最近在使用Onenet时候，发现之前做wbe界面不像以前拖动控件，然后选择数据流就可以完成web端的显示以及控制。更新了View2.0之后，需要配置，现在记录下来，给

提示：以下是本篇文章正文内容，下面案例可供参考

一、View2.0是什么？

onenet官方View2.0官方文档
1、View2.0是一个拖拽式编辑器，免编程快速搭建应用界面
2、对接OneNET内置数据、第三方数据库、Excel静态文件多种数据源
3、这些也是官方文档有的不用多说

二、使用步骤

1.首先确保我们成功上传了数据流到onenet

2.点击进入view2.0界面

1.新建项目

2.使用控件，基本折线图

a.点击管理数据源

b.创建数据源模板

c.按照提示填写你自己的信息即可

d.填写完点击创建即可

e.点击箭头处，完成数据模板的添加

f.提示创建功能，如图所示就表示创建成功

g.点击管理数据源选择刚才我们创建的数据源模板

h.折线图的数据过滤器的代码

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


1
2
3
4
5
6

2、仪表盘相关配置

2.1仪表盘的按照同样的方式设置数据流模板并成功添加之后，

2.2、仪表盘的数据过滤器的代码

function last(arr) {
    var len = arr ? arr.length : 0;
    if (len) return arr[len - 1];
}
return [{
    value: last(data).value,
    name: '湿度'

}]
1
2
3
4
5
6
7
8
9

3、地图控件的数据过滤器以及代码

//data
function last(arr) {
    var len = arr ? arr.length : 0;
    if (len) return arr[len - 1];
}
return [
    {
        dev1: {
            lon: last(data).value.lon,
            lat: last(data).value.lat
        }
    }

]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.1设置完过滤器代码之后，还要进行坐标转化，还要进行坐标转化，还要进行坐标转化，要不然会定位地点偏移很大

总结

记录一下使用的onenet web可视化界面控件的配置，写在网页上，加深自己的记忆，也可以给想做这个方面显示的朋友们一些参考，写得有点乱，有问题可以在下方留言。