node-red使用echart
node-red使用echart
官网下载echart.js
查找Node-red的settings.js文件
方法一
登陆服务器，启动node-red。
$ node-red
3 Nov 20:22:38 - [info]
Welcome to Node-RED
===================
3 Nov 20:22:38 - [info] Node-RED version: v4.0.3
3 Nov 20:22:38 - [info] Node.js version: v20.17.0
3 Nov 20:22:38 - [info] Linux 5.15.0-117-generic x64 LE
3 Nov 20:22:38 - [info] Loading palette nodes
3 Nov 20:22:41 - [info] Dashboard version 1.0.2 started at /ui
......
- /usr/local/lib/node_modules/node-red/node_modules/@node-red/registry/lib/loader.js
- /usr/local/lib/node_modules/node-red/node_modules/@node-red/registry/lib/index.js
- /usr/local/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/index.js
- /usr/local/lib/node_modules/nodegwyy23c1-red/node_modules/@node-red/runtime/lib/index.js
- /usr/local/lib/node_modules/node-red/lib/red.js
- /usr/local/lib/node_modules/node-red/red.js
3 Nov 20:22:44 - [warn] ------------------------------------------------------
3 Nov 20:22:44 - [info] Settings file : /home/usr/.node-red/settings.js
方法二
通过node-red --print settings查找
$ node-red --print settings
3 Nov 20:30:08 - [info]
Welcome to Node-RED
===================
3 Nov 20:30:08 - [info] Node-RED version: v4.0.3
3 Nov 20:30:08 - [info] Node.js version: v20.17.0
3 Nov 20:30:08 - [info] Linux 5.15.0-117-generic x64 LE
3 Nov 20:30:08 - [info] Loading palette nodes
3 Nov 20:30:08 - [info] Dashboard version 1.0.2 started at /ui
......
Require stack:
- /home/usr/.node-red/node_modules/@emanuel_miron/node-red-email/email.js
- /usr/local/lib/node_modules/node-red/node_modules/@node-red/registry/lib/loader.js
- /usr/local/lib/node_modules/node-red/node_modules/@node-red/registry/lib/index.js
- /usr/local/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/index.js
- /usr/local/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/index.js
- /usr/local/lib/node_modules/node-red/lib/red.js
- /usr/local/lib/node_modules/node-red/red.js
3 Nov 20:30:10 - [warn] ------------------------------------------------------
3 Nov 20:30:10 - [info] Settings file : /home/usr/.node-red/settings.js
修改settings.js文件
检索httpStatic配置
根据配置文件的目录，一级级往下找，找到httpStatic
* The settings are split into the following sections:
* - Flow File and User Directory Settings
* - Security
* - Server Settings
* - Runtime Settings
* - Editor Settings
* - Node Settings
......
/*******************************************************************************
* Server Settings
* - uiPort
* - uiHost
* - apiMaxLength
* - httpServerOptions
* - httpAdminRoot
* - httpAdminMiddleware
* - httpAdminCookieOptions
* - httpNodeRoot
* - httpNodeCors
* - httpNodeMiddleware
* - httpStatic
* - httpStaticRoot
* - httpStaticCors
******************************************************************************/
......
/** When httpAdminRoot is used to move the UI to a different root path, the
* following property can be used to identify a directory of static content
* that should be served at http://localhost:1880/.
* When httpStaticRoot is set differently to httpAdminRoot, there is no need
* to move httpAdminRoot
*/
//httpStatic: '/home/nol/node-red-static/', //single static source
去掉注释，使生效，同时，可以根据实际情况修改路径。
httpStatic: '/home/nol/node-red-static/', //single static source
可以改成这样，然后把echart.js丢到这个路径下面（文件夹里）
重启nodered使配置生效
sudo systemctl restart nodered
复制粘贴echart的样例html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.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'));
// 指定图表的配置项和数据
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>
</body>
</html>
丢到node-red的template节点里。
apply,发现，一片白。
查看发现，echart.js无法正常加载。
继续修改template代码。
<template>
<div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px; height: 400px;"></div>
</div>
</template>
<script>
export default {
mounted() {
// 动态创建 script 标签
const echartsScript = document.createElement('script');
echartsScript.src = '/echarts.js';
echartsScript.async = true;
echartsScript.onload = () => {
try {
// 确保 echarts.js 加载完成后再初始化 echarts
const echarts = window.echarts;
// 基于准备好的 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);
console.log("ECharts chart rendered successfully");
} catch (error) {
console.error("Error initializing or rendering ECharts:", error);
}
};
document.head.appendChild(echartsScript);
}
}
</script>
<style>
/* define any styles here - supports raw CSS */
#main {
width: 600px;
height: 400px;
}
</style>
测试
在这个过程中：
确认了 echarts.js 文件的路径和权限正确。
确认 httpStatic 配置，确保静态文件路径设置正确。
手动测试 echarts.js 文件,确保文件可以正确加载。
使用浏览器开发者工具的网络标签页，确认 echarts.js 文件被正确加载。
检查浏览器控制台，查看报错信息
修改template代码
动态创建 script 标签，确保 echarts.js 在 mounted 钩子之前加载。
使用 window.echarts 而不是动态导入，确保 echarts 在脚本加载完成后可用。
-------------------------------------------或者------------------------------------------------
通过访问cdn，实现echart.js加载。只需要将地址改为如下即可。
echartsScript.src = 'https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js'; // 使用 CDN 加载 ECharts
----------------------------------------多个echart-------------------------------------------------
<template>
<div>
<!-- 创建四个 div 容器用于放置 ECharts 图表，设置宽度和高度 -->
<div id="chart11" style="width: 600px; height: 400px;"></div>
<div id="chart12" style="width: 600px; height: 400px;"></div>
<div id="chart13" style="width: 600px; height: 400px;"></div>
<div id="chart14" style="width: 600px; height: 400px;"></div>
</div>
</template>
<script>
export default {
mounted() {
// 动态加载 ECharts 库
if (!window.echarts) {
const echartsScript = document.createElement('script');
echartsScript.src = 'echarts.js'; // 使用 CDN 加载 ECharts
echartsScript.async = true; // 异步加载脚本
echartsScript.onload = () => {
this.initCharts();
};
document.head.appendChild(echartsScript); // 将 script 标签添加到文档头部
} else {
this.initCharts();
}
},
methods: {
initCharts() {
try {
const echarts = window.echarts;
// 初始化第一个图表（柱状图）
const chart11 = echarts.init(document.getElementById('chart11'));
const option1 = this.getBarChartOption();
chart11.setOption(option1);
// 初始化第二个图表（折线图）
const chart12 = echarts.init(document.getElementById('chart12'));
const option2 = this.getLineChartOption();
chart12.setOption(option2);
// 初始化第三个图表（饼图）
const chart13 = echarts.init(document.getElementById('chart13'));
const option3 = this.getPieChartOption();
chart13.setOption(option3);
// 初始化第四个图表（散点图）
const chart14 = echarts.init(document.getElementById('chart14'));
const option4 = this.getScatterChartOption();
chart14.setOption(option4);
console.log("ECharts charts rendered successfully"); // 日志输出，确认图表渲染成功
} catch (error) {
console.error("Error initializing or rendering ECharts:", error); // 错误处理
}
},
// 获取柱状图配置
getBarChartOption() {
return {
title: {
text: '柱状图动画延迟'
},
legend: {
data: ['销量1', '销量2']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
data: this.generateXAxisData(100),
splitLine: {
show: false
}
},
yAxis: {},
series: [
{
name: '销量1',
type: 'bar',
data: this.generateData(100, Math.sin),
emphasis: {
focus: 'series'
},
animationDelay: (idx) => idx * 10
},
{
name: '销量2',
type: 'bar',
data: this.generateData(100, Math.cos),
emphasis: {
focus: 'series'
},
animationDelay: (idx) => idx * 10 + 100
}
],
animationEasing: 'elasticOut',
animationDuration: 1000,
animationDelayUpdate: (idx) => idx * 5
};
},
// 获取折线图配置
getLineChartOption() {
return {
title: {
text: '折线图动画延迟'
},
legend: {
data: ['销量3', '销量4']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
data: this.generateXAxisData(100),
splitLine: {
show: false
}
},
yAxis: {},
series: [
{
name: '销量3',
type: 'line',
data: this.generateData(100, (i) => Math.sin(i / 5) * (i / 5 - 10) + i / 6),
emphasis: {
focus: 'series'
},
animationDelay: (idx) => idx * 10
},
{
name: '销量4',
type: 'line',
data: this.generateData(100, (i) => Math.cos(i / 5) * (i / 5 - 10) + i / 6),
emphasis: {
focus: 'series'
},
animationDelay: (idx) => idx * 10 + 100
}
],
animationEasing: 'elasticOut',
animationDuration: 1000,
animationDelayUpdate: (idx) => idx * 5
};
},
// 获取饼图配置
getPieChartOption() {
return {
title: {
text: '饼图示例'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
},
// 获取散点图配置
getScatterChartOption() {
return {
title: {
text: '散点图示例'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'value',
scale: true,
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
scale: true,
splitLine: {
show: false
}
},
series: [
{
name: '散点1',
type: 'scatter',
data: this.generateScatterData(100)
},
{
name: '散点2',
type: 'scatter',
data: this.generateScatterData(100, (i) => i * 2)
}
]
};
},
// 生成 X 轴数据
generateXAxisData(count) {
return Array.from({ length: count }, (_, i) => `类目${i}`);
},
// 生成数据
generateData(count, func) {
return Array.from({ length: count }, (_, i) => (func(i / 5) * (i / 5 - 10) + i / 6) * 5);
},
// 生成散点图数据
generateScatterData(count, func = (i) => i) {
return Array.from({ length: count }, (_, i) => [func(i), Math.random() * 100]);
}
}
}
</script>
<style>
/* 定义样式 */
#chart11, #chart12, #chart13, #chart14 {
width: 600px;
height: 400px;
margin-bottom: 20px;
}
</style>
