《基于ECharts的数据可视化系统设计》-工学论文，计算机论文-论文范文参考-科学狗论文网

标题

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

范文

王兆益周爱平

摘要：面对大量的数据，传统的处理方法是通过一些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等文件通过

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。