Flask結合ECharts實現線上視覺化效果,超級詳細!
大家好,我是阿辰,今天教大家如何利用Flask框架結合ECharts,將採集的資料實現線上視覺化效果(可以將視覺化效果放到網頁上,分享給其他小夥伴)
一、Flask框架基本使用
在開始視覺化之前,先讓大家對Flask有一個大概瞭解和基本使用
Flask和Django都是Python最常用的兩個網站框架,其中Flask更加輕巧,精簡,便捷。
本文也將使用Flask作為演示案例,下面教大家Flask的基本使用
1.Flask安裝
通過下面這個命令可以直接安裝python
pip install flask
pip install flask_cors
2.Flask程式碼套路
之所以叫程式碼套路,是因為用Flask的時候,這些是必須寫的,可以說是固定的
from flask_cors import *
from flask import Flask,render_template,request,Response,redirect,url_for
#內網ip
app = Flask(__name__)
if __name__ == "__main__":
"""初始化,debug=True"""
app.run(host='127.0.0.1', port=5000,debug=True)
這裡host是網站ip,埠設為5000,開啟debug模式(如果在真正上線的情況下可以去掉這個)
CORS(app,supports_credentials=True)
如果需要前後端分離或者在其他地方使用非同步請求的時,需要加上這一行,解決跨域問題。
3.URL路由
第一種:跳轉頁面帶引數
#跳轉頁面帶引數
@app.route('/pie-nest')
def index():
return render_template('pie-nest.html', roomid = roomid)
roomid是要傳過去的引數值
第二種:跳轉頁面不帶引數
#跳轉頁面不帶引數
@app.route('/pie-nest')
def index():
return render_template('pie-nest.html')
第三種:Api介面返回Json資料
#Api介面返回Json資料
@app.route('/pie_nest_data')
def pie_nest_data():
data_list = {}
data1 = ['公眾號:Python研究者','直達', '營銷廣告', '搜尋引擎', '郵件營銷', '聯盟廣告', '視訊廣告', '百度', '谷歌', '必應', '其他']
data_list['data1'] = data1
return Response(json.dumps(data_list), mimetype='application/json')
第四種:獲取(傳遞)引數
###獲取(傳遞)引數
@app.route('/alldata')
def alldata():
d = request.args.get('d')
return Response(json.dumps(d), mimetype='application/json')
其中d作為傳遞的引數
二、ECharts的使用
直接百度ECharts或者通過下面連結都有可以找到ECharts官網
https://echarts.apache.org/examples/zh/index.html#chart-type-globe
可以看到很多的視覺化圖表,下面教大家如何引入到Flask中,並且可以通過Flask去修改資料,在網頁端更新視覺化中資料。
下面以這個圖例為例
https://echarts.apache.org/examples/zh/editor.html?c=pie-nest
點選右上角的:下載例項
下載之後就是一個html檔案
在和py檔案同級目錄下新建templates資料夾,將下載好的html資料夾放進去
在py檔案中編寫url路由
#進入頁面
@app.route('/pie-nest')
def index():
return render_template('pie-nest.html')
訪問一下連結就可以出來視覺化效果
http://127.0.0.1:5000/pie-nest
三、Flask結合ECharts
上面已經將html和放到Flask中,但是資料是固定的
為了讓資料是動態的,下面通過Flask去修改資料,然後更新到html網頁視覺化中
#pie-nest-data
@app.route('/pie_nest_data')
def pie_nest_data():
data_list = {}
data1 = ['公眾號:Python研究者','直達', '營銷廣告', '搜尋引擎', '郵件營銷', '聯盟廣告', '視訊廣告', '百度', '谷歌', '必應', '其他']
data_list['data1'] = data1
data2 = [
{'value': 2000, 'name': 'Python研究者', 'selected': True},
{'value': 1548, 'name': '搜尋引擎'},
{'value': 775, 'name': '直達'},
{'value': 679, 'name': '營銷廣告'}
]
data_list['data2'] = data2
data3 =[
{'value': 1048, 'name': '百度'},
{'value': 335, 'name': '直達'},
{'value': 310, 'name': '郵件營銷'},
{'value': 251, 'name': '谷歌'},
{'value': 234, 'name': '聯盟廣告'},
{'value': 147, 'name': '必應'},
{'value': 135, 'name': '視訊廣告'},
{'value': 102, 'name': '其他'}
]
data_list['data3'] = data3
return Response(json.dumps(data_list), mimetype='application/json')
訪問下面這個連結就可以獲取到json資料
http://127.0.0.1:5000/pie_nest_data
修改html
首先引入jquery檔案,後面非同步ajax請求需要用到
在py統計目錄下新建static/js
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js"></script>
新增非同步請求程式碼
$.ajax({
type:'GET',
url:"http://127.0.0.1:5000/pie_nest_data",
dataType:'json',
success:function(data){
console.log(data);
//html原本的js程式碼
}
});
修改html原本中的js程式碼(三處)
這樣我們就修改好了。
然後在訪問一下
http://127.0.0.1:5000/pie-nest
ok,這樣html視覺化就是動態的,也成功將Flask和ECharts結合在一起
四、總結
如何利用Flask框架結合ECharts,將採集的資料實現線上視覺化效果