Flask結(jié)合ECharts實現(xiàn)在線可視化效果，超級詳細(xì)！
一、Flask框架基本使用
通過下面這個命令可以直接安裝python
pip install flask
pip install flask_cors
之所以叫代碼套路，是因為用Flask的時候，這些是必須寫的，可以說是固定的
from flask_cors import *
from flask import Flask,render_template,request,Response,redirect,url_for
#內(nèi)網(wǎng)ip
app = Flask(__name__)
if __name__ == "__main__":
"""初始化,debug=True"""
app.run(host='127.0.0.1', port=5000,debug=True)
這里host是網(wǎng)站ip，端口設(shè)為5000，開啟debug模式（如果在真正上線的情況下可以去掉這個）
CORS(app, supports_credentials=True)
如果需要前后端分離或者在其他地方使用異步請求的時，需要加上這一行，解決跨域問題。
第一種：跳轉(zhuǎn)頁面帶參數(shù)
#跳轉(zhuǎn)頁面帶參數(shù)
@app.route('/pie-nest')
def index():
return render_template('pie-nest.html', roomid = roomid)
roomid是要傳過去的參數(shù)值
第二種：跳轉(zhuǎn)頁面不帶參數(shù)
#跳轉(zhuǎn)頁面不帶參數(shù)
@app.route('/pie-nest')
def index():
return render_template('pie-nest.html')
第三種：Api接口返回Json數(shù)據(jù)
#Api接口返回Json數(shù)據(jù)
@app.route('/pie_nest_data')
def pie_nest_data():
data_list = {}
data1 = ['公眾號：Python研究者','直達(dá)', '營銷廣告', '搜索引擎', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '百度', '谷歌', '必應(yīng)', '其他']
data_list['data1'] = data1
return Response(json.dumps(data_list), mimetype='application/json')
第四種：獲?。▊鬟f）參數(shù)
###獲取（傳遞）參數(shù)
@app.route('/alldata')
def alldata():
d = request.args.get('d')
return Response(json.dumps(d), mimetype='application/json')
其中d作為傳遞的參數(shù)
二、ECharts的使用
https://echarts.apache.org/examples/zh/index.html#chart-type-globe
https://echarts.apache.org/examples/zh/editor.html?c=pie-nest
#進(jìn)入頁面
@app.route('/pie-nest')
def index():
return render_template('pie-nest.html')
http://127.0.0.1:5000/pie-nest
三、Flask結(jié)合ECharts
為了讓數(shù)據(jù)是動態(tài)的，下面通過Flask去修改數(shù)據(jù)，然后更新到html網(wǎng)頁可視化中
#pie-nest-data
@app.route('/pie_nest_data')
def pie_nest_data():
data_list = {}
data1 = ['公眾號：Python研究者','直達(dá)', '營銷廣告', '搜索引擎', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '百度', '谷歌', '必應(yīng)', '其他']
data_list['data1'] = data1
data2 = [
{'value': 2000, 'name': 'Python研究者', 'selected': True},
{'value': 1548, 'name': '搜索引擎'},
{'value': 775, 'name': '直達(dá)'},
{'value': 679, 'name': '營銷廣告'}
]
data_list['data2'] = data2
data3 =[
{'value': 1048, 'name': '百度'},
{'value': 335, 'name': '直達(dá)'},
{'value': 310, 'name': '郵件營銷'},
{'value': 251, 'name': '谷歌'},
{'value': 234, 'name': '聯(lián)盟廣告'},
{'value': 147, 'name': '必應(yīng)'},
{'value': 135, 'name': '視頻廣告'},
{'value': 102, 'name': '其他'}
]
data_list['data3'] = data3
return Response(json.dumps(data_list), mimetype='application/json')
訪問下面這個鏈接就可以獲取到j(luò)son數(shù)據(jù)
http://127.0.0.1:5000/pie_nest_data
首先引入jquery文件，后面異步ajax請求需要用到
在py統(tǒng)計目錄下新建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可視化就是動態(tài)的，也成功將Flask和ECharts結(jié)合在一起
四、總結(jié)
如何利用Flask框架結(jié)合ECharts，將采集的數(shù)據(jù)實現(xiàn)在線可視化效果
最后推薦一下我們的星球：由菜鳥學(xué)Python原班人馬建了一個投資星球，匯聚一批喜歡投資的朋友一起分享投資的技巧，不限于基金，股票等其他品種，提高自己的財商，一起讀書打卡，歡迎加入。
推薦閱讀:
入門: 最全的零基礎(chǔ)學(xué)Python的問題 | 零基礎(chǔ)學(xué)了8個月的Python | 實戰(zhàn)項目 |學(xué)Python就是這條捷徑
干貨:爬取豆瓣短評，電影《后來的我們》 | 38年NBA最佳球員分析 | 從萬眾期待到口碑撲街！唐探3令人失望 | 笑看新倚天屠龍記 | 燈謎答題王 ｜用Python做個海量小姐姐素描圖 ｜碟中諜這么火，我用機(jī)器學(xué)習(xí)做個迷你推薦系統(tǒng)電影
趣味:彈球游戲 | 九宮格 | 漂亮的花 | 兩百行Python《天天酷跑》游戲!
AI: 會做詩的機(jī)器人 | 給圖片上色 | 預(yù)測收入 | 碟中諜這么火，我用機(jī)器學(xué)習(xí)做個迷你推薦系統(tǒng)電影
小工具: Pdf轉(zhuǎn)Word，輕松搞定表格和水?。?/a> | 一鍵把html網(wǎng)頁保存為pdf！| 再見PDF提取收費！ | 用90行代碼打造最強(qiáng)PDF轉(zhuǎn)換器，word、PPT、excel、markdown、html一鍵轉(zhuǎn)換 | 制作一款釘釘?shù)蛢r機(jī)票提示器！ ｜60行代碼做了一個語音壁紙切換器天天看小姐姐！｜
年度爆款文案
點閱讀原文,領(lǐng)廖雪峰視頻資料！
