python+flask+socket-io+echarts資料視覺化
檢視本機python版本
安裝psutil
開啟window power shell安裝psutil
PSC:\Users\space> pip install psutil
Collectingpsutil
Downloadinghttps://files.pythonhosted.org/packages/c6/bf/09b13c17f54f0004ccb43cc1c2d36bab2eb75f471564b7856749dcaf62c3/psutil-5.4.5-cp35-cp35m-win_amd64.whl(222kB)
100% |████████████████████████████████|225kB 714kB/s
Installingcollected packages: psutil
Successfullyinstalled psutil-5.4.5
Youare using pip version 8.1.1, however version 10.0.1 is available.
Youshould consider upgrading via the 'python -m pip install --upgrade pip' command.
安裝flask
PSC:\Users\space> pip install flask
Collectingflask
Downloadinghttps://files.pythonhosted.org/packages/77/32/e3597cb19ffffe724ad4bf0beca4153419918e7fa4ba6a34b04ee4da3371/Flask-0.12.2-py2.py3-none-any.whl(83kB)
100% |████████████████████████████████|92kB 238kB/s
Collectingitsdangerous>=0.21 (from flask)
Downloadinghttps://files.pythonhosted.org/packages/dc/b4/a60bcdba945c00f6d608d8975131ab3f25b22f2bcfe1dab221165194b2d4/itsdangerous-0.24.tar.gz(46kB)
100% |████████████████████████████████|51kB 374kB/s
CollectingJinja2>=2.4 (from flask)
Downloadinghttps://files.pythonhosted.org/packages/7f/ff/ae64bacdfc95f27a016a7bed8e8686763ba4d277a78ca76f32659220a731/Jinja2-2.10-py2.py3-none-any.whl(126kB)
100% |████████████████████████████████|133kB 453kB/s
Collectingclick>=2.0 (from flask)
Downloadinghttps://files.pythonhosted.org/packages/34/c1/8806f99713ddb993c5366c362b2f908f18269f8d792aff1abfd700775a77/click-6.7-py2.py3-none-any.whl(71kB)
100% |████████████████████████████████|71kB 314kB/s
CollectingWerkzeug>=0.7 (from flask)
Downloadinghttps://files.pythonhosted.org/packages/20/c4/12e3e56473e52375aa29c4764e70d1b8f3efa6682bef8d0aae04fe335243/Werkzeug-0.14.1-py2.py3-none-any.whl(322kB)
100% |████████████████████████████████|327kB 198kB/s
CollectingMarkupSafe>=0.23 (from Jinja2>=2.4->flask)
Downloadinghttps://files.pythonhosted.org/packages/4d/de/32d741db316d8fdb7680822dd37001ef7a448255de9699ab4bfcbdf4172b/MarkupSafe-1.0.tar.gz
Installingcollected packages: itsdangerous, MarkupSafe, Jinja2, click, Werkzeug, flask
Running setup.py install for itsdangerous ...done
Running setup.py install for MarkupSafe ...done
Successfullyinstalled Jinja2-2.10 MarkupSafe-1.0 Werkzeug-0.14.1 click-6.7 flask-0.12.2itsdangerous-0.24
Youare using pip version 8.1.1, however version 10.0.1 is available.
Youshould consider upgrading via the 'python -m pip install --upgrade pip'command.
安裝flask-socketio
pipinstall flask-socketio
更新pip
python-m pip install --upgrade pip
使用flask
開啟pycharm，新建一個工程
建立一個.py檔案
建立一個資料夾，名字叫 templates (不能改成別的)
在該資料夾下建立一個.html檔案
開啟.py檔案
fromflask import Flask, render_template
fromflask_socketio import SocketIO
app= Flask(__name__)
app.config['SECRET_KEY']= 'secret!'
socketio= SocketIO(app)
@app.route('/')
defindex():
return render_template('index.html')
if__name__ == '__main__':
socketio.run(app)
開啟.html檔案
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<body>
<a>wbcbwjcwcw</a>
</body>
<scripttype="text/javascript" charset="utf-8">
var socket = io.connect('http://' +document.domain + ':' + location.port+'/');
socket.on('connect', function() {
socket.emit('my event', {data: 'I\'mconnected!'});
});
</script>
</html>
【注意】
//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js一定要確保能用，之前用的1.0.3怎麼都打不開網頁，也可以把該檔案下載下來
socket-io如何傳遞資料給echarts
搭建flask socket-io基本框架
fromflask import Flask, render_template
fromflask_socketio import SocketIO
app= Flask(__name__)
app.config['SECRET_KEY']= 'secret!'
socketio= SocketIO(app)
@app.route('/')
defindex():
return render_template('index.html')
if__name__ == '__main__':
socketio.run(app)
這樣一啟動flask就會進入index.html,這個跳轉是由@app.route('/')下的函式實現的
在html頁面中新增echarts
首先引入echarts需要的js檔案，可以連結網路上的也可以使用本地的
<script type="text/javascript"src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript"src="//cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script>
<scriptsrc="theme/chalk.js"></script>
<!-- ECharts 3 引入 -->
<scriptsrc="http://echarts.baidu.com/dist/echarts.js"></script>
然後建立一個div,確定div的id
<divid="main" style="height:300px;border:1px solid#ccc;padding:10px;"></div>
然後在script標籤內新增echarts
這是一個柱狀圖
<scripttype="text/javascript">
// 基於準備好的dom，初始化echarts例項
var myChart1 =echarts.init(document.getElementById('main'),'dark');
// 指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart1.setOption(option);
</script>
其中document.getElementById('main')中的main就是之前div的id,通過這個設定，圖表就會知道要把自己放到哪個div中；後面的dark是預設主題之一，可以自己自定義主題，具體方法官網有，不再介紹
經過上面兩步啟動flask後就會在localhost:5000網頁上看到一個柱狀圖，不過這個柱狀圖是靜態的不能接收後臺資料動態改變
現在在.py檔案中新增一個執行緒，用來與前端交互發送資料
首先新增
#與前端建立 socket 連線後，啟動後臺執行緒
@socketio.on('connect',namespace='/test')
然後在該句下面新增自己的函式來啟動一個後臺執行緒
thread= socketio.start_background_task(target=background_thread)
其中background_thread即是要實現的後臺處理函式
然後建立background_thread函式
在該函式中實現將資料發到前端
while True:
socketio.sleep(1)
k = random.randint(0, 100) //這裡產生一個隨機數
socketio.emit('server_other', //這裡的server_other是前端定義的用來確定傳送給哪個
{'data': [k]}, //這裡面放大就是要傳送的資料
namespace='/test') //這是名稱空間，前端有這個後端就要實現
然後在html檔案中新增接收資料的函式
// 建立socket連線，等待伺服器“推送”資料，用回撥函式更新圖表
$(document).ready(function() {
namespace = '/test'; //這就是使用的名稱空間，在後端用@socketio.on('connect',namespace='/test')實現
var socket =io.connect(location.protocol + '//' + document.domain + ':' + location.port +namespace);
socket.on('server_other', function(res){ //後端使用socketio.emit('server_other',傳送的資料會由這個接收
update_mychart2(res); //然後接收到後臺資料res後，會呼叫update_mychart2(res)將資料更新到圖表
});
});
將接收到的資料更新到圖表
var update_mychart2 = function (res) {//res是json格式的response物件
valu = res.data[0] //取出後臺傳送的資料
option.series[0].data[0].value =res.data[0] //設定圖表資料
myChart2.setOption(option); //使設定生效實現修改圖表
};
這裡用的是一個儀表盤，只有一個數據，比較簡單
網頁動態顯示數字
由於echarts沒有類似秒錶的東西，沒有辦法單純的顯示數字，所以自己寫一個
首先在.html檔案中新增一個用來表示數字的標籤
<divstyle="height:30px;border:1px solid #ccc;padding:10px;width:30px">
<aid="ri">1234566789</a>
</div>
然後在html中設定當接收到後臺資料後修改該數字
首先在收到後臺資料後呼叫修改該數字的函式
$(document).ready(function(){
namespace = '/test';
var socket =io.connect(location.protocol + '//' + document.domain + ':' + location.port +namespace);
socket.on('server_other', function(res){
update_mychart2(res);
update_ri(res);
});
});
其中 update_ri(res);即為修改數字的函式
然後實現該函式
var update_ri = function (res) { //res是json格式的response物件
valo = res.data[0]
document.getElementById("ri").innerHTML=valo
};
這樣就可以看到網頁中數字動態改變的效果了