今天教大家如何利用Flask框架結合ECharts，將採集的資料實現

線上視覺化

效果（可以將視覺化效果放到網頁上，分享給其他小夥伴）

一、Flask框架基本使用

在開始視覺化之前，先讓大家對Flask有一個大概瞭解和基本使用

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

本文也將使用Flask作為演示案例，下面教大家Flask的基本使用

1.Flask安裝

透過下面這個命令可以直接安裝python

pip install flask

pip install flask_cors

2.Flask程式碼套路

之所以叫程式碼套路，是因為用Flask的時候，這些是必須寫的，可以說是固定的

這裡host是網站ip，埠設為5000，開啟debug模式（如果在真正上線的情況下可以去掉這個）

如果需要前後端分離或者在其他地方使用非同步請求的時，需要加上這一行，解決

跨域

問題。

3.URL路由

第一種：跳轉頁面帶引數

roomid

是要傳過去的引數值

第二種：跳轉頁面不帶引數

第三種：Api介面返回Json資料

第四種：獲取（傳遞）引數

其中d作為傳遞的引數

二、ECharts的使用

直接百度ECharts或者透過下面連結都有可以找到ECharts官網

可以看到很多的視覺化圖表，下面教大家如何引入到Flask中，並且可以透過Flask去修改資料，在網頁端更新視覺化中資料。

下面以這個圖例為例

點選右上角的：

下載例項

下載之後就是一個html檔案

在和py檔案同級目錄下新建templates資料夾，將下載好的html資料夾放進去

在py檔案中編寫url路由

訪問一下連結就可以出來視覺化效果

三、Flask結合ECharts

上面已經將html和放到Flask中，但是資料是固定的

為了讓資料是動態的，下面透過Flask去修改資料，然後更新到html網頁視覺化中

訪問下面這個連結就可以獲取到json資料

修改html

首先引入jquery檔案，後面非同步ajax請求需要用到

在py統計目錄下新建static/js

新增非同步請求程式碼

修改html原本中的js程式碼（三處）

這樣我們就修改好了。

然後在訪問一下

ok，這樣html視覺化就是動態的，也成功將Flask和ECharts結合在一起~

覺得還不錯的話記得點贊哦，關注我發現更多新技術~