引言
對(duì)于Python下桌面軟件的開發(fā)已經(jīng)有了很多數(shù)據(jù)可視化的庫，如Matplotlib、Seaborn、Pyqtgraph、Plotly等等，但這些庫更適合于后端程序員的軟件開發(fā)。
實(shí)際上在前端網(wǎng)頁開發(fā)方面，也有很多很多漂亮的界面設(shè)計(jì)方案，也包括很多很多數(shù)據(jù)可視化方面的強(qiáng)大控件。基于此，我們是否可以考慮這樣一種桌面軟件的開發(fā)架構(gòu)方案，即將前端技術(shù)融入到Python開發(fā)中，結(jié)合PyQt界面庫，將前端網(wǎng)頁界面無縫集成到PyQt的窗口中，大部分的功能依托于前端技術(shù)來實(shí)現(xiàn)，而PyQt僅作少部分輔助的諸如窗口生成、事件處理等工作，基于這樣的架構(gòu)進(jìn)行桌面軟件的開發(fā)，既能充分利用Python的快速開發(fā)優(yōu)點(diǎn)，又能使用成熟的前端技術(shù)，應(yīng)該是一個(gè)比較好的軟件開發(fā)方案。
下面通過一個(gè)簡單的例子來介紹這種方案的可行性，該例使用Python3語言，利用PyQ5界面庫搭建界面窗口框架，然后在窗口中嵌入ECharts庫進(jìn)行數(shù)據(jù)的可視化。
這兒稍微簡單介紹下ECharts庫，它是一個(gè)使用 JAVAScript 實(shí)現(xiàn)的開源可視化庫，可流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。它具有豐富的可視化類型， 提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日?qǐng)D，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭等等。總之，ECharts庫是一具非常強(qiáng)大的數(shù)據(jù)可視化庫。
實(shí)例運(yùn)行界面
該例運(yùn)行界面情況如下圖所示：
使用PyQt5設(shè)計(jì)軟件界面框架，主界面分為上下兩部分，上面是一個(gè)Widget窗口控件，在里面嵌入網(wǎng)頁通過一個(gè)柱狀圖顯示某兩個(gè)公司產(chǎn)品的全年季度銷量趨勢(shì)對(duì)比情況，下面加了兩個(gè)按鈕控件，分別控制啟停數(shù)據(jù)的實(shí)時(shí)更新（使用仿真數(shù)據(jù)，僅為演示實(shí)時(shí)繪圖刷新功能）及清除工作。
該例子的文件組成結(jié)構(gòu)如下圖所示：
整個(gè)工程放在webDemo文件夾中，其中，Main.py、Main.ico、Main.ui分別為主程序、應(yīng)用程序圖標(biāo)及設(shè)計(jì)師設(shè)計(jì)的界面文件，Ui_Main.py為將Main.ui轉(zhuǎn)換為Python后的文件，html文件夾存放了網(wǎng)頁相關(guān)的文件。
大體設(shè)計(jì)思路如下：
- 前端文件準(zhǔn)備：下載ECharts的庫文件，這兒使用的是echarts.min.js，編寫柱狀圖網(wǎng)頁文件bar.html；
- 主界面設(shè)計(jì)：用設(shè)計(jì)師設(shè)計(jì)程序主界面文件Main.ui，并將其轉(zhuǎn)換為對(duì)應(yīng)的.py文件，即Ui_Main.py；
- 主程序功能實(shí)現(xiàn)：編寫主Python程序Main.py，搭建界面，嵌入網(wǎng)頁并實(shí)現(xiàn)槽函數(shù)功能。
前端文件準(zhǔn)備
在官網(wǎng)下載庫文件echarts.min.js后，剩下的工作是寫bar.html文件，其主要內(nèi)容包括：引入ECharts界面庫、定義顯示區(qū)域大小、定義柱狀圖樣式等等，其代碼內(nèi)容如下，比較好理解，添加了注釋：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 echarts.min.js -->
<script src="echarts.min.js"></script>
<style type="text/css">
#main {height:100%; width:100%; position:absolute;}
body {margin:0px; padding:0px; overflow:hidden;}
</style>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="main"></div>
<script type="text/JavaScript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '全年季度銷量趨勢(shì)對(duì)比圖',
left: 'center'
},
tooltip: {
show: true
},
legend: {
data: ['公司A', '公司B'],
top: '8%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['第1季度', '第2季度', '第3季度', '第4季度'],
name: '季度 / x',
nameLocation: 'center',
nameGap: 30
},
yAxis: {
min: 0,
max: 100,
type: 'value',
name: '銷量 / y',
nameLocation: 'center',
nameGap: 40
},
series: [
{
name: '公司A',
type: 'bar',
data: [0, 0, 0, 0]
},
{
name: '公司B',
type: 'bar',
data: [0, 0, 0, 0]
}
]
};
myChart.setOption(option);
function setValue(val1, val2){
option.series[0].data = val1
option.series[1].data = val2
myChart.setOption(option)
}
window.onresize = myChart.resize ;
</script>
</body>
</html>
注意，在上面代碼中，定義了一個(gè)setValue函數(shù)，其目的是更新兩條曲線的數(shù)據(jù)內(nèi)容，其數(shù)據(jù)可由Python語言來調(diào)用時(shí)傳入。
主界面設(shè)計(jì)
使用設(shè)計(jì)師設(shè)計(jì)的主界面Main.ui如下圖所示，包含一個(gè)QWidget控件及兩個(gè)按鈕控件：
該界面中涉及到的所有界面對(duì)象元素如下圖所示：
主界面設(shè)計(jì)完成后，即可用PyUIC工具將其轉(zhuǎn)換為Py文件Ui_Main.py。
主程序功能實(shí)現(xiàn)
在主程序Main.py文件中，依托于設(shè)計(jì)師生成的界面文件，創(chuàng)建一個(gè)QWidget類用作主窗口的顯示，其代碼如下：
主要功能是定義主界面、加載網(wǎng)頁文件及實(shí)現(xiàn)兩個(gè)槽函數(shù)功能。通過“開始更新數(shù)據(jù)”按鈕來啟動(dòng)或停止定時(shí)器函數(shù)，實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)刷新，通過“清空數(shù)據(jù)”按鈕來清除柱狀圖數(shù)據(jù)。
主要代碼解釋如下：
第24-37行，使用QWebEngineView類定義一個(gè)webView視圖，使用load函數(shù)加載網(wǎng)頁文件bar.html，然后將其加入到上面的窗口布局中，注意，這兒僅程序初始化時(shí)加載了一次。
第39-42行，在定時(shí)器函數(shù)中刷新柱狀圖數(shù)據(jù)，主要是利用了webView頁上的runJavaScript函數(shù)來運(yùn)行html文件中的setValue函數(shù)，并將產(chǎn)生的兩條隨機(jī)數(shù)據(jù)傳遞到該函數(shù)中。
第44-52行，控制柱狀圖數(shù)據(jù)刷新的啟動(dòng)/停止動(dòng)作。
第54-56行，通過傳入全0數(shù)組，清空柱狀圖數(shù)據(jù)。
最終，整個(gè)主程序代碼如下圖所示：
總結(jié)
至此，整個(gè)工程文件就全部完成了，運(yùn)行程序后，就會(huì)出現(xiàn)開始的界面。通過這個(gè)例子可以看出，在Python語言中，結(jié)合PyQt庫完全可以通過前端技術(shù)實(shí)現(xiàn)數(shù)據(jù)的可視化甚至界面的搭建，這對(duì)前端程序員開發(fā)桌面軟件來說，無疑是一種比較好的方案。
本文由編碼那些事原創(chuàng)，請(qǐng)關(guān)注+轉(zhuǎn)發(fā)+收藏+點(diǎn)贊，帶你一起長知識(shí)！
