當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

flask+sqlite3+echarts3+ajax 异步数据加载

發(fā)布時間：2025/5/22 编程问答 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 flask+sqlite3+echarts3+ajax 异步数据加载小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、先準(zhǔn)備數(shù)據(jù)

# create_db.py # 只運(yùn)行一次！！！import sqlite3# 連接 conn = sqlite3.connect('mydb.db') c = conn.cursor()# 創(chuàng)建表 c.execute('''DROP TABLE IF EXISTS weather''') c.execute('''CREATE TABLE weather (month text, evaporation text, precipitation text)''')# 數(shù)據(jù) # 格式：月份,蒸發(fā)量,降水量 purchases = [('1月', 2, 2.6),('2月', 4.9, 5.9),('3月', 7, 9),('4月', 23.2, 26.4),('5月', 25.6, 28.7),('6月', 76.7, 70.7),('7月', 135.6, 175.6),('8月', 162.2, 182.2),('9月', 32.6, 48.7),('10月', 20, 18.8),('11月', 6.4, 6),('12月', 3.3, 2.3)]# 插入數(shù)據(jù) c.executemany('INSERT INTO weather VALUES (?,?,?)', purchases)# 提交！！！ conn.commit()# 查詢方式一 for row in c.execute('SELECT * FROM weather'):print(row)# 查詢方式二 c.execute('SELECT * FROM weather') print(c.fetchall())# 查詢方式二_2 res = c.execute('SELECT * FROM weather') print(res.fetchall())# 關(guān)閉 conn.close()

二、異步數(shù)據(jù)加載

一次性整體加載所有數(shù)據(jù)

由如下函數(shù)實現(xiàn)：

@app.route("/weather", methods=["GET"]) def weather():if request.method == "GET":res = query_db("SELECT * FROM weather")return jsonify(month = [x[0] for x in res],evaporation = [x[1] for x in res], precipitation = [x[2] for x in res])

此函數(shù)用于處理ajax，返回json格式。形如：

{month: ['1月','2月',...],evaporation: [3.1, 4, 4.6, ...],precipitation: [...] }

完整app.py文件：

# app.pyimport sqlite3 from flask import Flask, request, render_template, jsonifyapp = Flask(__name__)def get_db():db = sqlite3.connect('mydb.db')db.row_factory = sqlite3.Rowreturn dbdef query_db(query, args=(), one=False):db = get_db()cur = db.execute(query, args)db.commit()rv = cur.fetchall()db.close()return (rv[0] if rv else None) if one else rv@app.route("/", methods=["GET"]) def index():return render_template("index.html")@app.route("/weather", methods=["POST"]) def weather():if request.method == "POST":res = query_db("SELECT * FROM weather")return jsonify(month = [x[0] for x in res],evaporation = [x[1] for x in res], precipitation = [x[2] for x in res])if __name__ == "__main__":app.run(debug=True)

三、使用echarts

ECharts3 開始不再強(qiáng)制使用 AMD 的方式按需引入，代碼里也不再內(nèi)置 AMD 加載器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標(biāo)簽引入。

ECharts3 中實現(xiàn)異步數(shù)據(jù)的更新非常簡單，在圖表初始化后不管任何時候只要通過 jQuery 等工具異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項就行。

ECharts3 中在更新數(shù)據(jù)的時候需要通過name屬性對應(yīng)到相應(yīng)的系列，上面示例中如果name不存在也可以根據(jù)系列的順序正常更新，但是更多時候推薦更新數(shù)據(jù)的時候加上系列的name數(shù)據(jù)。

index.html文件如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>ECharts3 Ajax</title><script src="{{ url_for('static', filename='jquery-3.1.1.js') }}"></script><script src="{{ url_for('static', filename='echarts.js') }}"></script> </head><body><div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));// 顯示標(biāo)題，圖例和空的坐標(biāo)軸myChart.setOption({title: {text: '異步數(shù)據(jù)加載示例'},tooltip: {},legend: {data:['蒸發(fā)量','降水量']},xAxis: {data: []},yAxis: {},series: [{name: '蒸發(fā)量',type: 'bar',data: []},{name: '降水量',type: 'line',data: []}]});myChart.showLoading(); // 顯示加載動畫// 異步加載數(shù)據(jù)$.get('/weather').done(function (data) {myChart.hideLoading(); // 隱藏加載動畫// 填入數(shù)據(jù)myChart.setOption({xAxis: {data: data.month},series: [{name: '蒸發(fā)量', // 根據(jù)名字對應(yīng)到相應(yīng)的系列data: data.evaporation.map(parseFloat) // 轉(zhuǎn)化為數(shù)字（注意map）},{name: '降水量',data: data.precipitation.map(parseFloat)}]});});</script> </body> </html>

效果圖

總結(jié)

以上是生活随笔為你收集整理的flask+sqlite3+echarts3+ajax 异步数据加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：「android」查看应用占用cpu和内
下一篇： Linux下编译Boost