淺述利用Python+Flask+ECharts設(shè)計實現(xiàn)醫(yī)療數(shù)據(jù)可視化大屏展示

安徽省宿州市立醫(yī)院信息科 黃浩

信息的品質(zhì)大水平上取決于其表達(dá)形式，大數(shù)據(jù)時代下各行業(yè)對數(shù)據(jù)價值的重視程度與日俱增，要想把數(shù)據(jù)價值發(fā)揮出來，數(shù)據(jù)可視化是最直觀的體現(xiàn)也是有關(guān)數(shù)據(jù)視覺效果的進(jìn)階表達(dá)形式。Python 是一種特別受歡迎、代碼簡潔的計算機(jī)編程語言，它免費開源、可移植擴(kuò)展嵌入、具有豐富和強(qiáng)大的庫和工具包，實現(xiàn)同一種功能代碼大幅減少。Flask是一個用Python編寫的應(yīng)用程序框架。ECharts是一個圖表庫可結(jié)合Ajax請求渲染展示頁面，提供直觀、生動、可交互、可高度個性化定制的數(shù)據(jù)可視化圖表。數(shù)據(jù)可視化大屏展示是以大屏為主要展示載體進(jìn)行直觀的、炫酷的、具有科技感的展示，可以給管理者和觀看者帶來閱讀便利。大屏可視化是一項結(jié)合了視覺傳達(dá)學(xué)、用戶心理學(xué)和計算機(jī)科學(xué)的學(xué)科,不同項目面向各個行業(yè),展示需求錯綜復(fù)雜,不同單位對于大屏展示的需求又千差萬別，其逐漸運用到醫(yī)療機(jī)構(gòu)信息系統(tǒng)中是大勢所趨。本文以醫(yī)療數(shù)據(jù)大屏展示為思路，希望能起到拋轉(zhuǎn)引玉的作用。

醫(yī)療機(jī)構(gòu)的信息化建設(shè)已發(fā)展多年，醫(yī)療數(shù)據(jù)對民眾的生活、社會的生產(chǎn)與發(fā)展，以及國家的建設(shè)有著重要的影響，在世界各地都備受關(guān)注。在科學(xué)與醫(yī)療技術(shù)不斷發(fā)展的今天，醫(yī)療數(shù)據(jù)的運用場景與規(guī)模也在不斷地擴(kuò)大，積累了大量的數(shù)據(jù)。針對某一個信息系統(tǒng)，利用Python+Flask+ECharts實現(xiàn)醫(yī)療數(shù)據(jù)可視化大屏展示可以協(xié)助管理人員從信息中獲取專業(yè)知識、對于科室管理者更加直觀的閱讀和獲取工作信息，更好的助力醫(yī)療機(jī)構(gòu)的發(fā)展[1]。實施過程中通過前端工程師，后臺數(shù)據(jù)師，界面設(shè)計師緊密配合，完成設(shè)計醫(yī)療數(shù)據(jù)大屏展示落地。設(shè)計醫(yī)療數(shù)據(jù)大屏展示的思路從梳理醫(yī)療業(yè)務(wù)指標(biāo)、確定需求等四個方面進(jìn)行論述。

1 梳理醫(yī)療業(yè)務(wù)指標(biāo)，確定需求

數(shù)據(jù)可視化本質(zhì)是：將數(shù)據(jù)映射到圖形，同時將一些附加信息傳達(dá)給用戶?？梢暬成涫侵笇⒍x好的指標(biāo)信息映射成可視化元素的過程。實現(xiàn)可視化映射的數(shù)據(jù)邏輯結(jié)構(gòu)一般都是用樹的數(shù)據(jù)結(jié)構(gòu)索引，一對多的關(guān)系。原始數(shù)據(jù)—統(tǒng)計分析—預(yù)處理數(shù)據(jù)—過濾—關(guān)注數(shù)據(jù)—映射—幾何數(shù)據(jù)—繪制—圖形數(shù)據(jù)?？偨Y(jié)來說，數(shù)據(jù)可視化大屏設(shè)計原則是“梳理業(yè)務(wù)指標(biāo)設(shè)計服務(wù)需求、先總覽再細(xì)節(jié)”數(shù)據(jù)大屏可視化的具體展示形式多種多樣，分為帶觸摸、交互式操作、單向信息展示等。

可視化大屏的制作需要從業(yè)務(wù)價值出發(fā)，搞清楚要解決的問題或者要達(dá)成的目標(biāo)，明確需要規(guī)避的信息，確定可視化大屏的主題，然后根據(jù)主題提煉出關(guān)鍵業(yè)務(wù)指標(biāo)[2]，之后進(jìn)行需求分析，需求分析作為數(shù)據(jù)分析的一部分，不同的業(yè)務(wù)、不同的主題會有不同的數(shù)據(jù)展示需求，需要了解實際的醫(yī)療業(yè)務(wù)流程并結(jié)合現(xiàn)有的數(shù)據(jù)現(xiàn)狀。需求分析可以細(xì)拆分維度，確認(rèn)優(yōu)先維度，維度再合并這樣一個分總過程，可以完成對需求化整為零、確定優(yōu)先級、再化繁為簡的深挖清洗過程。同一個指標(biāo)的數(shù)據(jù)，從不同維度分析就有不同結(jié)果。我們可以從“聯(lián)系、分布、比較、構(gòu)成”四個維度思考。聯(lián)系是數(shù)據(jù)之間的相關(guān)性；分布是指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律；比較是數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面；構(gòu)成是指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。在最終確認(rèn)具體需求的過程中，我們對用什么表現(xiàn)方式展示數(shù)據(jù)也有了一定的思路，比如使用Top10的方式去展示還是用KPI去直接展示數(shù)據(jù)等。

2 UI頁面、部署方式和整體架構(gòu)設(shè)計

ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫，提供直觀、生動、可交互、可個性化定制的數(shù)據(jù)可視化圖表。ECharts提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于BI的漏斗圖、儀表盤，并且支持圖與圖之間的混搭[3]。

數(shù)據(jù)可視化大屏首頁一般需要包含：全局?jǐn)?shù)據(jù)、綜合調(diào)度、數(shù)據(jù)查詢通道、數(shù)據(jù)應(yīng)用處理、數(shù)據(jù)存儲管理、管理運行維護(hù)、搜索功能、重點關(guān)注數(shù)據(jù)信息按指標(biāo)分多維度展示以及云導(dǎo)航。在進(jìn)行大屏布局設(shè)計時，需在大屏整體分辨率上切分出不同的區(qū)域，根據(jù)業(yè)務(wù)指標(biāo)的重要程度，將不同的指標(biāo)以可視化形式呈現(xiàn)在不同區(qū)域，做到主次分明，突出重點。布局設(shè)計主要根據(jù)梳理好的業(yè)務(wù)指標(biāo)進(jìn)行，核心業(yè)務(wù)指標(biāo)安排在中間位置較大區(qū)域，其余的指標(biāo)按優(yōu)先級依次在核心指標(biāo)周圍展開。一般把有關(guān)聯(lián)關(guān)系的指標(biāo)放在同一區(qū)域展現(xiàn)，這樣更有助于觀看者的理解。在UI設(shè)計中，要以大屏的比例去定義設(shè)計稿，保證大屏完美呈現(xiàn)、使用最接近大屏分辨率的電腦屏幕比例投放。設(shè)計中需要注意細(xì)節(jié)，比如橫向排版的信息，人們一般會首先注意左上角。因此標(biāo)題最好出現(xiàn)在這個位置。一般大屏設(shè)計與開發(fā)盡量選擇自帶字體微軟雅黑，數(shù)字字體選用din，特殊字體可將字體包給到開發(fā)嵌入程序中。大屏分辨率設(shè)計一般為1920px×1080px，F(xiàn)11全屏后占滿整屏且無滾動條；其他分辨率屏幕均可自適應(yīng)顯示。UI設(shè)計中要結(jié)合功能模塊統(tǒng)一設(shè)計，如總門診數(shù)、當(dāng)月門診數(shù)、總住院數(shù)、當(dāng)月住院數(shù)等。UI設(shè)計中還需要考慮動態(tài)效果，在整個動效設(shè)計的過程中，除過場動畫、數(shù)據(jù)的變化外，動效還肩負(fù)起增添空間感、平衡畫面和整合信息的作用。但是在增加動效的同時，仍需考慮服務(wù)器在承載大量數(shù)據(jù)涌入的同時，是否能夠承載較多的動效，分析畫面與數(shù)據(jù)量，對動效部分進(jìn)行適當(dāng)取舍。使動效不必喧賓奪主，明確畫面中的重點進(jìn)行展示。

除了大屏設(shè)計，UI設(shè)計中配色設(shè)計也很重要。場景使用具有金屬質(zhì)感的深青灰，符合理性的、冷靜的、智能化產(chǎn)品的個性；數(shù)據(jù)色彩使用透明、發(fā)光、具有未來感的高亮色，和場景形成強(qiáng)對比，使數(shù)據(jù)更為突顯、更具吸引力；為了強(qiáng)化客戶對于風(fēng)險的感知，通過顏色區(qū)分?jǐn)?shù)據(jù)的風(fēng)險等級，更直觀的傳達(dá)數(shù)據(jù)的含義。如：高風(fēng)險的使用紅色，紅色讓人聯(lián)想到危險、警報。大屏顯示風(fēng)格的設(shè)計要根據(jù)用戶的需求進(jìn)行選擇不可“我覺得”。顏色選用應(yīng)以信息展示清晰為最基本要素，在主次清晰的情況下選擇視覺效果較舒適的顏色搭配，一般數(shù)據(jù)可視化以藍(lán)色為主調(diào)，背景選用深色調(diào)，讓視覺更好聚焦，便于業(yè)務(wù)信息傳達(dá)。數(shù)據(jù)的數(shù)據(jù)圖表要思考數(shù)據(jù)之間的相關(guān)性；表里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律；數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面；表里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。在顏色搭配時選擇“631”搭配原則，頁面中60%使用主色調(diào)，30%使用輔助色調(diào)，10%使用對比色調(diào)。

整體架構(gòu)設(shè)計基于Python的Web輕量級Flask框架的B/S模式，數(shù)據(jù)庫已支持MySQL、Oracle、Microsoft SQL Server、SQLite等主流的關(guān)系型數(shù)據(jù)庫，還可以定制HTTP API接口方式或其他類型數(shù)據(jù)庫。該系統(tǒng)采用的是為Oracle數(shù)據(jù)庫，使用cx_oracle庫進(jìn)行數(shù)據(jù)連接，數(shù)據(jù)源獲取是醫(yī)療軟件模塊現(xiàn)有數(shù)據(jù)備份，爬蟲及生產(chǎn)數(shù)據(jù)導(dǎo)入。應(yīng)用服務(wù)器和數(shù)據(jù)庫服務(wù)器為Linux操作系統(tǒng)，通過服務(wù)器虛擬化技術(shù)實現(xiàn)。數(shù)據(jù)更新方式摒棄了前端頁面定時拉取的方式（這種方式帶來嚴(yán)重的資源浪費），采用后端數(shù)據(jù)實時更新，實時推送到前端展示。前端通過JS技術(shù)調(diào)用Echarts庫，實時大屏顯示數(shù)據(jù)圖（柱形圖、折線圖、儀表盤等）。

3 Python+Flask+ECharts編碼實現(xiàn)可視化

數(shù)據(jù)庫建立后，在編碼開發(fā)階段，工程師根據(jù)產(chǎn)品原型圖、UI效果圖、詳細(xì)設(shè)計文檔，選擇合適的開發(fā)環(huán)境、開發(fā)工具、開發(fā)語言等，統(tǒng)一每個模塊、頁面的命名規(guī)范，部分代碼如下：

4 樣圖溝通確認(rèn)、整體細(xì)節(jié)調(diào)優(yōu)與測試

樣圖溝通分三個層面：設(shè)計師對內(nèi)溝通、設(shè)計師對外溝通、設(shè)計師與大屏的“溝通”。跟大屏“溝通”是比較重要也是個特殊的環(huán)節(jié)，這也是大屏設(shè)計跟其他設(shè)計不一樣的地方，大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環(huán)境，這里的很多問題只有設(shè)計稿投到大屏上才能夠被發(fā)現(xiàn)。所以這一步在樣圖溝通確認(rèn)環(huán)節(jié)非常重要，有時候需要開發(fā)出DEMO，反復(fù)測試多次。這里主要有兩部分工作。（1）視覺方面的測試（有點像App的UI走查）：關(guān)鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預(yù)期顯示、有無變形、錯位等情況。（2）性能與數(shù)據(jù)方面的測試：圖形圖表動畫是否流暢、數(shù)據(jù)加載、刷新有無異常；頁面長時間展示是否存在奔潰、卡死等情況；后臺控制系統(tǒng)能否正常切換前端頁面顯示。

總之，醫(yī)療數(shù)據(jù)可視化系統(tǒng)可以在有效展示數(shù)據(jù)的同時，讓數(shù)據(jù)表達(dá)的內(nèi)容更容易被理解，也能保證信息的有效傳遞，使醫(yī)院的醫(yī)療信息從簡單的醫(yī)療業(yè)務(wù)數(shù)據(jù)采集與儲存發(fā)展到對醫(yī)療業(yè)務(wù)數(shù)據(jù)的共享和交換，并逐步向醫(yī)療業(yè)務(wù)數(shù)據(jù)的分析與挖掘方向延伸基于Python+Echarts的大數(shù)據(jù)可視化系統(tǒng)采用B/S架構(gòu)，借助于Python強(qiáng)大的數(shù)據(jù)獲取和處理技術(shù)實現(xiàn)了醫(yī)療數(shù)據(jù)的采集、整理及分析計算工作并推送至數(shù)據(jù)庫中。后臺采用基于Python的Flask框架實現(xiàn)數(shù)據(jù)接口功能，前端綜合運用了HTML、CSS、JavaScript等，并結(jié)合Echarts數(shù)據(jù)可視化組件，實現(xiàn)了數(shù)據(jù)到可視化圖表的轉(zhuǎn)換。

引用

[1] 彭曙光,王夢梅,趙麒博,等.面向ECharts的疫情信息可視化系統(tǒng)[J].福建電腦,2022,38(4):80-83.

[2] 牛作東,李捍東.基于Python與Flask工具搭建可高效開發(fā)的實用型MVC框架[J].計算機(jī)應(yīng)用與軟件,2019,36(7):21-25.

[3] 趙北庚.基于Flask與爬蟲技術(shù)的可視化深度學(xué)習(xí)數(shù)據(jù)標(biāo)注系統(tǒng)[J].電子制作,2020(20):36-37.