Python是資料分析的利器，近年來在各領域應用的十分廣泛。有時候我們會需要把資料分析的結界進行一些可視化的展示,很多時候一般的資料可視化可以使用Matplotlib等，但是如果是面向一些非專業人士，直接通過Web的方式進行展示會更加的友善和優美。
先看一下基本效果，雖然比較簡陋，差不多該有的都有了，需要更漂亮的頁面，可以在自己美化一下。
基本效果展示
關于工具和架構的選擇
- 為什麼選擇Sanic？
Python可用的Web架構選擇性很多，比如大而全的Django，小而美的Flask等；此處選擇了Sanic架構，主要是因為其輕量化和快速的特點；另外還有一個更重要的特點，就是Sanic自身就是一個可應用于生産環境的Web服務應用，不需要其他Nginx、或者Apache等其他工具去部署。（對于不熟悉Web環境的人來說，這些應用部署花費的精力還是挺高的）
- 為什麼選擇Echarts？
這主要是因為之前使用的多了，比較熟悉，而且有非常完善的中文文檔，使用也比較友善。
- 為什麼沒有使用Pyecharts？
Pyecharts功能挺強大，使用也挺友善，如果簡易環境下可以選擇使用。當然，不喜歡使用JS、CSS和HTML的也建議選擇使用。個人沒選擇主要還是考慮後續的部署展示，是以還是一步到位，直接應用 Sanic + Echarts 。另外，Echarts的使用和配置确實比較簡單。
開始之前，建議先打開Sanic文檔和Echarts文檔，随時檢視需要的資訊。
準備開始第一步
1、可以先建立一個虛拟環境；（當然這并不是必須的）
2、安裝Sanic；
# 直接安裝
pip install sanic
# 安裝sanic_jinja2，用于html模闆的應用
pip install sanic_jinja2 3、建立一個py檔案，一個html檔案，一個js檔案；
- py檔案最精簡内容：
import os, time, datetime
from sanic import Sanic
app = Sanic("MyEcharts")
@app.get("/sync")
def sync_handler(request):
time.sleep(3)
return text("sync Done. 完成")
@app.get("/async")
async def async_handler(request):
await asyncio.sleep(0.1)
return text("async+async+async+Done. 完成！")
if __name__ == '__main__':
app.run(host="0.0.0.0", port=8080) 直接運作這個檔案就已經可以建立一個web服務了！當然這距離我們的項目還有點距離。
此時，在浏覽器輸入http://127.0.0.1:8080/sync，就能看見我們的運作結果了；
最精簡代碼運作的結果
- html檔案精簡内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>XXXX資料概覽</title>
</head>
<body>
<div class="container-fluid">
<!-- Content here -->
<div class="row text-center" id="title">
<h1>XXXX系統資料展示</h1>
</div>
<div class="row">
<div class="col">
<i>資料A展示一 ¦ 資料二
<p style="font-size: 52px;color: rgba(0, 59, 144, 1.0);">
1258 <small style="color: #000;">¦</small> 376
</p>
</i>
</div>
<div class="col">
<i>資料B展示一 ¦ 資料二
<p style="font-size: 52px;color: rgba(0, 59, 144, 1.0);">
5896 <small style="color: #000;">¦</small> 998
</p>
</i>
</div>
<div class="col">
<i>資料C展示一 ¦ 資料二
<p style="font-size: 52px;color: rgba(0, 59, 144, 1.0);">
4896 <small style="color: #000;">¦</small> 1199
</p>
</i>
</div>
<div class="col col-md-auto">
<i>總數 ¦ 待通知數 ¦ 待接收數 ¦ 已接收數
<p style="font-size: 52px;color: rgba(0, 59, 144, 1.0);">
9258 <small style="color: #000;">¦</small>
1385 <small style="color: #000;">¦</small>
2459 <small style="color: #000;">¦</small>
2546
</p>
</i>
</div>
</div>
<div class="row">
<div class="col" style="color: #FF0000; border: 1px solid #000;">
<h2>表一資料資訊</h2>
<p>1 of 2</p>
</div>
<div class="col" style="color: #00FF00;">
<h2>XXXX狀态資料資訊</h2>
2 of 2
</div>
<div class="col">
<h2>XXXX資料資訊</h2>
1 of 3
</div>
</div>
<div class="row">
<div class="col col-9">
<h2>XXXX資料資訊</h2>
</div>
<div class="col col-3">
<h2>XXXX資料資訊</h2>
</div>
</div>
</body>
</html> 這個基本就是一個簡單的web頁面了，雖然很簡陋，裝修的事情後面在處理。
基本看起來是這種樣子
基本頁面架構
至于具體的頁面排版，可以按自己的需求去修改。
- js檔案基本内容：（内容源自官方示例）
var chartDom01 = document.getElementById('chart01');
var myChart01 = echarts.init(chartDom01);
var option01;
option01 = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
]
}
]
};
option01 && myChart01.setOption(option01);
var chartDom02 = document.getElementById('chart02');
var myChart02 = echarts.init(chartDom02);
var option02;
option02 = {
title: {
text: 'Waterfall Chart',
subtext: 'Living Expenses in Shenzhen'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Placeholder',
type: 'bar',
stack: 'Total',
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: [0, 1700, 1400, 1200, 300, 0]
},
{
name: 'Life Cost',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'inside'
},
data: [2900, 1200, 300, 200, 900, 300]
}
]
};
option02 && myChart02.setOption(option02);
/ / 其他内容都是類似的………… js、css和html結合後的效果：
基本效果
此處先到這裡，後續内容會抽時間在陸續補上，目前能想到的需要補充内容包括（不限于）：
- Sanic模闆的應用；
- Sanic部分設定内容；
- Python處理的資料傳遞到Echarts的方法；
- Echarts圖表部分設定内容；
第一次在頭條寫文章，有不足之處還請見諒；學習道路上的國小生，如有錯誤或疏漏之處，還請大家批評指正。