项目效果：
在OneNet平台建立一个可视化界面，实现效果是下位机的温度，湿度可以在该界面显示，同时该界面可以控制下位机的灯亮与灭。
搭建环境:
软件:keil(编写C语言-修改硬件的程序)+onenet平台（建立可视化界面-上位机功能）；
硬件:野火指南者开发板；
可视化界面：
含有折线图，仪表盘和开关。
折线图是显示湿度值；仪表盘用来显示温度值；开关用来控制灯亮灭。
注意：每个控件都需要和产品的数据流有关联。----“数据流选择”
OneNET - 中国移动物联网开放平台 注册登陆进入onenet平台，点击右上角-“控制台”，进入如下界面，点击“多协议接入”，找到“MQTT协议”，添加产品，然后进入下一个界面。
点击这个新建的产品进入到如下图的界面，点击“设备列表”，“数据流” 去建立设备和数据流，然后点击“应用管理”，跳转到“数据可视化”界面。（具体网址： 物联网平台）
图示1
进入数据可视化界面，点击“新建项目”，选择2D-空白模板，然后建个名称，开始编辑这个模板。
在画布上面添加仪表盘，具体操作参看如下界面的标示。
点击“数据”---〉“数据源选择”（目的：数据和控件关联关系），按照下图的步骤创建，其中数据类型--onenet，名称可任意设置，红色椭圆标记是参考前面“多协议接入”建立新产品时的产品ID，accesskey--来自产品概况（图示1），设备--来自设备列表的设备名称（图示1），数据流--来自数据流模板（图示1）{控件功能是什么对应相关的数据流，比如：仪表盘--数据流为temperature，折线图--数据流为humidity，开关--数据流为ledFlag}。
往下找到“数据”---〉“私有过滤器”，修改程序（可以参考官方的网址 OneNET - 中国移动物联网开放平台），最终呈现的效果就是可以显示标题“温度”和数值。
function last(arr) {
var len = arr ? arr.length : 0;
if (len) return arr[len - 1];
}
return [{
value:last(data).value,
name: '温度'
}]
相同的方法设置“基本折线图”，放置相关控件，然后“数据”---〉“数据源选择”---〉humidity（对应项目的数据流），同时“数据过滤器”内的程序改为：
data.forEach((item, index) => {
item.x = item.update_at
item.y = item.value
});
在“样式”---〉“数据系列”--〉“系列名”---湿度。
同样在“控制”中找到“按钮”，放置该按钮，然后在“样式”--〉“数据系列”---〉“系列1”---〉“命令内容”改为“LEDON”（单片机程序可以控制灯亮的命令），“系列2”---〉“命令内容”改为“LEDOFF”，在“数据”---〉“数据源选择”---〉对应项目的数据流。
主要为了记录这个实现过程，本文主要介绍可视化界面的控件实现的过程。
