Flask結合ECharts實如今線可視化效果，超級詳細！

你們好，我是阿辰，今天教你們如何利用Flask框架結合ECharts，將採集的數據實現在線可視化效果（能夠將可視化效果放到網頁上，分享給其餘小夥伴）javascript

1、Flask框架基本使用

在開始可視化以前，先讓你們對Flask有一個大概瞭解和基本使用html

Flask和Django都是Python最經常使用的兩個網站框架，其中Flask更加輕巧，精簡，便捷。java

本文也將使用Flask做爲演示案例，下面教你們Flask的基本使用python

1.Flask安裝jquery

經過下面這個命令能夠直接安裝pythonajax

pip install flask
pip install flask_cors

2.Flask代碼套路apache

之因此叫代碼套路，是由於用Flask的時候，這些是必須寫的，能夠說是固定的json

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模式（若是在真正上線的狀況下能夠去掉這個）flask

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做爲傳遞的參數

2、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

3、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結合在一塊兒

4、總結

如何利用Flask框架結合ECharts，將採集的數據實如今線可視化效果