设计素材网站排行榜,建筑工程公司名字起名大全,网站怎么设置支付,天创网站Node-RED 提供了强大的可视化工具#xff0c;而通过引入 ECharts 图表库#xff0c;您可以更直观地呈现和分析数据。在这篇博客中#xff0c;我们将介绍两种在 Node-RED 中实现数据可视化的方法#xff1a;一种是引入本地 ECharts 库#xff0c;另一种是直接使用 CDN… Node-RED 提供了强大的可视化工具而通过引入 ECharts 图表库您可以更直观地呈现和分析数据。在这篇博客中我们将介绍两种在 Node-RED 中实现数据可视化的方法一种是引入本地 ECharts 库另一种是直接使用 CDNContent Delivery Network。 方法一引入本地 ECharts 库
首先在 Node-RED 中引入 ECharts 库。您可以通过以下步骤 创建静态文件夹 在 Node-RED 项目目录下创建一个静态文件夹例如 static。 下载 ECharts 库 下载 ECharts 库的 JavaScript 文件可从 ECharts 官网 获取。将下载的文件放置在刚创建的静态文件夹中。 Node-RED Project|-- static| |-- echarts.min.js|-- ...注意 静态文件夹的位置可以通过 Node-RED 的设置文件settings.js中的 httpStatic 属性指定。在 Docker 中映射文件夹到本地时确保路径是容器内部的路径。 module.exports {httpStatic: /data/static,// 其他配置项...}这样Node-RED 将从容器内部的 /data/static 文件夹提供静态文件并且可以通过 Node-RED 的 URL 访问这些文件。 在 Node-RED 中使用 ECharts 准备数据 确保 Node-RED 工作流中有一个节点生成用于图表的数据。这可以是来自传感器、API 请求或其他来源的实时数据。 创建 ECharts 页面 在 Node-RED 项目中添加一个新的 HTML 页面节点。编写 HTML 和 JavaScript 代码以呈现 ECharts 图表。
!-- 引入 ECharts 文件 --
script src/echarts.min.js/script
!-- 为 ECharts 准备一个定义了宽高的 DOM --
div idmain stylewidth: 600px;height:400px;/div
script// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {title: {text: ECharts 入门示例},tooltip: {},legend: {data: [销量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
/script输出到 Dashboard 或 UI 将 HTML 页面节点的输出连接到 Node-RED 的 Dashboard 节点或任何其他 UI 展示节点。这样在 Dashboard 或其他 UI 中就能够显示 ECharts 图表了。
方法二使用 ECharts CDN
引入 ECharts CDN 直接在 HTML 页面节点中引入 ECharts 的 CDN无需下载和管理本地库文件。
!-- 引入 ECharts CDN --
script srchttps://cdn.jsdelivr.net/npm/echarts5.2.2/dist/echarts.min.js/script!-- 为 ECharts 准备一个定义了宽高的 DOM --
div idmain stylewidth: 600px; height: 400px;/divscript// 初始化 ECharts 实例var myChart echarts.init(document.getElementById(main));// 图表的配置项和数据var option {// 配置项...};// 使用配置项和数据显示图表myChart.setOption(option);
/script
输出到 Dashboard 或 UI 将 HTML 页面节点的输出连接到 Node-RED 的 Dashboard 节点或其他 UI 展示节点。
