前端全栈echarts实时制作。node.js写后端api接口。
前端使用ECharts展示实时数据，后端使用Node.js和Express提供API接口。
后端代码 (Node.js + Express):
const express = require('express');
const app = express();
const port = 3000;
// 模拟数据库或数据源
let data = {
value: 0
};
// API路由
app.get('/api/data', (req, res) => {
// 模拟实时数据更新
data.value = Math.random() * 100; // 生成一个0到100之间的随机数作为模拟数据
res.json(data);
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});前端代码 (HTML + JavaScript):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts实时数据</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '实时数据'
},
series: [
{
type: 'gauge',
detail: {formatter: '{value}'}
}
]
};
myChart.setOption(option);
// 实时更新数据
setInterval(function () {
fetch('/api/data')
.then(response => response.json())
.then(data => {
myChart.setOption({
series: [{
data: [data.value]
}]
});
})
.catch(error => console.error('Error fetching data: ', error));
}, 1000); // 每秒请求一次后端API
</script>
</body>
</html>在这个例子中，前端代码使用ECharts创建了一个仪表盘图表，并通过定时器每秒向后端API发送请求，获取实时数据，并更新图表。后端代码使用Express框架创建了一个API接口，返回一个随机生成的数据点。在实际应用中，你需要将模拟数据源替换为实际的数据库或数据流。
评论已关闭