前端全栈echarts实时制作。node.js写后端api接口。

Too274

已于 2024-04-14 16:38:49 修改

阅读量706

点赞数 15

文章标签：前端 node.js

于 2024-04-06 02:28:37 首次发布

本文链接：https://blog.csdn.net/qq_70756940/article/details/137414463

版权

首先先介绍一下我这个实时可视化的流程：先写后端→写html网页结构→echarts画图→获取api接口数据→做实时可视化。总体来说就是要做一个实时可视化。不说怎么多了我直接开始操作，这次可能不会一下全部写完，但后面会接着继续完善此博客呢。

一：node.js写api接口

非常的简单，直接一个js文件就可以搞定(而且还带定时接受mysql数据的效果呢)：

const express = require('express');
const mysql = require('mysql');
const app = express();
const cors = require('cors');
app.use(cors()); // 这会允许所有的源
const corsOptions = {
  origin: 'null', // 允许本地文件系统（即，当你从文件:// 协议运行时）
  optionsSuccessStatus: 200 // 一些旧版浏览器的兼容性处理
};
app.use(cors(corsOptions));
// 创建一个连接到MySQL数据库的连接池
const pool = mysql.createPool({
  // ... 连接池配置 ...
  connectionLimit: 10, // 连接池中的连接数
  host: 'localhost', // 数据库服务器的地址
  user: 'root', // 数据库用户名
  password: '123456', // 数据库密码
  database: 'day001' // 数据库名
});

// 创建一个API路由，用于从MySQL数据库获取数据
app.get('/api/data', (req, res) => {
  pool.getConnection((err, connection) => {
    if (err) throw err;
    connection.query('SELECT * FROM tab13', (error, results, fields) => {
      connection.release(); // 释放连接
      if (error) throw error;
      res.json(results); // 将查询结果作为JSON发送回客户端
    });
  });
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// 连接到数据库（这里不需要手动连接，因为使用了连接池）
pool.getConnection((err, connection) => {
  if (err) {
    return console.error('Error connecting: ' + err.stack);
  }
  console.log('Connected to the database');
  connection.release(); // 连接成功后释放连接
});

// 定义一个函数来执行查询并输出结果
function queryDatabase() {
  pool.query('SELECT * FROM tab13', (error, results, fields) => {
    if (error) {
      return console.error('Error executing query: ' + error.stack);
    }
    console.log('Query results:', results);
  });
}

// 使用定时器定期执行查询函数
// 例如，每隔5秒执行一次查询
const queryInterval = 5 * 1000; // 5秒的毫秒数
setInterval(queryDatabase, queryInterval);

二：html网页结构

要学好一个前端，web开发或者是可视化大屏，一个基础的html结构还是必须要知道的。

以下代码是做了解用（我只是大概写了一下，最好是自己去看视频学习，第二步可以跳过，不耽误实时可视化学习）

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 头部区域开始 -->
    <meta charset="UTF-8">
    <!-- 设置文档的字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 视口设置，使网站在移动设备上有更好的显示效果 -->
    <title>我的第一个 HTML 页面</title>
    <!-- 网页标题，显示在浏览器标签上 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 引入外部 CSS 样式表 -->
    <script src="script.js" defer></script>
    <!-- 引入外部 JavaScript 文件，并延迟执行直到 DOM 完全加载 -->
    <!-- 头部区域结束 -->
</head>
<body>
    <!-- 身体区域开始 -->
    <header>
        <!-- 头部内容，通常包含导航菜单 -->
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <!-- 主要内容区域 -->
        <article>
            <!-- 文章内容 -->
            <h1>欢迎来到我的网站</h1>
            <p>这是一段介绍性的文字。</p>
        </article>
    </main>
    
    <aside>
        <!-- 侧边栏内容，通常用于辅助信息 -->
        <section>
            <h2>相关链接</h2>
            <ul>
                <li><a href="#">链接 1</a></li>
                <li><a href="#">链接 2</a></li>
            </ul>
        </section>
    </aside>
    
    <footer>
        <!-- 页脚内容，通常包含版权信息、联系方式等 -->
        <p>版权所有 @全网所有人  -  爱学就来，有不懂的评论一起讨论喔~</p>
    </footer>
    <!-- 身体区域结束 -->
</body>
</html>

<!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个 HTML5 文档。
<html lang="en">: <html> 标签是所有 HTML 文档的根元素。lang="en" 属性指定了文档的主要语言是英语。
<head>: 包含文档的元数据（metadata），不会直接显示在页面内容中。
- <meta charset="UTF-8">: 设置文档的字符编码为 UTF-8，这是一种广泛使用的国际字符编码。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 为移动设备优化视口设置。
- <title>: 定义了浏览器标签上显示的网页标题。
- <link rel="stylesheet" href="styles.css">: 引入一个外部的 CSS 样式表文件，用于定义网页的样式。
- <script src="script.js" defer></script>: 引入一个外部的 JavaScript 文件，defer 属性表示脚本会在文档解析完成后执行。
<body>: 包含文档的可见内容。
- <header>: 通常包含导航链接、标志和 slogan 等。
- <nav>: 定义导航链接的部分。
- <main>: 包含页面的主要内容区域。
- <article>: 用于包裹独立的内容，如文章或博客帖子。
- <aside>: 用于包含与页面主要内容相关但可以独立于内容存在的部分，如侧边栏。
- <footer>: 包含页脚信息，如版权、联系方式等。

三：echarts画图

这个我也建议跳过呢，因为就一篇博客是不可能让你把一个echarts就可以学得很好的。

想学echarts就去官网学习我可以提供一个网址：Apache ECharts

需要学到什么程度呢，就是你画的图可以将几张都合在一个页面，随便放到任何位置，学到这样就差不多了。其实就是：标题-网格-图例-提示框-X和Y轴-图的数据（series）。就没了。随便学一两天绝对够了（当然需要足够多的练习）。

以下就给个很基础html套echarts的代码。（以下代码主要作用是html如何套echarts）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts 基础图表示例</title>
    <!-- 引入 ECharts -->
    <!-- 你可以下载 echarts.js 或使用在线 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 图表准备一个容器 -->
    <div id="chart" style="width: 600px;height:400px;"></div>
    <script>
        // 基于准备好的容器初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 指定图表的配置项和数据
        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>

四：获取api接口数据

我们写的后端接口是get/post/其他。一般呢都是get和post访问。

博主给出的代码需要你们自己详细理解，代码不多，但都非常的重要。

运行如下代码就可以完美的拿到mysql里面的数据，而且还会自动转为json格式，让JavaScript行云流水的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示数据示例</title>
    <script>
        // 当文档加载完毕时执行
        document.addEventListener('DOMContentLoaded', (event) => {
          fetch('http://localhost:3000/api/data')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log(data); // 打印获取到的数据
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });
        });
    </script>
</head>
<body>
    <h1>数据列表</h1>
    <ul id="data-list"></ul>
</body>
</html>

五：实时可视化

最后一步就需要把所有的知识全用上了，而且还会有新的知识，后面全都会讲到。

今天就先写到这里，比较晚了，后面有时间我会将写的数据大屏给展示出来（反正就这几天，绝对不会过一周）。

以下代码是一个实时echarts数据展示，有兴趣的博友可以试着学习。（其实到这里已经比较清楚了，友实力的网友们，说不定已经可以自己写后续了呢。加油！一起加油！！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts 数据定时更新示例</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 准备一个用于显示图表的容器 -->
    <div id="chart" style="width: 600px;height:400px;"></div>

    <script>
        // 基于准备好的容器初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 指定图表的配置项和数据
        function getData() {
            // 这里是获取数据的示例，你可能需要从服务器获取数据或生成数据
            return {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data,
                    type: 'line'
                }]
            };
        }

        var data = [1222, 932, 901, 934, 1290, 1330, 1320]
        // 使用刚指定的配置项和数据显示图表
        function updateChart() {
            myChart.setOption(getData());
        }

        // 初始时，立即更新一次图表
        time001 = 0
        function pr(){
            console.log(time001)
            time001+=3
            data[0] = data[0] - 100
            console.log("现在数据为"+data[0])
        }
        window.onload = () => {
            setInterval(pr,3000)
            setInterval(updateChart, 3000); 
        }
        // 每隔一定时间（例如3秒）更新一次图表

    </script>
</body>
</html>

上面这个图呢，是已经可以实时展示的了。只不过只有一个图罢了。后面我会更新博客的，继续完善这个博客。后续正在加载中... ...

终于有时间了，这就把之前写的大屏效果给大家呈现出来。（把上面的东西学完了，肯定是可以做出如此效果的。（主要核心技术是html＋echarts-express）），如果有想要这个代码的可以留言。人可以将源码再更新博客发出来呢！！

记住！记住！这些所有的图的数据都是可以实时更新的喔！

Too274

关注

15
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
前端全栈echarts实时制作。node.js写后端api接口。

/ 这会允许所有的源origin: 'null', // 允许本地文件系统（即，当你从文件:// 协议运行时）optionsSuccessStatus: 200 // 一些旧版浏览器的兼容性处理// 创建一个连接到MySQL数据库的连接池connectionLimit: 10, // 连接池中的连接数host: 'localhost', // 数据库服务器的地址user: 'root', // 数据库用户名password: '123456', // 数据库密码。
复制链接

扫一扫