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

但这种设计方式会让一个节点的代码量非常多。
不太建议，最好是 职责单一。