利用阿里云物联网平台（IoT）实现WEB数据可视化

一年前在阿里物联网平台测试过一个项目，后来就搁置了，昨天有事需要用，发现出错了。

调整完后写一下使用思路，以便未来之需。

阿里云物联网（IoT）主页：https://iot.aliyun.com/

阿里云物联网（IoT）市场：https://linkmarket.aliyun.com/

阿里云物联网（IoT）平台管理：https://iot.console.aliyun.com/

阿里云物联网（IoT）应用开发：https://studio.iot.aliyun.com/

阿里云物联网（IoT）Web可视化开发文档：https://help.aliyun.com/document_detail/110475.html

阿里云IoT是物联网平台，能将你的设备接入云端实现相关功能。本文并不介绍硬件接入的方法，只记录WEB数据可视化的方法。

一、入口

如何注册阿里云就不说了，登录后输入“物联网平台”，或者点击本地址：https://iot.console.aliyun.com/，进入平台。

二、创建实例

如果要用于生产环境，那么购买企业版实例即可，这里仅是开发环境，点击公共实例即可。

公共实例仅用于测试，设备数限制500个，最多同时在线50个，消息上下行TPS限制5、规则引擎TPS限制5，如您需要商用请使用企业版实例，升级操作无法撤销。

本文用不到这里的功能

三、应用开发

1. 打开开发环境

点击 增值服务 -> IoT Studio（物联网应用开发） 或者点击https://studio.iot.aliyun.com/tool/web

2. 新建项目和应用

• 根据业务需要选择，这里在Web应用下点+新建

  • 选择 新建项目

  • 新建空白项目，也可以从市场选择一个新建

    • 项目建完后回到应用创建页面，输入应用名称，确定提交
      • 这时Web应用列表里就有了新建的应用，点编辑进入编辑界面

        3. 编辑页面

        编辑界面中有页面管理、组件管理、设备绑定和应用设置

        • 将需要的组件拖入右侧页面中即可

          拖拽、合组、命名等操作不再赘述，就和一般的Web UI开发是一样的。

          4.数据调用

          • 在页面中选中允许显示数据的组件，点击展示数据右侧的编辑按钮

          • 在请求地址位置输入远程服务器的地址

          • 如果地址正确，那么将获取返回结果

            根据请求参数进行调用获取接口返回的原始值，可以使用脚本或数据表配置进行再加工直至满足组件显示的需求

            • 返回结果满足以下格式，那么该组件读取后就能正确显示内容，无论该组件是图表还是数字

              {  "data": [    {      "city": "Hangzhou",      "month": "Jan",      "sales": 360,      "cost": 150    },    {      "city": "Shanghai",      "month": "Jan",      "sales": 420,      "cost": 180    },    {      "city": "Hangzhou",      "month": "Feb",      "sales": 320,      "cost": 140    },    {      "city": "Shanghai",      "month": "Feb",      "sales": 400,      "cost": 170    },    {      "city": "Hangzhou",      "month": "Mar",      "sales": 380,      "cost": 120    },    {      "city": "Shanghai",      "month": "Mar",      "sales": 450,      "cost": 140    }  ]}

              • 其它组件及参数设置不再一一分析，可自行研究

                这里举例折线图，从数据源读取到数据后，根据折线图要求将对应参数拖入横轴与纵轴即可。

                5. 域名设置

                在应用设置中增加域名即可，没有自己的域名无法直接访问。

                6. 应用发布

                • 在右上角点击发布按钮

                • 写入版本说明点确定按钮发布

                • 发布成功

                • 可通过域名在线浏览

                  四、升级企业版

                  • 之前一直都是免费测试环境，那么如果要升级为企业版，请点击“升级企业版”
                  • 弹出菜单
                  • 选择自己所需付款吧~