關(guān)鍵技術(shù)
- FE
- Ajax
- Flask
- Echarts
- xlrd
FE 部分
此部分為基礎(chǔ)前端知識內(nèi)容肺然，根據(jù)業(yè)務(wù)所需，自行進(jìn)行頁面布局蹂随。
Ajax 部分
此部分是能來進(jìn)行數(shù)據(jù)請求與異步加載
Flask部分
此部分主要是為其搭建web服務(wù)，F(xiàn)lask相對django更輕量悠抹，也可替換為Django框架
Echarts部分
此部分主要是對接收到的數(shù)據(jù)來進(jìn)行可視化展示
xlrd部分
此部分是使用Python語言處理excel的主要模塊，用來讀取業(yè)務(wù)數(shù)據(jù)
邏輯圖
開發(fā)邏輯圖
效果圖
最終效果圖
代碼詳解
首先參考Echarts官方文檔，查看相關(guān)API調(diào)用方法
<div id="main" style="width:1600px;height:1600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '數(shù)據(jù)統(tǒng)計(jì)可視化'
},
tooltip: {},
grid:{
height:'50%',
width:'80%'
},
legend: {
data:['收入']
},
xAxis: {/*x軸*/
axisLabel:{
rotate:45
},
data: []
},
yAxis: {},/*y軸*/
series: [{
name: '收入',
type: 'bar',
barwidth:10,
data: []
}]
};
myChart.setOption(option);
}
}
}
</script>
其中Echarts需要首先進(jìn)行引進(jìn) 可以使用本地引進(jìn)，也可使用CDN
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/echarts-all.js"></script>
其次氯窍，使用xlrd模塊對Excel文件進(jìn)行數(shù)據(jù)讀取饲常，并轉(zhuǎn)存為Json格式,記為data_show.py
import xlrd
import json
def ReadFile(user,userinfo):
excel = xlrd.open_workbook("test.xlsx") # Open the file of excel
target_sheet = excel.sheet_by_index(0) # Get Sheets name By index /By Name of user's input string
for i in range(2,target_sheet.nrows):
if target_sheet.cell(i,11).value.split(' ')[0] not in user:
user.append(target_sheet.cell(i,11).value.split(' ')[0])
for k in user:
userinfo[k] = 0
for i in range(2,target_sheet.nrows):
checkUsername(target_sheet.cell(i,11).value.split(' ')[0],target_sheet.cell(i,9).value,userinfo )
def checkUsername(name,num,userinfo):
for k in userinfo:
if name in k:
userinfo[k] += int(num)
def Result(a=0):
userlist = [] #存儲歸屬人(X坐標(biāo)數(shù)據(jù))
userinfo = {} #存儲數(shù)據(jù)(Y坐標(biāo)數(shù)據(jù))
ReadFile(userlist,userinfo)
jsondata = json.dumps(userinfo,ensure_ascii=False)
return jsondata
其中Result為主要入口函數(shù)
接著，搭建Flask框架狼讨，存儲至hello.py
from flask import Flask,render_template,request,Response
import data_show #引入數(shù)據(jù)處理py文件
import json
app = Flask(__name__)
@app.route('/')
def index():
return '''<!DOCTYPE html>.....''' #此處為FE代碼
@app.route('/show',methods=['POST','GET'])
def show_info():
if request.method == 'GET':
num = request.args.get('a')
Rejson = data_show.Result(num)
return Response(Rejson,content_type="application/json")
if __name__ == '__main__':
app.run(port=8888,debug=True)
通過Flask框架對數(shù)據(jù)進(jìn)行讀取，通過請求http://127.0.0.1:8888/show?a=來進(jìn)行響應(yīng),此處的a為以后業(yè)務(wù)擴(kuò)展使用柒竞，例如可以傳入關(guān)鍵參數(shù)政供，季度，月份等查詢
為了能夠動態(tài)加載相關(guān)內(nèi)容并且不影響整個頁面的使用朽基，友好性來進(jìn)行處理布隔，可以使用Ajax技術(shù)來進(jìn)行動態(tài)異步請求
let xhr;
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest()
}
else
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","http://127.0.0.1:8888/show?a=1",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//EchartsAPI相關(guān)代碼
let info = JSON.parse(xhr.responseText) //處理通過Flask響應(yīng)的函數(shù)Json數(shù)據(jù)
let user = []
let user_info = []
for (var name in info){
user.push(name);
user_info.push(info[name]);
}
option.xAxis.data = user;
option.series[0].data = user_info;
}
}
后記
代碼核心主要分為Echarts的API調(diào)用，Ajax的Json數(shù)據(jù)請求與處理稼虎，F(xiàn)lask框架衅檀，xlrd模塊的Excel數(shù)據(jù)讀取與處理。
代碼可以優(yōu)化有以下內(nèi)容：
- 在Flask框架的使用可以使用temple霎俩，static等來使用模板文件和靜態(tài)文件來進(jìn)行處理哀军。
- 在調(diào)用Echart數(shù)據(jù)時可以在未完成數(shù)據(jù)繪制前，加入loading方法打却，來提升友好性杉适。
- 后期可結(jié)合數(shù)據(jù)庫進(jìn)行操作，并且對功能可以進(jìn)行篩選擴(kuò)展
參考資料
- CSDN：python通過flask和前端進(jìn)行數(shù)據(jù)收發(fā)
- CSDN：echarts讀取本地json文件
- CSDN：使用echart從后臺獲取數(shù)據(jù)動態(tài)顯示到頁面
- CSDN：python封裝JSON前后端解析
- Penguin私人博客：Flask設(shè)置返回json格式數(shù)據(jù)
官方文件/文檔/資料
- Echarts官方資料： https://echarts.apache.org/zh/tutorial.html
- Echarts CDN：https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/echarts-all.js
- Ajax教程：https://www.w3cschool.cn/ajax/
- Flask教程：https://www.w3cschool.cn/flask/
