Node-red 物联网教程6:数据可视化设计

1.DashBoard

为了将数据可视化展示,Node-red自带了一个DashBoard节点.安装此节点后,通过简单的拖拽,就能生成一个Web页面,达到很炫酷的感觉.

1.1安装DashBoard

点击节点管理,如图

搜索模块-> dashboard,然后安装

安装成功后,在左侧菜单栏,就会看到安装好的节点

然后拖拽几个节点,开始测试吧. 这里就不一一介绍每个节点的具体使用方法了,Node-red官网有详细介绍.下面是我简单拖拽的几个节点和效果图.

如果觉得这些还不过瘾,继续往下看.

2.1自定义页面

抛弃dashboard是否可以做出漂亮的页面内?当然可以,只要善于思考,肯于动手,这些就是小菜一碟.

以http in和http response为例,Node-red充当一个Web Server,构建一个响应的Web页面如图所示:

这样就定义了一个 url 为/myboard的路由,点击部署后在地址栏输入 IP/myboard 就能看到此定义的网页了.

其中的数据展示,可以借助丰富的第三方库,本例使用的是百度的Echarts.

点击上面的链接按钮,可以跳转到Dashboard.

对于没有基础的同学,也不用慌,下面是本例的程序,导入到你的Node-red中,开始愉快的玩耍吧

[
    {
        "id": "8e872fa2.2c967",
        "type": "tab",
        "label": "流程4",
        "disabled": false,
        "info": ""
    },
    {
        "id": "e13099eb.039b18",
        "type": "http in",
        "z": "8e872fa2.2c967",
        "name": "",
        "url": "/myboard",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 290,
        "y": 240,
        "wires": [
            [
                "da282543.715b48"
            ]
        ]
    },
    {
        "id": "1ac59f59.ddd6b1",
        "type": "http response",
        "z": "8e872fa2.2c967",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 710,
        "y": 240,
        "wires": []
    },
    {
        "id": "da282543.715b48",
        "type": "template",
        "z": "8e872fa2.2c967",
        "name": "myboard",
        "field": "payload",
        "fieldType": "msg",
        "format": "html",
        "syntax": "mustache",
        "template": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>威武网</title>\n  <script src=\"https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js\"></script>\n  <style>\n    html,body{\n      margin: 0;\n      padding: 0;\n      background: #eee;\n    }\n    *{\n      font-family: \"微软雅黑\";\n      color: #333;\n      font-weight: bold;\n    }\n    .container{\n      margin:0px auto;\n      width: 1200px;\n      padding: 0px 10px;\n    }\n    .main{\n      height: 100vh;\n    }\n    .head{\n      height: 64px;\n      background: #0eb8c0;\n    }\n    .nav{\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n    .head ul{\n      list-style: none;\n    }\n    .head ul li{\n      float: left;\n      margin: 0px 10px;\n    }\n    .content{\n      height: calc(100vh - 64px);\n      background: #333333;\n    }\n    .footer{\n      height: 200px;\n      background: #0eb8c0;\n    }\n  </style>\n</head>\n<body>\n\n    <div class=\"head\">\n      <div class=\"container nav\">\n        <h2 class=\"logo\">威武网</h2>\n        <ul>\n          <li><a href=\"https://www.v5w.com\">Home</a></li>\n          <li><a href=\"/ui\">Back DashBoard</a></li>\n        </ul>  \n      </div>      \n    </div>\n    <div class=\"content\" id=\"content\">\n  \n    </div>\n    <div class=\"footer\">\n\n    </div>\n\n  <script type=\"text/javascript\">\n    // 基于准备好的dom,初始化echarts实例\n    var myChart = echarts.init(document.getElementById('content'));\n\n    var data = [{\nname: 'Grandpa',\nchildren: [{\n    name: 'Uncle Leo',\n    value: 15,\n    children: [{\n        name: 'Cousin Jack',\n        value: 2\n    }, {\n        name: 'Cousin Mary',\n        value: 5,\n        children: [{\n            name: 'Jackson',\n            value: 2\n        }]\n    }, {\n        name: 'Cousin Ben',\n        value: 4\n    }]\n}, {\n    name: 'Aunt Jane',\n    children: [{\n        name: 'Cousin Kate',\n        value: 4\n    }]\n}, {\n    name: 'Father',\n    value: 10,\n    children: [{\n        name: 'Me',\n        value: 5,\n        itemStyle: {\n            color: 'red'\n        }\n    }, {\n        name: 'Brother Peter',\n        value: 1\n    }]\n}]\n}, {\nname: 'Mike',\nchildren: [{\n    name: 'Uncle Dan',\n    children: [{\n        name: 'Cousin Lucy',\n        value: 3\n    }, {\n        name: 'Cousin Luck',\n        value: 4,\n        children: [{\n            name: 'Nephew',\n            value: 2\n        }]\n    }]\n}]\n}, {\nname: 'Nancy',\nchildren: [{\n    name: 'Uncle Nike',\n    children: [{\n        name: 'Cousin Betty',\n        value: 1\n    }, {\n        name: 'Cousin Jenny',\n        value: 2\n    }]\n}]\n}];\n\noption = {\nvisualMap: {\n    type: 'continuous',\n    min: 0,\n    max: 10,\n    inRange: {\n        color: ['#2D5F73', '#538EA6', '#F2D1B3', '#F2B8A2', '#F28C8C']\n    }\n},\nseries: {\n    type: 'sunburst',\n    data: data,\n    radius: [0, '90%'],\n    label: {\n        rotate: 'radial'\n    }\n}\n};\n\n\n    // 使用刚指定的配置项和数据显示图表。\n    myChart.setOption(option);\n</script>\n</body>\n</html>",
        "output": "str",
        "x": 500,
        "y": 240,
        "wires": [
            [
                "1ac59f59.ddd6b1"
            ]
        ]
    },
    {
        "id": "c508ffcb.07d1e",
        "type": "ui_gauge",
        "z": "8e872fa2.2c967",
        "name": "",
        "group": "bd88fffe.3ecfb",
        "order": 1,
        "width": 0,
        "height": 0,
        "gtype": "gage",
        "title": "gauge",
        "label": "units",
        "format": "{{value}}",
        "min": 0,
        "max": 10,
        "colors": [
            "#00b500",
            "#e6e600",
            "#ca3838"
        ],
        "seg1": "",
        "seg2": "",
        "x": 710,
        "y": 380,
        "wires": []
    },
    {
        "id": "c26ad333.bb1d9",
        "type": "ui_slider",
        "z": "8e872fa2.2c967",
        "name": "",
        "label": "slider",
        "tooltip": "",
        "group": "bd88fffe.3ecfb",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": true,
        "outs": "all",
        "topic": "",
        "min": 0,
        "max": 10,
        "step": 1,
        "x": 510,
        "y": 380,
        "wires": [
            [
                "c508ffcb.07d1e",
                "d530e42d.d023f8"
            ]
        ]
    },
    {
        "id": "d530e42d.d023f8",
        "type": "ui_chart",
        "z": "8e872fa2.2c967",
        "name": "",
        "group": "bd88fffe.3ecfb",
        "order": 2,
        "width": 0,
        "height": 0,
        "label": "chart",
        "chartType": "line",
        "legend": "false",
        "xformat": "HH:mm:ss",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "",
        "ymax": "",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "60",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "useOldStyle": false,
        "outputs": 1,
        "x": 720,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "d0e765ae.1140d8",
        "type": "inject",
        "z": "8e872fa2.2c967",
        "name": "",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 260,
        "y": 580,
        "wires": [
            [
                "e661c375.c1d3c"
            ]
        ]
    },
    {
        "id": "5bbdc8b0.b62698",
        "type": "ui_gauge",
        "z": "8e872fa2.2c967",
        "name": "",
        "group": "5756bf9c.dfcd5",
        "order": 1,
        "width": 0,
        "height": 0,
        "gtype": "gage",
        "title": "gauge",
        "label": "units",
        "format": "{{value}}",
        "min": 0,
        "max": 10,
        "colors": [
            "#00b500",
            "#e6e600",
            "#ca3838"
        ],
        "seg1": "",
        "seg2": "",
        "x": 730,
        "y": 580,
        "wires": []
    },
    {
        "id": "96d49e3b.86189",
        "type": "ui_chart",
        "z": "8e872fa2.2c967",
        "name": "",
        "group": "5756bf9c.dfcd5",
        "order": 2,
        "width": 0,
        "height": 0,
        "label": "chart",
        "chartType": "line",
        "legend": "false",
        "xformat": "HH:mm:ss",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "",
        "ymax": "",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "60",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "useOldStyle": false,
        "outputs": 1,
        "x": 740,
        "y": 680,
        "wires": [
            []
        ]
    },
    {
        "id": "e661c375.c1d3c",
        "type": "function",
        "z": "8e872fa2.2c967",
        "name": "随机模拟数据",
        "func": "msg.payload = Math.round(Math.random()*10)\n\n\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 500,
        "y": 580,
        "wires": [
            [
                "5bbdc8b0.b62698",
                "96d49e3b.86189"
            ]
        ]
    },
    {
        "id": "bd88fffe.3ecfb",
        "type": "ui_group",
        "z": "",
        "name": "Group1",
        "tab": "30c933f.849a4cc",
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "5756bf9c.dfcd5",
        "type": "ui_group",
        "z": "",
        "name": "Group2",
        "tab": "30c933f.849a4cc",
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "30c933f.849a4cc",
        "type": "ui_tab",
        "z": "",
        "name": "Bash Board",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

你的关注是我努力的动力,不要让威武哥默默流泪呀.

学习更多知识,加QQ群:1098090823
威武网 » Node-red 物联网教程6:数据可视化设计

提供最优质的资源集合

立即查看 了解详情