首页专栏详情
打赏
在nr中使用echarts折线图制作面板
易百纳技术社区 ember 2022-05-27 15:56:26

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

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

1358
收藏
点赞
打赏
共1人已赏
ember
评论
0个
内容存在敏感词
相关专栏
打赏作者
易百纳技术社区
ember
您的支持将鼓励我继续创作!
打赏金额:
¥1 易百纳技术社区
¥5 易百纳技术社区
¥10 易百纳技术社区
¥50 易百纳技术社区
¥100 易百纳技术社区
支付方式:
微信支付
支付宝支付
易百纳技术社区 微信支付
易百纳技术社区
打赏成功!

感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

审核成功

发布时间设置
发布时间:

审核失败

失败原因
备注
Loading...
易百纳技术社区
确定要删除此文章、专栏、评论吗?
确定
取消
易百纳技术社区
易百纳技术社区
在专栏模块发布专栏,可获得其他E友的打赏
易百纳技术社区
回答悬赏问答,被题主采纳后即可获得悬赏金
易百纳技术社区
在上传资料时,有价值的资料可设置为付费资源
易百纳技术社区
达到一定金额,收益即可提现~
收益也可用来充值ebc,下载资料、兑换礼品更容易
易百纳技术社区
活动规则
  • 1.周任务为周期性任务,每周周一00:00刷新,上周完成的任务不会累计到本周,本周需要从头开始任务,当前任务完成后才可以完成下一个任务
  • 2.发布的专栏与资料需要与平台的板块有相关性,禁止注水,专栏/资料任务以审核通过的篇数为准
  • 3.任务完成后,现金奖励直接打款到微信账户;EBC/收益将自动发放到个人账户,可前往“我的钱包”查看;其他奖励请联系客服兑换
  • 4.每周最后三个任务将会有以下奖品掉落:社区热卖开发板、小米音响、视频年度会员、京东卡、华为手机等等
易百纳技术社区
升级提醒
易百纳技术社区

恭喜您由入门

社区送出礼品一份

请填写您的收件地址,礼品将在3个工作日寄出

易百纳技术社区