淺述利用Python+Flask+ECharts設計實現醫療數據可視化大屏展示

安徽省宿州市立醫院信息科 黃浩

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

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

1 梳理醫療業務指標，確定需求

數據可視化本質是：將數據映射到圖形，同時將一些附加信息傳達給用戶。可視化映射是指將定義好的指標信息映射成可視化元素的過程。實現可視化映射的數據邏輯結構一般都是用樹的數據結構索引，一對多的關系。原始數據—統計分析—預處理數據—過濾—關注數據—映射—幾何數據—繪制—圖形數據。總結來說，數據可視化大屏設計原則是“梳理業務指標設計服務需求、先總覽再細節”數據大屏可視化的具體展示形式多種多樣，分為帶觸摸、交互式操作、單向信息展示等。

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

2 UI頁面、部署方式和整體架構設計

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

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

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

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

3 Python+Flask+ECharts編碼實現可視化

數據庫建立后，在編碼開發階段，工程師根據產品原型圖、UI效果圖、詳細設計文檔，選擇合適的開發環境、開發工具、開發語言等，統一每個模塊、頁面的命名規范，部分代碼如下：

4 樣圖溝通確認、整體細節調優與測試

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

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

引用

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

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

[3] 趙北庚.基于Flask與爬蟲技術的可視化深度學習數據標注系統[J].電子制作,2020(20):36-37.