當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/5/22 编程问答 63 豆豆

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

一、先準備數據

# create_db.py # 只運行一次！！！import sqlite3# 連接 conn = sqlite3.connect('mydb.db') c = conn.cursor()# 創建表 c.execute('''DROP TABLE IF EXISTS weather''') c.execute('''CREATE TABLE weather (month text, evaporation text, precipitation text)''')# 數據 # 格式：月份,蒸發量,降水量 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)]# 插入數據 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())# 關閉 conn.close()

二、異步數據加載

一次性整體加載所有數據

由如下函數實現：

@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])

此函數用于處理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 開始不再強制使用 AMD 的方式按需引入，代碼里也不再內置 AMD 加載器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標簽引入。

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

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

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'));// 顯示標題，圖例和空的坐標軸myChart.setOption({title: {text: '異步數據加載示例'},tooltip: {},legend: {data:['蒸發量','降水量']},xAxis: {data: []},yAxis: {},series: [{name: '蒸發量',type: 'bar',data: []},{name: '降水量',type: 'line',data: []}]});myChart.showLoading(); // 顯示加載動畫// 異步加載數據$.get('/weather').done(function (data) {myChart.hideLoading(); // 隱藏加載動畫// 填入數據myChart.setOption({xAxis: {data: data.month},series: [{name: '蒸發量', // 根據名字對應到相應的系列data: data.evaporation.map(parseFloat) // 轉化為數字（注意map）},{name: '降水量',data: data.precipitation.map(parseFloat)}]});});</script> </body> </html>

效果圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：「android」查看应用占用cpu和内
下一篇：自定义ConfigurationSect