基于ECharts的数据可视化系统设计

基于ECharts的数据可视化系统设计
作者：王兆益周爱平
来源：《计算机与网络》2020年第19期
摘要：面对大量的数据，传统的处理方法是通过一些Excel表格、Word文件等进行分析，在大量数据方面显得效率低，无法提取有效数据的重要信息，生成的图表也难以理解。

针对传统处理方法的不足，数据可视化技术显得尤其重要，设计了基于ECharts的数据可视化系统，以新冠肺炎疫情为例，使得大量枯燥无味的数据变得更加直观、易于理解、可读性强。

关键词：数据可视化；ECharts；疫情监控
中图分类号：TP311文献标志码：A文章编号：1008-1739（2020）19-60-3
0引言
随着大数据的快速增长，数据越来越得到工业界和学术界的重视。

面对大量的数据，传统的数据处理方式存在许多不足，例如，数据处理的效率不高及处理结果难以理解等[1]。

然而，数据可视化技术能够挖掘数据有价值的信息，尤其属性之间的关系，在数据分析方面具有重要作用[2-3]。

伴随数据运营技术的不断发展，数据可视化工具也不断增多，其中ECharts是一款广泛使用的数据可视化工具之一。

对于用户而言，数据的采集、计算方式等是透明的，而直观的结果是非常有意义的。

为了更加直观地理解数据的内涵，通过数据可视化技术能够满足此需求[4-5]。

针对传统数据处理方式的低效率、难理解及可读性差等问题，设计了基于ECharts的数据可视化系统。

通过模拟数据对系统进行验证，结果表明该系统能够实现数据可视化，使得人们更易于理解单调数据中蕴含的重要信息。

1 ECharts
ECharts是一款由百度研发团队开发的开源数据可视化库，可流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器，如IE8/9/10/11，Chrome，Firefox，Safari等。

ECharts底层依赖轻量级的矢量图形库ZRender，能够提供直观、交互丰富和可高度个性化定制的数据可视化图表。

ECharts提供了常见的柱状图、折线图、饼状图、玫瑰图及雷达图等，能够直观地将数据进行可视化。

此外，ECharts可以将这些数据进行一定的交互，除了PC和移动端的交互，目前也适用于一些小程序[6]。

2系统设计
2.1需求分析
针对新型冠状病毒肺炎疫情的严峻形势，为了让人们能够较快且准确地了解当下的情形，如患者人数分布、患者的性别分布等，数据可视化显得尤为重要。

然而，单一的图表显示数据难以让人们直观地了解当前疫情的总体情况。

因此，设计基于ECharts的数据可视化系统成为迫切需求，系统的显示结果便于用户直观理解数据的信息。

随着新冠肺炎疫情在全球蔓延，及时有效地了解疫情情况显得尤为重要。

2.2技术框架设计
系统由前端和后端2个部分组成。

通过Html、JavaScript等技术实现前端页面，使用ECharts实现数据可视化；通过后台MySQL数据库对获取的数据进行创建和存储，使用JSP和Servlet对后台进行维护。

因此，系统是一套完整的前端（网页）和后端（数据库、服务器、Ajax）实现实时交互的数据监控系统，如图1所示。

通过ECharts实现疫情数据的可视化，包括柱状图模块、折线图模块、饼状图模块及地图迁徙模块等。

为了让人们能够实时地获取当下疫情的情况，在获取数据方面添加了定时器，以一定时间间隔向后台请求数据。

ECharts图标是纯JavaScript的图标库，为了实现数据的实时显示，系统在后端通过MySQL创建存储模拟数据，并定时向数据库获取数据，在前端通过JSON将数据传送到前端JSP页面。

2.3页面设计
系统页面主要包括折線图、饼状图、柱状图及迁徙地图等。

折线图主要用于记录每日新增确诊人数、疑似人数、境外输入人数；饼状图用于显示确诊人员的年龄分布和地区分布；柱状图主要用于记录最近一周治愈的人数、各个类型人数比例；中国迁徙地图主要用于显示各个地区支援武汉的情况。

系统上部显示全国确诊人数和治愈人数，系统右上角显示系统的本地时间。

由于本文使用模拟数据，系统显示的时间与网络时间并不同步。

为了反映疫情的真实情况，未来将使用真实的数据且保持时间同步。

2.4数据库设计
数据库设计是指对于一个给定的应用环境，构造最优的数据库模式，建立数据库及其应用系统，使之能够有效地存储、查询，满足各类用户的应用需求。

数据库的设计结构模型如下：
3系统实现
通过JSP、Html实现前端页面。

在Html文件中设置三大板块，其中，两侧板块展示数据可视化图表，中间板块展示迁徙地图模型，在Html文件中创建合适的div用于存放相应的板块。

JavaScript是一种轻量级的Web脚本语言，实现前后端信息交互。

在Js文件中通过Ajax 异步请求向数据库获取数据，然后利用ECharts可视化插件，在动态网页中使得数据可视化，如图2所示。

系统交互的具体流程：①在Html文件中创建ECharts图表的div模块；②将
echart.min.js，flexible.js，jquery.js，china.js，myMap.js等文件通过
最后，為了验证系统的有效性，使用通过MySQL创建和存储模拟疫情数据。

除了显示二维图表，还可以通过ECharts显示三维图表，如果实时地产生数据，将显示动态的效果。

与传统的数据显示模式相比，基于ECharts的数据可视化图表更易于理解。

若实时显示数据需要向数据库中定时发送请求，同时数据库中数据需要同步更新。

本文以新冠肺炎疫情为例，有效进行了数据可视化分析。

此外，基于ECharts的数据可视化系统还可以应用于网站访问监测，分析用户行为，为可能的恶意访问行为发出预警，其难点在于网络流量的异构性。

因此，需要增加系统的异构数据处理模块。

4结束语
大数据时代，面对大量的数据，用户理解数据显得更加困难。

由于传统数据处理方法存在处理效率低、处理结果难理解等问题，数据可视化技术得到了广泛应用。

因此，设计了基于ECharts的数据可视化系统，该系统对新冠肺炎疫情的模拟数据进行分析，分析结果更加直观、易于理解，且增加了交互功能。

系统还可以做一些改进，比如数据可以通过爬虫实时获取其他网站的实时数据、迁徙地图可以增加交互功能、疫情特别严重的地区可以通过不同颜色深度作为警示、省或市的数据实现地图切换。

随着疫情蔓延，还可以分析国外的疫情数据并显示，让人们全面了解全球疫情。

参考文献
[1]杜小勇，卢卫，张峰.大数据管理系统的历史、现状与未来[J].软件学报，2019，30（1）：127-141.
[2]程佳军，游宏梁，汤珊红，等.数据可视化技术在军事数据分析中的应用研究[J].情报理论与实践，2020，43（9）：171-175.
[3]朱敏，王翔坤，姚林，等.面向城市空间热点分析的可视化方法综述[J].计算机辅助设计与图形学学报，2020，32（4）： 551-567.
[4]闻雅，高志远，王吉富，等.基于航班数据可视化系统的设计与实现[J].智能计算机与应用，2019，9（3）：228-231.
[5]李连开.谷歌正式发布数据可视化工具[J].计算机与网络， 2018，44（20）：73.
[6]冉从敬，徐晓飞.基于NodeJS+ECharts的专利权人引证关系可视化方法研究[J].情报科学，2018，36（8）：77-83.。