Echarts异步更新数据和Mysql数据格式转换

最新推荐文章于 2025-08-04 15:06:06 发布

Cacra

最新推荐文章于 2025-08-04 15:06:06 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Mysql 前端框架 Javascript

本文链接：https://blog.youkuaiyun.com/u014465934/article/details/82079830

本文介绍了在Express框架下如何利用Echarts进行数据的异步更新，包括折线图和饼图的数据更新方法。同时，探讨了如何将MySQL取出的原始数据转换为特定格式，以供前端使用。示例代码展示了前端Ajax请求和后端处理过程，以及数据转换的步骤。参考了多个技术博客和论坛的资源。

这个是Express框架，里面使用Echarts，使用Ajax更新数据。

1.折线图的数据异步更新

这里写图片描述

数据库：

这里写图片描述

前端代码：

<!-- echarts曲线 -->
<div id="change-echarts1" style="display: block;float:left;width: 1130px;margin-left: 150px;height: 390px;line-height: 390px;margin-top: 30px;">

</div>

<script>

    //第一个图表
    var myChart1 = echarts.init(document.getElementById('change-echarts1'));

    var app = {
        xday:[],
        yvalue:[]
    };

    // 发送ajax请求，从后台获取json数据
    $(document).ready(function () {
    
    
       getData();
       console.log(app.xday);
       console.log(app.yvalue)
    });

    function getData() {
    
    
         $.ajax({
            url:'echarts',
            data:{},
            type:'get',
            dataType:'json',
            success:function(result) {
    
    
                alert(result.yvalues);
                app.xday = result.xdays;
                app.yvalue = result.yvalues;
                myChart1.setOption({
                    title: {
                        text: 'PH数据变化情况'
                    },
                    tooltip: {},
                    legend: {
                        data:['PH']
                    },
                    xAxis: {
                        data: app.xday
                    },
                    yAxis: {},
                    series: [{
                        name: 'PH',
                        type: 'line',
                        data: app.yvalue
                    }]
                })
            },
            error:function (msg) {
    
    
                console.log(msg);
                alert('系统发生错误');
            }
        })
    };

</script>

后端代码：

// 导入mysql模块
var mysql = require('mysql');

router.all('/echarts',function (req,res) {

    // 连接到mysql
    var connection = mysql.createConnection({      //创建mysql实例
        host:'127.0.0.1',
        port:'3306',
        user:'root',
        password:'',
        database:'test'
    });
    connection.connect();
    var sql = 'SELECT * FROM tvalues1';
    var str1 = " ";
    var str = " ";

    // 转换格式
    var i;
    jsonData = {}
    xdays = []
    yvalues = []

    connection.query(sql, function (err,result) {