在 Node-RED 中引入 ECharts 实现数据可视化

Node-RED 提供了强大的可视化工具,而通过引入 ECharts 图表库,您可以更直观地呈现和分析数据。在这篇博客中,我们将介绍两种在 Node-RED 中实现数据可视化的方法:一种是引入本地 ECharts 库,另一种是直接使用 CDN(Content Delivery Network)。

方法一:引入本地 ECharts 库

首先,在 Node-RED 中引入 ECharts 库。您可以通过以下步骤:

  1. 创建静态文件夹

    在 Node-RED 项目目录下创建一个静态文件夹,例如 static

  2. 下载 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 访问这些文件。

  1. 在 Node-RED 中使用 ECharts

    1. 准备数据

      确保 Node-RED 工作流中有一个节点生成用于图表的数据。这可以是来自传感器、API 请求或其他来源的实时数据。

    2. 创建 ECharts 页面

      在 Node-RED 项目中,添加一个新的 HTML 页面节点。编写 HTML 和 JavaScript 代码以呈现 ECharts 图表。
      在这里插入图片描述

<!-- 引入 ECharts 文件 -->
<script src="/echarts.min.js"></script>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 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>
  1. 输出到 Dashboard 或 UI

    将 HTML 页面节点的输出连接到 Node-RED 的 Dashboard 节点或任何其他 UI 展示节点。这样,在 Dashboard 或其他 UI 中就能够显示 ECharts 图表了。
    在这里插入图片描述

方法二:使用 ECharts CDN

  1. 引入 ECharts CDN: 直接在 HTML 页面节点中引入 ECharts 的 CDN,无需下载和管理本地库文件。
<!-- 引入 ECharts CDN -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px; height: 400px;"></div><script>// 初始化 ECharts 实例var myChart = echarts.init(document.getElementById('main'));// 图表的配置项和数据var option = {// 配置项...};// 使用配置项和数据显示图表myChart.setOption(option);
</script>
  1. 输出到 Dashboard 或 UI: 将 HTML 页面节点的输出连接到 Node-RED 的 Dashboard 节点或其他 UI 展示节点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/216341.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微软 Power Platform 零基础 Power Pages 网页搭建高阶实际案例实践(四)

微软 Power Platform 零基础 Power Pages 网页搭建教程之高阶案例实践学习&#xff08;四&#xff09; Power Pages 实际案例学习进阶 微软 Power Platform 零基础 Power Pages 网页搭建教程之高阶案例实践学习&#xff08;四&#xff09;1、新增视图&#xff0c;添加List页面2…

深度学习的目标检测算法综述

信息记录材料 2022年10月 第23卷第10期 【摘要】目标检测是深度学习的一个重要应用&#xff0c;目前在智能驾驶、工业检测相关领域都获得应用&#xff0c;具有重要的现实意义。本文对基于深度学习目标检测算法原理和应用情况进行简述&#xff0c;首先介绍结合区域提取和卷积神经…

Docker部署Nacos集群并用nginx反向代理负载均衡

首先找到Nacos官网给的Github仓库&#xff0c;里面有docker compose可以快速启动Nacos集群。 文章目录 一. 脚本概况二. 自定义修改1. example/cluster-hostname.yaml2. example/.env3. env/mysql.env4. env/nacos-hostname.env 三、运行四、nginx反向代理&#xff0c;负载均衡…

【C语言】RDMACM、Verbs API与epoll一起使用的示例

一、epoll介绍 epoll是Linux内核为处理大批量文件描述符而作了改进的poll&#xff0c;是Linux下多路复用IO接口select/poll的增强版本&#xff0c;它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率。 以下是epoll的主要使用方法和优点&#xff1a; epo…

fuxploide,一款针对文件上传的Fuzz检测工具

fuxploide,一款针对文件上传的Fuzz检测工具 1.工具概述2.安装3.参数解析4.使用案例1.工具概述 Fuxploider 是一种开源渗透测试工具,可自动检测和利用文件上传表单缺陷。该工具能够检测允许上传的文件类型,并能够检测哪种技术最适合在所需的 Web 服务器上上传 Web Shell 或任…

Postswigger 靶场 XSS 通关

文章目录 PostSwigger靶场XSS通关学徒&#xff1a;第一关学徒&#xff1a;第二关学徒&#xff1a;第三关学徒&#xff1a;第四关学徒&#xff1a;第五关学徒&#xff1a;第六关学徒&#xff1a;第七关学徒&#xff1a;第八关学徒&#xff1a;第九关 PostSwigger靶场XSS通关 靶…

三、Shell 环境

一、Linux 系统分类 在 Linux 中&#xff0c;常见的 Shell 有以下几种&#xff1a; Bourne Shell&#xff08;sh&#xff09;&#xff1a;最早的 Shell&#xff0c;由 Stephen Bourne 开发。它是大多数其他 Shell 的基础。Bourne Again Shell&#xff08;bash&#xff09;&am…

前端 Web Workers 简介

简介 以前我们总说&#xff0c;JS 是单线程没有多线程&#xff0c;当 JS 在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验&#xff0c;从而需要设置把任务放在任务队列中&#xff1b;执行任务队列中的任务也并非多线程进行的&#xff0c;然而现在 HTML5 提供了…

遥感深度学习:如何读取TIFF文件和切片成256*256?

博客已同步微信公众号&#xff1a;GIS不要炒茄子 01 前言 最近打算认真从头开始学习深度学习和遥感结合的相关内容&#xff0c;主要通过Python进行处理。此前用深度学习进行遥感相关的学习一直都是用 tensorflow3.0 框架&#xff0c;但是考虑很多因素我后面打算换用 Pytorch…

使用HTTP协议在Linux上进行API调用

在Linux系统上使用HTTP协议进行API调用是一种常见的操作&#xff0c;有时候我们需要调用一些外部API来获取数据或者进行自动化操作。下面是一个使用HTTP协议在Linux上进行API调用的代码示例&#xff0c;希望能够帮助你更好地理解这个过程。 首先&#xff0c;我们需要使用curl命…

单臂路由与三层交换机

单臂路由 划分VLAN后同一VLAN的计算机属于同一个广播域&#xff0c;同一VLAN的计算机之间的通信是不成问题的。然而&#xff0c;处于不同VLAN的计算机即使是在同一交换机上&#xff0c;它们之间的通信也必须使用路由器。 图&#xff08;a&#xff09;是一种实现VLAN间路由的方…

人工智能学习8(集成学习之xgboost)

编译工具&#xff1a;PyCharm 文章目录 编译工具&#xff1a;PyCharm 集成学习XGBoost(Extreme Gradient Boosting)极端梯度提升树1.最优模型的构建方法XGBoost目标函数案例1&#xff1a;泰坦尼克号案例2&#xff1a;对奥拓集团差评进行正确分类。数据准备&#xff1a;1.第一种…

Redis和MySQL双写一致性实用解析

1、背景 先阐明一下Mysql和Redis的关系&#xff1a;Mysql是数据库&#xff0c;用来持久化数据&#xff0c;一定程度上保证数据的可靠性&#xff1b;Redis是用来当缓存&#xff0c;用来提升数据访问的性能。 关于如何保证Mysql和Redis中的数据一致&#xff08;即缓存一致性问题…

36V/48V转12V 10A直流降压DC-DC芯片-AH1007

AH1007是一款36V/48V转12V 10A直流降压&#xff08;DC-DC&#xff09;芯片&#xff0c;它是一种高性能的降压变换器&#xff0c;常用于工业、汽车和电子设备等领域。 AH1007采用了先进的PWM调制技术和开关电源控制算法&#xff0c;能够高效地将输入电压从36V/48V降低到12V&…

【Anaconda】Ubuntu anaconda使用(新建环境、最小化安装Tensorflow)

Ubuntu anaconda使用&#xff08;新建环境、最小化安装Tensorflow&#xff09; 清华源地址&#xff1a; https://pypi.tuna.tsinghua.edu.cn/simplepip安装使用的时候&#xff0c; pip install xxx(库名) -i https://pypi.tuna.tsinghua.edu.cn/simple请先安装好anaconda&am…

无论您用selenium、appium还是playwright都必须使用PO设计模式

随着UI自动化测试工具可选性越来越多&#xff0c;工具也越来越稳定&#xff0c;前几年关于自动化测试架构设计的概念逐渐淡化&#xff0c;但是自动化架构设计中最有用的PO设计模式思想依然需要刚入门自动化测试领域的小白深刻掌握&#xff0c;本文就带大家理解什么是PO设置模式…

fastapi.templating与HTMLResponse

要声明一个模板对象&#xff0c;应将存储html模板的文件夹作为参数提供。在当前工作目录中&#xff0c;我们将创建一个 “templates “目录。 templates Jinja2Templates(directory“templates”) 我们现在要把这个页面的HTML代码渲染成HTMLResponse。让我们修改一下hello()函…

LeetCode:1631. 最小体力消耗路径(SPFA Java)

目录 1631. 最小体力消耗路径 题目描述&#xff1a; 实现代码与解析&#xff1a; BFSDP 原理思路&#xff1a; 1631. 最小体力消耗路径 题目描述&#xff1a; 你准备参加一场远足活动。给你一个二维 rows x columns 的地图 heights &#xff0c;其中 heights[row][col] 表…

electron命令下载失败,手动安装教程

现象&#xff1a;pnpm i electron, 一直卡在提示错误node install.js 一 、下载需要的electron版本 地址 二、下载完毕&#xff0c;解压压缩包&#xff0c; 进入项目的node_modules/electron文件夹&#xff0c;创建dist文件夹&#xff0c;将下载的zip包里的文件复制到dist…

【详解优先级队列(堆)】

目录 堆的概念 堆的性质 堆的存储方式 堆的创建 堆的向下调整 向下过程(以小堆为例) 向下过程(以大堆为例) 建堆的时间复杂度O(n) 堆的插入与删除 堆的插入 向上调整建堆的时间复杂度O(nlogn) 堆的删除 常见习题 常用接口介绍 PriorityQueue的特性 Pri…