在 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 访问这些文件。

3. 在 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>

3. 输出到 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>

2. 输出到 Dashboard 或 UI： 将 HTML 页面节点的输出连接到 Node-RED 的 Dashboard 节点或其他 UI 展示节点。