这个是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) {
        if(err){
            console.log('[SELECT ERROR]:',err.message);
        }

        //result 的格式如下：
        // [{id:1,tdsvalue:"31"},{id:2,tdsvalue:"42"},{id:3,tdsvalue:"23"},{id:4,tdsvalue:"44"},{id:5,tdsvalue:"55"},{id:6,tdsvalue:"36"}]

        console.log(result);
        // 想要转换的格式（更新Echarts折线里面数据要转换成下面格式）
        // {xdays:Array(6),yvalues:Array(6)}
        // [1,2,3,4,5,6]
        // ["31","42","23","44","55","36"]

        for(i=0;i<result.length;i++){

            xdays.push(result[i].id);
            yvalues.push(result[i].tdsvalue);

        }

        console.log('1x'+xdays);
        console.log('1y'+yvalues);

        jsonData['xdays']=xdays;
        jsonData['yvalues'] = yvalues;

        res.send(jsonData);
    });
    connection.end();
});

2.Echarts中饼图的数据异步更新

数据库数据：

前端代码：

<!-- echarts饼图 -->
<div id="statistic-echarts1" style="width: 40%; height: 390px;margin-top: 20px;margin-bottom: 30px;float: left">

</div>

<script>

  // 第一个饼图

  var myChart6 = echarts.init(document.getElementById('statistic-echarts1'));

  // 发送ajax请求，从后台获取数据
  $(document).ready(function () {
      getData6();
  })

  function getData6() {

      $.ajax({
          url:'users/test6',
          type:'get',
          data:{},
          dateType:'json',
          success:function (result) {
              alert(result);
              myChart6.setOption({
                  title : {
                    text: '水质等级占比分布图',
                    x:'center'
                  },
                  tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['Ⅰ类','Ⅱ类','Ⅲ类','Ⅳ类','Ⅴ类']
                  },
                  series : [
                    {
                      name: '水质分类',
                      type: 'pie',
                      radius : '55%',
                      center: ['50%', '60%'],
                      data:result,
                      itemStyle: {
                        emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      }
                    }
                  ]

              })
          },
          error:function (msg) {
              alert("系统发生错误");
          }
      })

  }

</script>

后端代码

// 直接返回的数据就可以使用到ecarts里面了，[{id:1, tdsvalue: '31'},{id: 2, tdsvalue: '42' },{id: 3, tdsvalue: '23'},{id: 4, tdsvalue: '44'},{id: 5, tdsvalue: '55'},{id: 6, tdsvalue: '36'},{id: 7, tdsvalue: '37'}]

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

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

    connection.query(sql, function (err,result) {
        if(err){
            console.log('[SELECT ERROR]:',err.message);
        }

        res.send(result);
    });
    connection.end();

});

3.Mysql数据格式转换

从Mysql取出的原始数据result：

[ { id: 1, tdsvalue: '37' },
  { id: 2, tdsvalue: '19' },
  { id: 3, tdsvalue: '18' },
  { id: 4, tdsvalue: '17' },
  { id: 5, tdsvalue: '17' },
  { id: 6, tdsvalue: '15' },
  { id: 7, tdsvalue: '16' },
  { id: 8, tdsvalue: '17' },
  { id: 9, tdsvalue: '18' } ]

str1 = JSON.stringify(result)后：

// 变成了JSON格式：
[{"id":1,"tdsvalue":"37"},{"id":2,"tdsvalue":"19"},{"id":3,"tdsvalue":"18"},{"id":4,"tdsvalue":"17"},{"id":5,"tdsvalue":"17"},{"id":6,"tdsvalue":"15"},{"id":7,"tdsvalue":"16"},{"id":8,"tdsvalue":"17"},{"id":9,"tdsvalue":"18"}]

str = JSON.parse(str1)后：

// 又变成原始数据result形式了
[{id:1,"tdsvalue":"37"},{id:2,"tdsvalue":"19"},{id:3,"tdsvalue":"18"},{id:4,"tdsvalue":"17"},{id:5,"tdsvalue":"17"},{id:6,"tdsvalue":"15"},{id:7,"tdsvalue":"16"},{id:8,"tdsvalue":"17"},{id:9,"tdsvalue":"18"}]

想要变成{xdays:[1,2,3,4,5,6],yvalues:[‘31’],[‘42’],[‘23’],[‘44’],[‘55’],[‘36’]}

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

connection.query(sql, function (err,result) {
    if(err){
        console.log('[SELECT ERROR]:',err.message);
    }

    console.log(result);
    // 想要转换的格式
    // {xdays:Array(6),yvalues:Array(6)}
    // [1,2,3,4,5,6]
    // ["31","42","23","44","55","36"]

    for(i=0;i<result.length;i++){

        xdays.push(result[i].id);
        yvalues.push(result[i].tdsvalue);

    }

    console.log(xdays);
    console.log(yvalues);

    jsonData['xdays']=xdays;
    jsonData['yvalues'] = yvalues;

    res.send(jsonData);
});

Mysql取数据用于登陆验证：

 <!-- 传递用户登陆和注册信息到数据库 -->

<script>

    $('#btn1').on('click',function (e) {

        var email = $('#username').val();
        var psd = $('#password').val();

        // 非空处理
        if(email == ""){
            alert("请输入用户名");
            return false;
        }else if(psd == ""){
            alert("请输入密码");
            return false;
       }

        var data = {username:email,password:psd};

        $.ajax({
            url:'login/test1',
            type:'get',
            data: data,
            dataType:'json',
            success:function (result) {
                alert(result);
            },
            error:function (msg) {
                alert('系统发生错误');
            }

        })

    })

</script>

// 登陆信息验证
router.all('/test1',function (req,res,next) {

//接收传输过来的邮箱和密码
var username = req.query.username;
var password = req.query.password;

  // username 和 password 都是string类型
  console.log('a '+typeof(username));
  console.log('b '+ password);

  // 连接数据库
  var connection = mysql.createConnection({      //创建mysql实例
      host:'127.0.0.1',
      port:'3306',
      user:'root',
      password:'',
      database:'test'
  });
  connection.connect();
  // sql字段拼接，好像拼接不太好
  var sql = 'SELECT passwd FROM users where username = ' + username ;


  connection.query(sql, function (err,result) {
      if(err){
          console.log('[SELECT ERROR]:',err.message);
      }

      // result 类型为object, result结果是[{passwd:'123'}]
      //console.log('0'+result);  // 输出0[object Object]

      //var result1 = JSON.stringify(result);
      //console.log('1'+result1); // 输出1[{"passwd":"123"}]

      //var result2 = result1[0].passwd;
      //console.log('2'+result2); // 输出2undefined

      var result3 = result[0].passwd;

      console.log('3'+result3) // 输出3123

      if(password == result3){

          //登陆成功，进行页面的跳转
          console.log("登陆成功");

      }else{

          console.log("密码错误");

      };

  });
  connection.end();

  res.send(username);

});

参考文章：
https://blog.csdn.net/lymm000/article/details/65937886
https://www.cnblogs.com/kongxianghai/p/5335632.html
https://segmentfault.com/q/1010000008806264
https://blog.csdn.net/lhf2112/article/details/52848058