浅述利用Python+Flask+ECharts设计实现医疗数据可视化大屏展示
时间：2022-12-02 10:55:05 来源：柠檬阅读网 本文已影响 人 
安徽省宿州市立医院信息科 黄浩
信息的品质大水平上取决于其表达形式，大数据时代下各行业对数据价值的重视程度与日俱增，要想把数据价值发挥出来，数据可视化是最直观的体现也是有关数据视觉效果的进阶表达形式。Python 是一种特别受欢迎、代码简洁的计算机编程语言，它免费开源、可移植扩展嵌入、具有丰富和强大的库和工具包，实现同一种功能代码大幅减少。Flask是一个用Python编写的应用程序框架。ECharts是一个图表库可结合Ajax请求渲染展示页面，提供直观、生动、可交互、可高度个性化定制的数据可视化图表。数据可视化大屏展示是以大屏为主要展示载体进行直观的、炫酷的、具有科技感的展示，可以给管理者和观看者带来阅读便利。大屏可视化是一项结合了视觉传达学、用户心理学和计算机科学的学科,不同项目面向各个行业,展示需求错综复杂,不同单位对于大屏展示的需求又千差万别，其逐渐运用到医疗机构信息系统中是大势所趋。本文以医疗数据大屏展示为思路，希望能起到抛转引玉的作用。
医疗机构的信息化建设已发展多年，医疗数据对民众的生活、社会的生产与发展，以及国家的建设有着重要的影响，在世界各地都备受关注。在科学与医疗技术不断发展的今天，医疗数据的运用场景与规模也在不断地扩大，积累了大量的数据。针对某一个信息系统，利用Python+Flask+ECharts实现医疗数据可视化大屏展示可以协助管理人员从信息中获取专业知识、对于科室管理者更加直观的阅读和获取工作信息，更好的助力医疗机构的发展[1]。实施过程中通过前端工程师，后台数据师，界面设计师紧密配合，完成设计医疗数据大屏展示落地。设计医疗数据大屏展示的思路从梳理医疗业务指标、确定需求等四个方面进行论述。
数据可视化本质是：将数据映射到图形，同时将一些附加信息传达给用户。可视化映射是指将定义好的指标信息映射成可视化元素的过程。实现可视化映射的数据逻辑结构一般都是用树的数据结构索引，一对多的关系。原始数据—统计分析—预处理数据—过滤—关注数据—映射—几何数据—绘制—图形数据。总结来说，数据可视化大屏设计原则是“梳理业务指标设计服务需求、先总览再细节”数据大屏可视化的具体展示形式多种多样，分为带触摸、交互式操作、单向信息展示等。
可视化大屏的制作需要从业务价值出发，搞清楚要解决的问题或者要达成的目标，明确需要规避的信息，确定可视化大屏的主题，然后根据主题提炼出关键业务指标[2]，之后进行需求分析，需求分析作为数据分析的一部分，不同的业务、不同的主题会有不同的数据展示需求，需要了解实际的医疗业务流程并结合现有的数据现状。需求分析可以细拆分维度，确认优先维度，维度再合并这样一个分总过程，可以完成对需求化整为零、确定优先级、再化繁为简的深挖清洗过程。同一个指标的数据，从不同维度分析就有不同结果。我们可以从“联系、分布、比较、构成”四个维度思考。联系是数据之间的相关性；
分布是指标里的数据主要集中在什么范围、表现出怎样的规律；
比较是数据之间存在何种差异、差异主要体现在哪些方面；
构成是指标里的数据都由哪几部分组成、每部分占比如何。在最终确认具体需求的过程中，我们对用什么表现方式展示数据也有了一定的思路，比如使用Top10的方式去展示还是用KPI去直接展示数据等。
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库，实时大屏显示数据图（柱形图、折线图、仪表盘等）。
数据库建立后，在编码开发阶段，工程师根据产品原型图、UI效果图、详细设计文档，选择合适的开发环境、开发工具、开发语言等，统一每个模块、页面的命名规范，部分代码如下：
样图沟通分三个层面：设计师对内沟通、设计师对外沟通、设计师与大屏的“沟通”。跟大屏“沟通”是比较重要也是个特殊的环节，这也是大屏设计跟其他设计不一样的地方，大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现。所以这一步在样图沟通确认环节非常重要，有时候需要开发出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.
猜你喜欢 大屏页面可视化 从618看电视发展趋势，大屏、高端以及激光电视成热门首选消费电子(2022年6期)2022-08-25数据可视化设计在美妆类APP中的应用工业设计(2022年4期)2022-05-17思维可视化师道·教研(2022年1期)2022-03-12答案动漫界·幼教365(中班)(2021年4期)2021-05-23OPPO Find N多场景体验画面更鲜活计算机与网络(2021年24期)2021-02-11让Word同时拥有横向页和纵向页电脑爱好者(2020年17期)2020-09-14复变函数级数展开的可视化实验教学智富时代(2019年7期)2019-08-16复变函数级数展开的可视化实验教学智富时代(2019年7期)2019-08-16复变函数共形映射的可视化实验教学智富时代(2019年6期)2019-07-24复变函数共形映射的可视化实验教学智富时代(2019年6期)2019-07-24
