在 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 展示节点。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Hadoop_01】Hadoop介绍与安装

1、Hadoop、HDFS、YARN介绍&#xff08;1&#xff09;Hadoop简介与优势&#xff08;2&#xff09;Hadoop组成&#xff08;3&#xff09;HDFS概述&#xff08;4&#xff09;YARN概述&#xff08;5&#xff09;MapReduce概述 2、安装&#xff08;1&#xff09;Centos7.5软硬件安装…

如何在任何STM32上面安装micro_ros

就我知道的&#xff1a;micro-ros只能在特定的昂贵的开发板上面运行&#xff0c;但是偶然发现了这个文章&#xff0c;似乎提供了一个全新的方式来在ros2和单片机之间通讯&#xff0c;如果能够这样肯定也能够提高效率&#xff0c;但即使不行&#xff0c;使用串口库也应该比较简单…

Android Camera 预览尺寸的选取与旋转角度的设定

Camera 在音视频的世界中, 就像我们的眼睛一样, 是负责图像采集的入口, 要想实现一款高可用的 Camera, 我认为需要关注以下几个方面 相机的预览相机的拍摄相机的录制 OpenGL ES 主要用于图像的渲染, 因此这里主要聚焦于相机的预览, 想要让相机的数据呈现到我们屏幕上, 主要有…

Java 将word转为PDF的三种方式和处理在服务器上下载后乱码的格式

我这边是因为业务需要将之前导出的word文档转换为PDF文件&#xff0c;然后页面预览下载这样的情况。之前导出word文档又不是我做的&#xff0c;所以为了不影响业务&#xff0c;只是将最后在输出流时转换成了PDF&#xff0c;当时本地调用没什么问题&#xff0c;一切正常&#xf…

「X」Embedding in NLP|Token 和 N-Gram、Bag-of-Words 模型释义

ChatGPT&#xff08;GPT-3.5&#xff09;和其他大型语言模型&#xff08;Pi、Claude、Bard 等&#xff09;凭何火爆全球&#xff1f;这些语言模型的运作原理是什么&#xff1f;为什么它们在所训练的任务上表现如此出色&#xff1f; 虽然没有人可以给出完整的答案&#xff0c;但…

c++新经典模板与泛型编程:const修饰符的移除与增加

const修饰符的移除 让你来写移除const修饰符&#xff0c;你会怎么样来写&#xff1f; &#x1f602;&#x1f602;trait类模板&#xff0c;如下 #include <iostream>// 泛化版本 template<typename T> struct RemoveConst {using type T; };// 特化版本 template…

案例059:基于微信小程序的在线投稿系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

18、XSS——cookie安全

文章目录 1、cookie重要字段2、子域cookie机制3、路径cookie机制4、HttpOnly Cookie机制5、Secure Cookie机制6、本地cookie与内存cookie7、本地存储方式 一般来说&#xff0c;同域内浏览器中发出的任何一个请求都会带上cookie&#xff0c;无论请求什么资源&#xff0c;请求时&…

ubuntu中显卡驱动,cuda,cudnn安装

1. 在ubuntu中安装显卡驱动 参考&#xff1a;https://blog.csdn.net/m0_37605642/article/details/119651996 2.在ubuntu中安装cuda 参考&#xff1a;https://blog.csdn.net/m0_61431544/article/details/127007300 2.1 安装cuda cuda官网&#xff1a; https://developer.n…

配置端口安全示例

组网需求 如图1所示&#xff0c;用户PC1、PC2、PC3通过接入设备连接公司网络。为了提高用户接入的安全性&#xff0c;将接入设备Switch的接口使能端口安全功能&#xff0c;并且设置接口学习MAC地址数的上限为接入用户数&#xff0c;这样其他外来人员使用自己带来的PC无法访问公…

基于单片机出租车计价器控制系统

**单片机设计介绍&#xff0c;基于单片机出租车计价器控制系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的出租车计价器控制系统是一个用于控制和管理出租车费用计算的电子设备。下面是一个简单的系统设计介绍&…

【若依系列】1.项目修改成自己包名并启动服务

项目下载地址&#xff1a; 分离版本 https://gitee.com/y_project/RuoYi-Vue 修改工具下载 https://gitee.com/lpf_project/common-tools 相关截图&#xff1a; 1.项目结构&#xff1a; 2.修改包名工具&#xff1a; 工具截图&#xff0c;根据对应提示自定义修改即可&#x…

HarmonyOS4.0从零开始的开发教程08构建列表页面

HarmonyOS&#xff08;六&#xff09;构建列表页面 List组件和Grid组件的使用 简介 在我们常用的手机应用中&#xff0c;经常会见到一些数据列表&#xff0c;如设置页面、通讯录、商品列表等。下图中两个页面都包含列表&#xff0c;“首页”页面中包含两个网格布局&#xff…

为何开展数据清洗、特征工程和数据可视化、数据挖掘与建模?

1.2为何开展数据清洗、特征工程和数据可视化、数据挖掘与建模 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.2节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学…

AWS基于x86 vs Graviton(ARM)的RDS MySQL性能对比

概述 这是一个系列。在前面&#xff0c;我们测试了阿里云经济版&#xff08;“ARM”&#xff09;与标准版的性能/价格对比&#xff1b;华为云x86规格与ARM&#xff08;鲲鹏增强&#xff09;版的性能/价格对比。现在&#xff0c;再来看看AWS的ARM版本的RDS情况 在2018年&#…

深度学习猫狗分类 - python opencv cnn 计算机竞赛

文章目录 0 前言1 课题背景2 使用CNN进行猫狗分类3 数据集处理4 神经网络的编写5 Tensorflow计算图的构建6 模型的训练和测试7 预测效果8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习猫狗分类 ** 该项目较为新颖&a…

华为配置流量抑制示例

如拓扑图所示&#xff0c;SwitchA作为二层网络到三层路由器的衔接点&#xff0c;需要限制二层网络转发的广播、未知组播和未知单播报文&#xff0c;防止产生广播风暴&#xff0c;同时限制二三层网络转发的已知组播和已知单播报文&#xff0c;防止大流量冲击。 配置思路 用如下…

gpt1与bert区别

区别1&#xff1a;网络结构&#xff08;主要是Masked Multi-Head-Attention和Multi-Head-Attention&#xff09; gpt1使用transformer的decoder&#xff0c;单向编码&#xff0c;是一种基于语言模型的生成式模型&#xff0c;更适合生成下一个单词或句子 bert使用transformer的…

Vue 父传子组件传参 defineProps

defineProps 属性&#xff1a;用于接收父组件传递过来的数据。 注意&#xff1a;如果 defineProps 接收的参数名&#xff0c;和已有变量名相同&#xff0c;就会造成命名冲突。 语法格式&#xff1a; // 无限制 const props defineProps([参数名, 参数名]);// 限制数据类型 …

Spring Boot 项目的创建、配置文件、日志

文章目录 Spring Boot 优点创建 Spring Boot 项目创建项目认识目录网页创建&#xff08;了解&#xff09; 约定大于配置Spring Boot 配置文件配置文件格式读取配置项properties 配置文件yml 配置文件基本语法进阶语法配置对象配置集合yml 设置不同环境的配置文件 Spring Boot 日…