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

编程问答

flask+sqlite3+echarts2+ajax数据可视化--静态图

發布時間：2024/4/14 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 flask+sqlite3+echarts2+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()

二、定義路由

定義了兩個路由：'/'和'/weather'，后一個用于處理ajax，返回json格式。形如：

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

# 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

這里使用單文件導入模式，見官網例子。

值得注意的是導入echarts.js時使用了url_for函數。初時，我使用了src="js/echarts.js"，老是導入不了！原因不詳！

index.html文件如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>ECharts Ajax</title><script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> </head><body><div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div><script src="{{ url_for('static', filename='echarts.js') }}"></script><script type="text/javascript">// Step:3 為模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js，定義所需圖表路徑require.config({paths: {echarts: './static',}});// Step:4 動態加載echarts然后在回調函數中開始使用，注意保持按需加載結構定義圖表路徑require(['echarts','echarts/chart/bar', // 按需加載'echarts/chart/line',],function (ec) {//--- 折柱 ---var myChart = ec.init(document.getElementById('main'));// 設置---------------------var option = {tooltip : {trigger: 'axis'},legend: {data:['蒸發量','降水量']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},calculable : true,xAxis : [{type : 'category',data : []}],yAxis : [{type : 'value',splitArea : {show : true}}],series : [{name:'蒸發量',type:'bar',data:[]},{name:'降水量',type:'line',data:[]}]};$.ajax({cache: false,type: "POST",url: "/weather", //把表單數據發送到/weatherdata: null, // 發送的數據dataType : "json", //返回數據形式為jsonasync: false,error: function(request) {alert("發送請求失敗！");},success: function(result) {//console.log(result);for (i = 0, max = result.month.length; i < max; i++) { //注意：result.month.lengthoption.xAxis[0].data.push(result.month[i]);option.series[0].data.push(parseFloat(result.evaporation[i])); option.series[1].data.push(parseFloat(result.precipitation[i])); };// 為echarts對象加載數據-------------- myChart.setOption(option);}});// 為echarts對象加載數據-------------- //myChart.setOption(option);});</script> </body> </html>

效果圖

本文轉自羅兵博客園博客，原文鏈接：http://www.cnblogs.com/hhh5460/p/5935315.html，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的flask+sqlite3+echarts2+ajax数据可视化--静态图的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Eclipse 运行Openfire源码
下一篇： golang协程进行同步方法