Node-RED系列（十九）：工业多图标面板制作

Node-RED系列文章目前已经写了18篇，介绍了Node-RED的安装以及默认安装的一些基本节点的使用，作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章。

Node-RED教程（一）：Node-RED的介绍与安装

Node-RED教程（二）：Node-RED的面板的操作

Node-RED教程（三）：Node-RED公共节点的使用

Node-RED教程（四）：Node-RED函数节点的使用

Node-RED教程（五）：Node-RED序列节点的使用

Node-RED教程（六）：Node-RED解析节点的使用

Node-RED教程（七）：Node-RED存储节点的使用

Node-RED教程（八）：Node-RED网络节点的使用

Node-RED教程（九）：Node-RED面板dashboard节点的使用

Node-RED教程（十）：Node-RED面板dashboard节点的配置

Node-RED教程（十一）：Node-RED面板chart节点的使用案例

Node-RED教程（十二）：定制化节点教程

Node-RED教程（十三）：三种方式安装启动安装Node-Red

Node-RED教程（十四）：定制Node-RED的UI

Node-RED教程（十五）：工业仪表盘开发

Node-RED系列（十七）：使用自定义UI节点网与flow交互

Node-RED系列（十八）：配置静态目录，使用echarts.js，three.js，D3.js

这是我的第19篇Node-RED系列的文章，这一篇文章我们来说一下，如何制作一个工业物联网的仪表盘的。

效果图

首先来看一下效果图，

改仪表盘，使用多个数据源，并通过一些function节点，将数据封装处理后，输入到折线图，柱状图，饼图，以及雷达图上。 该方案可以在一个页面，制作多组数据图表。方便用户筛选，查看。

实现方案

安装dashboard节点 用于tab，group布局，chart节点用于承载图表 安装random节点，用于生成随机数

用到的图表有这几个

line chart 折线图 bar chart 柱状图 bar chart （H） 横向柱状图 pie chart 饼图 polar area chart 极地坐标图 radar chart 雷达图

使用注入节点来配置数据，如label， data， 使用function 节点来处理数据 如

var m={}; m.labels = [“January”, “February”, “March”, “April”, “May”, “June”, “July”]; m.series = [Series A, Series B, Series C]; m.data = [ [65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90], [38, 28, 20, 49, 45, 60, 20] ]; return {payload:[m]}; 折线图配置

柱状图配置

横向柱状图配置

饼图配置

极地坐标图 雷达图

分析数据流转

以一源对多表1的示例来讲解一下数据的流转 该图显示如下，

一共是四个图，四个图使用同一份数据源 数据源使用function节点来生成,内容如下

var m={}; m.labels = [“January”, “February”, “March”, “April”, “May”, “June”, “July”]; m.series = [Series A, Series B, Series C]; m.data = [ [65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90], [38, 28, 20, 49, 45, 60, 20] ]; return {payload:[m]};

可以简单理解为这样。 一共有三个维度。

labels 对应的是x轴的值 data 中的数据 对应的是y轴的值 series 对应的是系列，分类

如 一源对多表5的数据如下

var m={ “series”:[“X”,”Y”,”Z”], “data”:[[5,6,9],[3,8,5],[6,7,2]], “labels”:[“Jan”,”Feb”,”Mar”] }; return {payload:[m]};

只有三个维度，series，data , labels

完整代码流 [ { “id”: “cdd041df.75e89”, “type”: “tab”, “label”: “流程 9”, “disabled”: false, “info”: “” }, { “id”: “99cb6fb7.312ed”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var m={};\nm.labels = [\”January\”, \”February\”, \”March\”, \”April\”, \”May\”, \”June\”, \”July\”];\nm.series = [Series A, Series B, Series C];\nm.data = [\n [65, 59, 80, 81, 56, 55, 40],\n [28, 48, 40, 19, 86, 27, 90],\n [38, 28, 20, 49, 45, 60, 20]\n ];\nreturn {payload:[m]};”, “outputs”: 1, “noerr”: 0, “initialize”: “”, “finalize”: “”, “x”: 550, “y”: 500, “wires”: [ [ “1ea08106.2a878f”, “ff918655.3f4cc8”, “b22921a0.00d9”, “df536e27.a17ae” ] ] }, { “id”: “1ea08106.2a878f”, “type”: “ui_chart”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “89749fb7.87f01”, “order”: 1, “width”: 0, “height”: 0, “label”: “折线图”, “chartType”: “line”, “legend”: “false”, “xformat”: “auto”, “interpolate”: “linear”, “nodata”: “No Data”, “dot”: false, “ymin”: “”, “ymax”: “”, “removeOlder”: 1, “removeOlderPoints”: “”, “removeOlderUnit”: “3600”, “cutout”: 0, “useOneColor”: false, “useUTC”: false, “colors”: [ “#1f77b4”, “#aec7e8”, “#ff7f0e”, “#2ca02c”, “#98df8a”, “#d62728”, “#ff9896”, “#9467bd”, “#c5b0d5” ], “outputs”: 1, “useDifferentColor”: false, “x”: 1050, “y”: 220, “wires”: [ [] ] }, { “id”: “bdba5475.e63888”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var chart = [{\n \”series\”:[\”A\”,\”B\”,\”C\”],\n \”data\”:[[{\”x\”:1504029632890,\”y\”:5},{\”x\”:1504029636001,\”y\”:4},{\”x\”:1504029638656,\”y\”:2}],[{\”x\”:1504029633514,\”y\”:6},{\”x\”:1504029636622,\”y\”:7},{\”x\”:1504029639539,\”y\”:6}],[{\”x\”:1504029634400,\”y\”:7},{\”x\”:1504029637959,\”y\”:9},{\”x\”:1504029640317,\”y\”:7}]],\n \”labels\”:[\”\”]\n}];\nmsg.payload = chart;\n\nreturn msg;”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 340, “wires”: [ [ “1ea08106.2a878f” ] ] }, { “id”: “68b4d797.f3f1a8”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 1, “width”: 0, “height”: 0, “passthru”: false, “label”: “时间折线1”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “”, “topicType”: “str”, “x”: 230, “y”: 340, “wires”: [ [ “bdba5475.e63888” ] ] }, { “id”: “ff918655.3f4cc8”, “type”: “ui_chart”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “89749fb7.87f01”, “order”: 2, “width”: 0, “height”: 0, “label”: “柱状图”, “chartType”: “bar”, “legend”: “false”, “xformat”: “HH:mm:ss”, “interpolate”: “linear”, “nodata”: “No Data”, “dot”: false, “ymin”: “”, “ymax”: “”, “removeOlder”: 1, “removeOlderPoints”: “”, “removeOlderUnit”: “3600”, “cutout”: 0, “useOneColor”: false, “useUTC”: false, “colors”: [ “#1f77b4”, “#aec7e8”, “#ff7f0e”, “#2ca02c”, “#98df8a”, “#d62728”, “#ff9896”, “#9467bd”, “#c5b0d5” ], “outputs”: 1, “useDifferentColor”: false, “x”: 1050, “y”: 320, “wires”: [ [] ] }, { “id”: “1317cd09.5296f3”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 5, “width”: 0, “height”: 0, “passthru”: false, “label”: “一源对多表1”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “”, “topicType”: “str”, “x”: 230, “y”: 500, “wires”: [ [ “99cb6fb7.312ed” ] ] }, { “id”: “c7bafa56.b1d398”, “type”: “random”, “z”: “cdd041df.75e89”, “name”: “”, “low”: “1”, “high”: “10000000”, “inte”: “true”, “x”: 580, “y”: 700, “wires”: [ [ “1ea08106.2a878f” ] ] }, { “id”: “d32f1c0f.31534”, “type”: “inject”, “z”: “cdd041df.75e89”, “name”: “”, “props”: [ { “p”: “payload” }, { “p”: “topic”, “vt”: “str” } ], “repeat”: “”, “crontab”: “”, “once”: false, “onceDelay”: “”, “topic”: “”, “payload”: “”, “payloadType”: “str”, “x”: 230, “y”: 700, “wires”: [ [ “c7bafa56.b1d398” ] ] }, { “id”: “128e400d.24ca1”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var m={};\nm.labels = [10,20,30,40,50,60,70];\nm.series = [Series A, Series B, Series C, Series D];\nm.data = [\n [65, 59, 80, 81, 56, 55, 40],\n [28, 48, 40, 19, 86, 27, 90],\n [38, 28, 20, 49, 45, 60, 20],\n [58, 18, 40, 29, 15, 30, 60]\n ];\nreturn {payload:[m]};”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 540, “wires”: [ [ “1ea08106.2a878f”, “ff918655.3f4cc8”, “b22921a0.00d9”, “df536e27.a17ae” ] ] }, { “id”: “c5b6ec08.69eac”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 6, “width”: 0, “height”: 0, “passthru”: false, “label”: “一源对多表2”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “”, “topicType”: “str”, “x”: 230, “y”: 540, “wires”: [ [ “128e400d.24ca1” ] ] }, { “id”: “9bc88c9a.44cdd”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var chart = [{\n \”series\”:[\”A\”,\”B\”,\”C\”],\n \”data\”:[[{\”x\”:1,\”y\”:5},{\”x\”:2,\”y\”:4},{\”x\”:3,\”y\”:2}],[{\”x\”:4,\”y\”:6},{\”x\”:5,\”y\”:7},{\”x\”:6,\”y\”:6}],[{\”x\”:7,\”y\”:7},{\”x\”:8,\”y\”:9},{\”x\”:9,\”y\”:7}]],\n \”labels\”:[\”\”]\n}];\nmsg.payload = chart;\n\nreturn msg;”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 380, “wires”: [ [ “1ea08106.2a878f” ] ] }, { “id”: “a75ce7f2.9df408”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 2, “width”: 0, “height”: 0, “passthru”: false, “label”: “时间折线2”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “”, “topicType”: “str”, “x”: 230, “y”: 380, “wires”: [ [ “9bc88c9a.44cdd” ] ] }, { “id”: “6bcf88af.4c2bb8”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var m = {};\nm.labels = [\”Download\”, \”In-Store\”, \”Mail-Order\”];\nm.data = [[300, 500, 100]];\nm.series = [\”Sales\”];\nreturn {payload:[m],topic:msg.topic};”, “outputs”: 1, “noerr”: 0, “x”: 570, “y”: 740, “wires”: [ [ “df536e27.a17ae”, “ff918655.3f4cc8”, “1ea08106.2a878f”, “b4dd3939.c1cd18”, “4ff31492.be2bac”, “b22921a0.00d9” ] ] }, { “id”: “df536e27.a17ae”, “type”: “ui_chart”, “z”: “cdd041df.75e89”, “name”: “饼图”, “group”: “89749fb7.87f01”, “order”: 3, “width”: 0, “height”: 0, “label”: “饼图”, “chartType”: “pie”, “legend”: “true”, “xformat”: “HH:mm:ss”, “interpolate”: “linear”, “nodata”: “”, “dot”: false, “ymin”: “”, “ymax”: “”, “removeOlder”: 1, “removeOlderPoints”: “”, “removeOlderUnit”: “3600”, “cutout”: “30”, “useOneColor”: false, “useUTC”: false, “colors”: [ “#1f77b4”, “#aec7e8”, “#ff7f0e”, “#2ca02c”, “#98df8a”, “#d62728”, “#ff9896”, “#9467bd”, “#c5b0d5” ], “outputs”: 1, “useDifferentColor”: false, “x”: 1050, “y”: 500, “wires”: [ [] ] }, { “id”: “7e75f796.5420c8”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 10, “width”: 0, “height”: 0, “passthru”: false, “label”: “类目数据图表”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “Pie 4 T”, “topicType”: “str”, “x”: 240, “y”: 740, “wires”: [ [ “6bcf88af.4c2bb8” ] ] }, { “id”: “b4ec542b.e04dc8”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var chart = [{\n \”series\”:[\”A\”,\”B\”,\”C\”],\n \”data\”:[[{\”x\”:1000000,\”y\”:5},{\”x\”:2000000,\”y\”:4},{\”x\”:3000000,\”y\”:2}],[{\”x\”:4000000,\”y\”:6},{\”x\”:5000000,\”y\”:7},{\”x\”:6000000,\”y\”:6}],[{\”x\”:7000000,\”y\”:7},{\”x\”:8000000,\”y\”:9},{\”x\”:9000000,\”y\”:7}]],\n \”labels\”:[\”\”]\n}];\nmsg.payload = chart;\n\nreturn msg;”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 420, “wires”: [ [ “1ea08106.2a878f” ] ] }, { “id”: “2c3d6dce.1d18b2”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 3, “width”: 0, “height”: 0, “passthru”: false, “label”: “时间折线3”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “”, “topicType”: “str”, “x”: 230, “y”: 420, “wires”: [ [ “b4ec542b.e04dc8” ] ] }, { “id”: “287b8f62.2d7a3”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var chart = [{\n \”series\”:[\”A\”,\”B\”,\”C\”],\n \”data\”:[[{\”x\”:1000000000,\”y\”:5},{\”x\”:2000000000,\”y\”:4},{\”x\”:3000000000,\”y\”:2}],[{\”x\”:4000000000,\”y\”:6},{\”x\”:5000000000,\”y\”:7},{\”x\”:6000000000,\”y\”:6}],[{\”x\”:7000000000,\”y\”:7},{\”x\”:8000000000,\”y\”:9},{\”x\”:9000000000,\”y\”:7}]],\n \”labels\”:[\”\”]\n}];\nmsg.payload = chart;\n\nreturn msg;”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 460, “wires”: [ [ “1ea08106.2a878f” ] ] }, { “id”: “e5dfa1c3.4ca2e”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 4, “width”: 0, “height”: 0, “passthru”: false, “label”: “时间折线4”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “”, “topicType”: “str”, “x”: 230, “y”: 460, “wires”: [ [ “287b8f62.2d7a3” ] ] }, { “id”: “2a4159e.fe178a6”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var m={\n \”series\”:[\”X\”,\”Y\”,\”Z\”],\n \”data\”:[[5,6,9],[3,8,5],[6,7,2]],\n \”labels\”:[\”Jan\”,\”Feb\”,\”Mar\”]\n};\nreturn {payload:[m]};”, “outputs”: 1, “noerr”: 0, “initialize”: “”, “finalize”: “”, “x”: 550, “y”: 660, “wires”: [ [ “1ea08106.2a878f”, “ff918655.3f4cc8”, “df536e27.a17ae”, “b4dd3939.c1cd18”, “4ff31492.be2bac”, “b22921a0.00d9” ] ] }, { “id”: “90461dd.f6480e”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 9, “width”: 0, “height”: 0, “passthru”: false, “label”: “一源对多表5”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “”, “topicType”: “str”, “x”: 230, “y”: 660, “wires”: [ [ “2a4159e.fe178a6” ] ] }, { “id”: “3b31a261.e8763e”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 11, “width”: 0, “height”: 0, “passthru”: false, “label”: “类目数据图表2”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “Pie Hole”, “topicType”: “str”, “x”: 240, “y”: 780, “wires”: [ [ “99f2f157.f465” ] ] }, { “id”: “99f2f157.f465”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var m = {};\nm.labels = [2006, 2007, 2008, 2009, 2010, 2011, 2012];\nm.data = [[28, 48, 40, 19, 86, 27, 90]];\nm.series = [Series A];\nreturn {payload:[m],topic:msg.topic};”, “outputs”: 1, “noerr”: 0, “x”: 570, “y”: 780, “wires”: [ [ “df536e27.a17ae”, “ff918655.3f4cc8”, “4ff31492.be2bac”, “b4dd3939.c1cd18”, “1ea08106.2a878f”, “b22921a0.00d9” ] ] }, { “id”: “a2f67800.c7fe68”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “topic”, “func”: “var m = [\n {topic:\”X\”, payload:22},\n {topic:\”Y\”, payload:66},\n {topic:\”Z\”, payload:42}\n ];\nreturn [m];”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 300, “wires”: [ [ “ff918655.3f4cc8”, “df536e27.a17ae”, “1ea08106.2a878f”, “b22921a0.00d9” ] ] }, { “id”: “a0477536.e77c18”, “type”: “inject”, “z”: “cdd041df.75e89”, “name”: “”, “repeat”: “”, “crontab”: “”, “once”: false, “topic”: “”, “payload”: “”, “payloadType”: “date”, “x”: 220, “y”: 300, “wires”: [ [ “a2f67800.c7fe68” ] ] }, { “id”: “60ea28c5.555ed8”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “label”, “func”: “var m = [\n {label:\”A\”, payload:22},\n {label:\”B\”, payload:66},\n {label:\”C\”, payload:42},\n ];\nreturn [m];”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 260, “wires”: [ [ “ff918655.3f4cc8”, “df536e27.a17ae”, “1ea08106.2a878f”, “b22921a0.00d9” ] ] }, { “id”: “a4bb52c8.88239”, “type”: “inject”, “z”: “cdd041df.75e89”, “name”: “”, “repeat”: “”, “crontab”: “”, “once”: false, “topic”: “”, “payload”: “”, “payloadType”: “date”, “x”: 220, “y”: 260, “wires”: [ [ “60ea28c5.555ed8” ] ] }, { “id”: “b27dbaec.a6c808”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var m={\n \”series\”:[\”X\”,\”Y\”,\”Z\”],\n \”data\”:[[5],[3],[6]],\n \”labels\”:[\”Jan\”]\n};\nreturn {payload:[m]};”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 580, “wires”: [ [ “ff918655.3f4cc8”, “b4dd3939.c1cd18”, “4ff31492.be2bac”, “1ea08106.2a878f”, “b22921a0.00d9”, “df536e27.a17ae” ] ] }, { “id”: “b44ac345.63f59”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 7, “width”: 0, “height”: 0, “passthru”: false, “label”: “一源对多表3”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “”, “topicType”: “str”, “x”: 230, “y”: 580, “wires”: [ [ “b27dbaec.a6c808” ] ] }, { “id”: “e7bfc7c3.29bae8”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “”, “func”: “var m={\n \”series\”:[\”X\”],\n \”data\”:[[5,3,6]],\n \”labels\”:[\”Jan\”,\”Feb\”,\”Mar\”]\n};\nreturn {payload:[m]};”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 620, “wires”: [ [ “ff918655.3f4cc8”, “1ea08106.2a878f”, “4ff31492.be2bac”, “b4dd3939.c1cd18”, “b22921a0.00d9”, “df536e27.a17ae” ] ] }, { “id”: “9a4f5993.da9a48”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 8, “width”: 0, “height”: 0, “passthru”: false, “label”: “一源对多表4”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “”, “payloadType”: “str”, “topic”: “”, “topicType”: “str”, “x”: 230, “y”: 620, “wires”: [ [ “e7bfc7c3.29bae8” ] ] }, { “id”: “b22921a0.00d9”, “type”: “ui_chart”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “4e7edda4.417004”, “order”: 2, “width”: 0, “height”: 0, “label”: “横向柱状图”, “chartType”: “horizontalBar”, “legend”: “false”, “xformat”: “HH:mm:ss”, “interpolate”: “linear”, “nodata”: “”, “dot”: false, “ymin”: “”, “ymax”: “”, “removeOlder”: 1, “removeOlderPoints”: “”, “removeOlderUnit”: “3600”, “cutout”: “30”, “useOneColor”: false, “useUTC”: false, “colors”: [ “#1f77b4”, “#aec7e8”, “#ff7f0e”, “#2ca02c”, “#98df8a”, “#d62728”, “#ff9896”, “#9467bd”, “#c5b0d5” ], “outputs”: 1, “useDifferentColor”: false, “x”: 1070, “y”: 400, “wires”: [ [] ] }, { “id”: “b4dd3939.c1cd18”, “type”: “ui_chart”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “4e7edda4.417004”, “order”: 3, “width”: 0, “height”: 0, “label”: “极地区域图”, “chartType”: “polar-area”, “legend”: “false”, “xformat”: “HH:mm:ss”, “interpolate”: “linear”, “nodata”: “”, “dot”: false, “ymin”: “”, “ymax”: “”, “removeOlder”: 1, “removeOlderPoints”: “”, “removeOlderUnit”: “3600”, “cutout”: “30”, “useOneColor”: false, “useUTC”: false, “colors”: [ “#1f77b4”, “#aec7e8”, “#ff7f0e”, “#2ca02c”, “#98df8a”, “#d62728”, “#ff9896”, “#9467bd”, “#c5b0d5” ], “outputs”: 1, “useDifferentColor”: false, “x”: 1070, “y”: 620, “wires”: [ [] ] }, { “id”: “4ff31492.be2bac”, “type”: “ui_chart”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “4e7edda4.417004”, “order”: 4, “width”: 0, “height”: 0, “label”: “雷达图”, “chartType”: “radar”, “legend”: “false”, “xformat”: “HH:mm:ss”, “interpolate”: “linear”, “nodata”: “”, “dot”: false, “ymin”: “”, “ymax”: “”, “removeOlder”: 1, “removeOlderPoints”: “”, “removeOlderUnit”: “3600”, “cutout”: “30”, “useOneColor”: false, “useUTC”: false, “colors”: [ “#1f77b4”, “#aec7e8”, “#ff7f0e”, “#2ca02c”, “#98df8a”, “#d62728”, “#ff9896”, “#9467bd”, “#c5b0d5” ], “outputs”: 1, “useDifferentColor”: false, “x”: 1050, “y”: 740, “wires”: [ [] ] }, { “id”: “74aa631f.93bbfc”, “type”: “function”, “z”: “cdd041df.75e89”, “name”: “label”, “func”: “var m = [\n {label:\”A\”, payload:22, series:\”X\”},\n {label:\”B\”, payload:66, series:\”X\”},\n {label:\”C\”, payload:42, series:\”X\”},\n {label:\”A\”, payload:33, series:\”Y\”},\n {label:\”B\”, payload:72, series:\”Y\”},\n {label:\”C\”, payload:12, series:\”Y\”},\n {label:\”A\”, payload:44, series:\”Z\”},\n {label:\”B\”, payload:32, series:\”Z\”},\n {label:\”C\”, payload:80, series:\”Z\”}\n ];\nreturn [m];”, “outputs”: 1, “noerr”: 0, “x”: 550, “y”: 220, “wires”: [ [ “df536e27.a17ae”, “ff918655.3f4cc8”, “1ea08106.2a878f”, “b22921a0.00d9” ] ] }, { “id”: “ae70552a.a40dc8”, “type”: “inject”, “z”: “cdd041df.75e89”, “name”: “”, “repeat”: “”, “crontab”: “”, “once”: false, “topic”: “”, “payload”: “”, “payloadType”: “date”, “x”: 220, “y”: 220, “wires”: [ [ “74aa631f.93bbfc” ] ] }, { “id”: “5fcbc10a.c3693”, “type”: “ui_button”, “z”: “cdd041df.75e89”, “name”: “”, “group”: “ab397e95.29ebe”, “order”: 11, “width”: 0, “height”: 0, “passthru”: false, “label”: “清空”, “tooltip”: “”, “color”: “”, “bgcolor”: “”, “icon”: “”, “payload”: “[]”, “payloadType”: “json”, “topic”: “”, “topicType”: “str”, “x”: 530, “y”: 180, “wires”: [ [ “4ff31492.be2bac”, “b4dd3939.c1cd18”, “df536e27.a17ae”, “b22921a0.00d9”, “ff918655.3f4cc8”, “1ea08106.2a878f” ] ] }, { “id”: “89749fb7.87f01”, “type”: “ui_group”, “name”: “Charts”, “tab”: “d7901f40.2659d”, “order”: 2, “disp”: false, “width”: “6” }, { “id”: “ab397e95.29ebe”, “type”: “ui_group”, “name”: “Inputs”, “tab”: “d7901f40.2659d”, “order”: 1, “disp”: false, “width”: “6” }, { “id”: “4e7edda4.417004”, “type”: “ui_group”, “name”: “Group 3”, “tab”: “d7901f40.2659d”, “order”: 3, “disp”: false, “width”: “6” }, { “id”: “d7901f40.2659d”, “type”: “ui_tab”, “name”: “Charts”, “icon”: “dashboard”, “order”: 2 } ]

具体使用方法，可以直接复制流的json数据 导入到工作台。

粘贴进去，点导入即可。缺少的节点需要手动安装。