flask+sqlite3+echarts2+ajax数据可视化--静态图
生活随笔
收集整理的這篇文章主要介紹了
flask+sqlite3+echarts2+ajax数据可视化--静态图
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
結(jié)構(gòu)：
/www
|
|-- /static
| |
| |-- echarts.js（當(dāng)然還有echarts原dist目錄下的文件(夾)）
|
|-- /templates
| |
| |-- index.html
|
|-- app.py
|
|-- create_db.py
一、先準(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()二、定義路由
定義了兩個(gè)路由：'/'和'/weather'，后一個(gè)用于處理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 def index():return render_template("index.html") 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
這里使用單文件導(dǎo)入模式，見(jiàn)官網(wǎng)例子。
值得注意的是導(dǎo)入echarts.js時(shí)使用了url_for函數(shù)。初時(shí)，我使用了src="js/echarts.js"，老是導(dǎo)入不了！原因不詳！
index.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><!--Step:1 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom--><div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div><!--Step:2 引入echarts.js--><!--<script src="js/echarts.js"></script>--><script src="{{ url_for('static', filename='echarts.js') }}"></script><script type="text/javascript">// Step:3 為模塊加載器配置echarts的路徑，從當(dāng)前頁(yè)面鏈接到echarts.js，定義所需圖表路徑require.config({paths: {echarts: './static',}});// Step:4 動(dòng)態(tài)加載echarts然后在回調(diào)函數(shù)中開(kāi)始使用，注意保持按需加載結(jié)構(gòu)定義圖表路徑require(['echarts','echarts/chart/bar', // 按需加載'echarts/chart/line',],function (ec) {//--- 折柱 ---var myChart = ec.init(document.getElementById('main'));// 設(shè)置---------------------var option = {tooltip : {trigger: 'axis'},legend: {data:['蒸發(fā)量','降水量']},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:'蒸發(fā)量',type:'bar',data:[]},{name:'降水量',type:'line',data:[]}]};$.ajax({cache: false,type: "POST",url: "/weather", //把表單數(shù)據(jù)發(fā)送到/weatherdata: null, // 發(fā)送的數(shù)據(jù)dataType : "json", //返回?cái)?shù)據(jù)形式為jsonasync: false,error: function(request) {alert("發(fā)送請(qǐng)求失敗！");},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對(duì)象加載數(shù)據(jù)-------------- myChart.setOption(option);}});// 為echarts對(duì)象加載數(shù)據(jù)-------------- //myChart.setOption(option);});</script> </body> </html>效果圖
本文轉(zhuǎn)自羅兵博客園博客，原文鏈接：http://www.cnblogs.com/hhh5460/p/5935315.html，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的flask+sqlite3+echarts2+ajax数据可视化--静态图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Eclipse 运行Openfire源码
- 下一篇： golang协程进行同步方法