在nr中使用echarts折线图制作面板-以下哪个场景可能出现

在node-red的dashboard面板里有chart这一个节点，但其中的图表并不是很美观，而且可配置项非常的少。

大家可以看一下

于是就有很多小伙伴找我做一套比较好看的图表面板，在对比了一下几个图表库，我选中了echarts。

不仅美观大方，而且非常容易集成，配置。

下面先来看一下我做的效果。这里是直接做了四个折线图，第一个折线图有动态效果，第二个折线图是一个多线条的折线图，第三个折线图是在一个图例显示两个折线图。第二第三都可以用于数据对比。

第四个折线图是用于在物联网平台中显示更多数据，特意使用了滚动条，用户可以拖动滚动条显示部分区域。下面讲解一下如何在node-red中实现的这种效果

实现流程

首先你需要将echarts.js 下载到本地，目前最新的版本是5.x。建议开发者也使用最新版，新版的更美观，大方。下载完js后，将其放到node-red的配置目录。在node-red的配置文件中settings.js。配置静态资源目录，将js拷贝到该目录下，比如我的是settings.js就在 \Users\fizz.node-red\settings.js

配置静态文件目录 HTTP Static 为 C:\Users\fizz.node-red\static

这样配置完成后，你就可以在template节点中使用 echarts.js了。

如 <script src=”/echarts.min.js”></script>

配置完成后，我们使用dashboard的template节点来实现图表，使用template可以更加灵活，自定义去写一些html，和js。以此来实现我们的业务场景。

在使用template之前需要先配置dashboard 的tab 和group，设置页面的大小。

第一个图片的折线图，核心代码为

<script src=”/echarts.min.js”></script> <div id=”main1″ style=”height: 500px; width: 500px;”></div> <script> var chartDom = document.getElementById(main1); var myChart = echarts.init(chartDom); var option; var xAxisData = []; var data1 = []; var data2 = []; for (var i = 0; i < 100; i++) { xAxisData.push(类目 + i); data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5); data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5); } option = { title: { text: 柱状图动画延迟 }, legend: { data: [bar, bar2] }, tooltip: {}, xAxis: { data: xAxisData, splitLine: { show: false } }, yAxis: { }, series: [{ name: bar, type: bar, data: data1, emphasis: { focus: series }, animationDelay: function (idx) { return idx * 10; } }, { name: bar2, type: bar, data: data2, emphasis: { focus: series }, animationDelay: function (idx) { return idx * 10 + 100; } }], animationEasing: elasticOut, animationDelayUpdate: function (idx) { return idx * 5; } }; option && myChart.setOption(option); </script>

首先引入echarts.js， 然后定义一个用于装载图表的容器 div id为main。

然后编写script代码。

配置图表的数据，颜色，以及动画。这些参数在echarts中都有对应的解释，这里不做详细介绍，本文的核心内容是帮助大家制作一些美观，优雅的图表。

有关echarts 的配置请查阅 该链接。 https://echarts.apache.org/zh/option.html#title

配置完成后，点击右上角的部署，访问http://127.0.0.1:1880/ui 就能看到 配置好的页面了。

配置完成地一个后，在配置第二个时，需要注意，需要修改id=main。将id改为charts1。如果id一致的话，会导致只有一个图表出现。

将容器的宽度高度设置为500px。这样可以看的不那么拥挤。

当一个需要多个图表时，出了这种使用多个template来实现，我们也有将所有的图表放到一个template中。

使用下面的dom结构 <div> <div id=”chart1″ style=”height: 500px; width: 500px;”></div> <div id=”chart2″ style=”height: 500px; width: 500px;”></div> <div id=”chart3″ style=”height: 500px; width: 500px;”></div> <div id=”chart4″ style=”height: 500px; width: 500px;”></div> </div>

但这种设计方式会让一个节点的代码量非常多。

不太建议，最好是 职责单一。