Node-RED 好用的图表工具ECharts

阿斯蒂芬司

已于 2024-01-15 15:23:08 修改

阅读量1.1k

点赞数 15

文章标签：信息可视化 echarts node.js

于 2024-01-15 15:20:31 首次发布

本文链接：https://blog.csdn.net/xiuqitao/article/details/135601802

版权

Node-red的dashboard里自带了部分仪表盘，当需要更加灵活的图表时，不得不提到一个工具ECharts了。ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

官网：Apache ECharts

先看下我用它做了什么，如下图所示，主要对设备的运行情况进行监控，并形成报表，其中的数据来源多来自数据库。

上图分别使用了线性图、热力图以及饼图，对应的配置也相对简单，可参考ECharts 教程 | 菜鸟教程

Node-red中使用方法：

只需在template节点里引入

然后就可以对各个图表进行配置了。例如:

<!DOCTYPE html>
<script src="https://cdn.staticfile.org/echarts/5.4.0/echarts.min.js"></script>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        myChart.setOption({
            series : [
                {
                    name: '访问来源',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {value:235, name:'视频广告'},
                        {value:274, name:'联盟广告'},
                        {value:310, name:'邮件营销'},
                        {value:335, name:'直接访问'},
                        {value:400, name:'搜索引擎'}
                    ]
                }
            ]
        })
    </script>
</body>
</html>

除了上述显示的整体数据外，还可以实现其他行为，比如点击图表中对应部分可查看数据对应的详细内容，如下图点击饼图的对应位置，窗口右侧可弹出具体的故障明细。

实现方法：

1、初始化echarts；

2、添加click监听事件，通过params的值来判断具体点击是哪个位置。

g_hw_err_chart = echarts.init(document.getElementById('hw_err_echarts'));
g_hw_err_chart.setOption(g_pie_chart_option);
	        
g_hw_err_chart.on('click', function(params) {
if (params.componentType === 'series') {
        echart_hw_err_func(params.name);
    }
});

阿斯蒂芬司

关注

15
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
Node-RED 好用的图表工具ECharts

除了上述显示的整体数据外，还可以实现其他行为，比如点击图表中对应部分可查看数据对应的详细内容，如下图点击饼图的对应位置，窗口右侧可弹出具体的故障明细。Node-red的dashboard里自带了部分仪表盘，当需要更加灵活的图表时，不得不提到一个工具ECharts了。先看下我用它做了什么，如下图所示，主要对设备的运行情况进行监控，并形成报表，其中的数据来源多来自数据库。上图分别使用了线性图、热力图以及饼图，对应的配置也相对简单，可参考。图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
复制链接

扫一扫