（超详细超靠谱）echarts连接数据库并实时刷新（ajax）

前言：

最近做了个机器学习的小项目，想要实时输出训练数据并展示到前端。在csdn上找了很久，发现没有一个靠谱的帖子，只能自己琢磨了

环境：

pycharm、前端框架flask、
自己去下文件，引用

<script src="../static/js/echarts.min.js"></script>

详细步骤：

前端代码：

echarts的那些基本步骤就不多赘述：

echarts的样式配置

<script src="../static/js/fl_chart.js"></script>

这部分没有放在页面，新建了js文件,记得在原网页中引用。

配置代码如下：
var fl_chart = echarts.init(document.querySelector(".showlearn .chartlearn"));
//上面代码确定图标位置，根据自己内容更改
var fl_chart_Option = {
这里面放你自己的样式
};
fl_chart.setOption(fl_chart_Option);
//  让图表跟随屏幕自动的去适应（需要这个功能的话需要flexible插件）
window.addEventListener("resize", function() {
fl_chart.resize();
});

实时刷新&数据库传值

这一部分也单独写个js文件，记得引入进去奥~

function gettime() {
    $.ajax({
        url:"/time",
        timeout:10000,
        success: function (data) {
            $("#tim").html(data)
        },
        error:function (xhr,type,errorThrown) {

        }
    });
}

//从后台里取值展示到图标
function get_learn_data() {
    $.ajax({
        url:"/l1",  
        success: function (data) {
            console.log(data)
            fl_chart_Option.xAxis[0].data = data.term1   //注意这个位置和数据
            fl_chart_Option.series[0].data = data.acc1
            fl_chart.setOption(fl_chart_Option)
        },
        error:function (xhr,type,errorThrown) {

        }
    });
}

###每10秒刷新一下局部网页
gettime()
get_learn_data()
setInterval(get_learn_data,10000)

后台

从数据库获取数据

可以创建一个utils.py文件，负责从数据库里获取数据

import pymysql
from flask import Flask, jsonify

def get_conn():
    # 1. 连接数据库，
    conn = pymysql.connect(
        host='localhost',
        user='root',
        password='你的数据库密码',
        db='数据库名称',
        charset='utf8',
        autocommit=True,    # 如果插入数据，， 是否自动提交? 和conn.commit()功能一致。
    )
    # ****python, 必须有一个游标对象， 用来给数据库发送sql语句， 并执行的.
    # 2. 创建游标对象，
    cursor = conn.cursor()
    return conn,cursor

def close_conn(conn,cursor):
    cursor.close()
    conn.close()

def query(sql,*args):
    """
    封装通用的查询
    :param sql:
    :param args:
    :return:
    """
    conn, cursor = get_conn()
    cursor.execute(sql,args)
    res = cursor.fetchall()
    close_conn(conn,cursor)
    return res


#数据获取
def get_acc_data():
	#这里写sql语句，用来查数据
    sql = "select Term,Acc from surmary"
    res = query(sql)
    return res

主程序里面

1.import utils先导包！！把刚刚的utils.py文件导进来
2.创建路由（这个路由前面ajax用到了）

@app.route('/l1')
def get_acc_data():
	data = utils.get_acc_data()
	term1,acc1 =[],[]
	for a,b in data:
		term1.append(a)
		acc1.append(b)
	return jsonify({"term1":term1,"acc1":acc1})

里面是返回json值展示到网页上

大概就是这些内容，真的好使，随着你的训练轮次数据会一轮轮的刷新。~