ECharts在数据可视化中的应用
2019-07-18崔蓬
崔蓬
摘 要：目前人们在各个领域面对海量数据，需要借助数据可视化技术把海量数据转换为动态图像或图形，并利用交互手段帮助人们进行理解数据，以便完成进一步的数据分析。在教师专业发展领域中鲜有聚焦数据可视化的研究。本文按照可视化的基本流程，探索了基于ECharts平台的可视化开发方法，以教师专业发展数据的可视化系统为例，重点叙述了ECharts图表在客户端的构建方法、交互组件在可视化中的应用，展示了通过Ajax技术实现动态数据绘制的过程。
关键词：数据可视化;ECharts;动态数据加载
中图分类号：TP311.5 文献标识码：A
Abstract：At present，people are facing massive data in various fields.It is necessary to transform massive data into dynamic images or graphs with the help of data visualization technology，helping people understand the data with interactive means so as to conduct further data analysis.In the field of teacher professional development，few studies are focused on data visualization.In accordance with the basic process of visualization，this paper explores the visualization development method based on the ECharts platform.Taking the visualization system of teacher professional development data as an example，this paper focuses on the construction method of ECharts charts on the client side and the application of interactive components in visualization，demonstrating the process of dynamic data rendering through Ajax technology.
Keywords：data visualization;ECharts;dynamic data loading
1 引言（Introduction）
在这个互联网时代的大背景下，当人们面对海量数据的时候[1]，仅仅通过单纯的文本数据表达方式和分析手段来快速高效地处理和使用数据已经是非常困难的事，想通过人工去分析这些数据，从而得以深刻地理解，并进一步形成正确的概念和看法几乎不可能。对数据的可视化可以把晦涩难懂的传统数据在屏幕上直观形象生动地表达出来[2]，大大加强了人们对于数据的理解交互力度[3]，并允许通过交互手段控制数据的抽取和画面的显示，使隐含于数据之中不可见的现象成为可见[4]，为人们分析、理解数据、形成概念、找出规律提供了强有力的手段。
在教师专业发展领域中鲜有聚焦数据可视化的研究。本文将以教师专业发展数据的可视化为例，基于ECharts技术，阐述数据可视化系统的开发与应用。
2 可视化的基本框架（Basic framework for visualization）
2.1 可視化通用流程
总的来说，可视化流程可以分为三个阶段：采集、处理、呈现，如图1所示。可视化采集的数据都是从基于数据背后的自然现象或社会现象抽象出来的数据。数据类型、数据结构均会根据可视化任务的不同而改变。数据采集后要对数据进行数据清洗、规范、分析[5]，形成具有一定组织形式和规范的存储结构，采用合适的数据处理方法，将所需数据信息映射到不同的视觉通道，在制作或写代码过程中，再不断调整和迭代，最后呈现出想要的结果。
2.2 可视化循环模型
循环模型由Card等人提出[5]，把线性的可视化流程升级改进为循环回路模型[6]，用户在这种模型下可以加入和控制流程中的任何一个阶段，如图2所示。目前，大多数可视化流程都是基于循环模型的。
3 基于ECharts平台的可视化开发（Visualization development based on ECharts）
3.1 ECharts的主要特点
ECharts是百度推出的一款可视化开源开发框架[7]。它使用JavaScript技术，底层依赖轻量级的矢量图形库ZRender，主要的图表绘制方式为Canvas绘图，提供直观的数据可视化图表库。基于ECharts的可视化图表可以在多终端设备上流畅运行，兼容桌面系统移动端，浏览器兼容性强。ECharts的引入简单，通过配置项的设置，就可以控制数据呈现形式和视觉效果。ECharts通过丰富组件和高度个性化的可视化解决方案，实现用户和数据的交互，从而增强用户获取知识、优化数据分析的能力[8]。
3.2 ECharts在客户端的构建和图表实现
3.2.1 客户端引入ECharts图表库
ECharts图表的构建和实现，按照如图3所示流程进行。
ECharts在客户端的引入是比较简单的，ECharts3版本开始，不再使用内置AMD加载器，只需要在前端页面中的head部分，使用script标签直接引入ECharts的依赖js库，。
3.2.2 初始化图表实例和数据配置
在绘制图标前，需要为ECharts准备一个具备一定宽高的DOM容器，能够放下所需要的图表。使用getElementById（）函数，获取DOM容器，使用ECharts.init（）方法，基于这个DOM容器，完成对图表的初始化。
<！doctype html>
完成图表的初始化以后，再使用setOption方法实现DOM容器中数据的渲染，并使用Option参数配置图表数据，最后使用通用的通过setOption方法生成需要的图表类型。
option={
title：{
text：'分专业课题项目级别'
}，
tooltip：{
trigger：'axis'
}，
legend：{
data：['国家级'，'省级'，'地市级'，'校级']
}，
xAxis：{
type：'category'，
data：['动漫制作技术'，'嵌入式技术与应用'，'计算机应用技术'，'计算网络技术'，'软件技术']
}，
yAxis：{
type：'value'
}，
series：[{
name：'国家级'，
data：[4，0，2，0，0，]，
type：'bar'，
}，{
name：'省级'，
data：[8，2，1，0，0，]，
type：'bar'，
}，{
name：'地市级'，
data：[3，0，0，0，1，]，
type：'bar'，
}，{
name：'校级'，
data：[51，7，3，1，1，]，
type：'bar'，
}
]};
myChart.setOption（option）;
常见配置项說明见表1。
Axis表示直角坐标系中的坐标轴，下级参数data表示类目数据，在类目轴type：'category'中有效，数据可以简化为一个一维数组表示。Series是图表中的数据核心，其下级data表示数据系列中的数据数组。数组项可以为单个数值，也可以是一个数组形式的数据，在异步动态加载中，data一般是从后台获取的json形式数组。
3.3 ECharts的交互组件
可视化并不意味着呈现的画面是静态不变化的[9]，也不意味着用户对于可视化的效果只能通过视觉去感受，数据的可视化还包括了用户对可视化界面的操作和数据图像反馈，包括了用户的交互体验感。ECharts推出大量的交互组件[10]，这些交互组件都可在教师专业发展可视化领域加以利用，成为数据可视化促进教师专业发展分析的重要辅助手段。在教师专业发展数据可视化项目中运用了一些关键组件。
3.3.1 markPoint和markLine标注点组件
markPoint用来增加标注点，常常在数据呈现中标注最大值和最小值，只要在代码yAxis.series中增加markPoint。
markLine组件用于图表标线，在yAxis.series中增加markLine。
在教师发展数据可视化系统的专业论文类别显示中，就是使用这两个组件显示获取数据的最大值、最小值和平均值的，如图4所示。
3.3.2 dataZoom区域缩放组件
ECharts的dataZoom组件为用户提供了进一步的数据交互能力，它的工作原理是通过数据过技术达到区域缩放的效果。使用这个组件，用户能自由关注数据信息的细节，既能概览数据整体、去除离散数据的影响[11]，又能通过鼠标的动作选取部分数据，关注到局部数据的发展，有针对地掌握重要信息。dataZoom组件是对坐标轴进行数据窗口缩放或者窗口平移操作。dataZoom组件可以通过type属性，决定数据是在窗口内变化，还是在坐标轴内通过鼠标滚轮操作进行变化，在教师发展数据可视化系统设计中，由于专业较多，如果需要针对某一个或者几个专业，关注数据信息的细节，就需要加入dataZoom组件进行区域缩放，如图5所示。
3.3.3 图例交互
图例交互组件通过展现不同系列的标记，用户可以通过点击具体图例标记显示对应数据系列，以便排除不必要的数据系列，帮助用户进一步把关注点集中在目标数据上。在系统设计中，不同专业近三年的论文数据分别通过三个系列完成，如图6所示，当需要查看需要了解某一年的数据，就可以点击图例，进行图例交互，显示单个图例所对应的系列数据。
3.4 通过Ajax技术实现动态数据绘制
在数据可视化的实际数据绘制中，所需要显示的数据不是静态数据，而需要从服务器端读取数据进行动态加载后呈现。基本流程如图7所示。
3.4.1 获取后台数据
获取后台数据的方法很多，这里使用PHP技术读取后台数据。以读取专业论文数量为例，首先定义SQL语句，按专业分组为查询论文表、教师信息表、专业信息表三张表格，得到本专业教师的论文数量。使用mysql_query（）函数送出查询到的结果，再使用mysql_fetch_assoc（）得到结果的联数组形式。在这里定义了数组变量$array，在使用while语句循环出查询结果后，将查询结果从尾部插入$array数组中。
$respro_SQL="SELECT c.`zy_mc`AS'zy_name'，count（a.`lw_id`） AS'lw_num'
FROM`teachers_lunwen`a，`teachers_info`b，`zhuanye`c
WHERE b.`teachers_jgh`=a.`lw_jgh`
AND c.`zy_code`=b.`teachers_code`
GROUP BY b.`teachers_code`";
$result_respro=mysql_query（$respro_SQL）;
$array=array（）;
while（$row=mysql_fetch_assoc（$result_respro））{
array_push（$array，$row）;
}
3.4.2 将数据转换成JSON数据
JSON是一种轻量级的文本数据交换格式，可以使用它进行前端和服务器端数据交换，也可以进行移动端和服务器端的数据交换。将PHP数据转换成JSON格式，如图8所示。使用内置函数json_encode（）进行格式转换。转换为JSON之后将结果赋值给变量$data，使用PHP中的echo語句输出JSON数据。
3.4.3 客户端解析JSON数据
在数据可视化页面，ECharts不能直接使用JSON数据，所以就需要使用Ajax技术解析JSON格式数据。因为数据是动态显示的，因此option中的xAxis和yAxis里的data都应该先设置为空值。在解析完成后，用从服务器取回的数据作为data的值。
先初始化两个数组zymc=[]，papernum=[]，分别用于存放专业名称和论文数量，实际上这两个数组分别用来存放X轴和Y轴的坐标值。再在客户端页面中发送Ajax请求，获取JSON数据。当函数为真的时候就循环数据，把数据添加到创建的两个数组里面，最后返回两个数组。
varzymc=[]，papernum=[];//初始化两个数组，存放从数据库中获取到的数据
functionget_zylwsl（） {
$.ajax（{//调用ajax来实现异步的加载数据
type："post"，//请求方式
async：false，
url："app/get_zylwsl.php"，//json文件路径
data：{}，
dataType："json"，
success：function（result）{
if（result）{
for（var i=0;i zymc.push（result[i].zy_name）; papernum.push（result[i].lw_num）; }}}， error：function（errmsg）{ alert（"Ajax获取服务器数据出错了！"+errmsg）; }}）; returnzymc，papernum; } get_zylwsl（）;//执行异步请求 Ajax请求是写在option外面，一次请求直接返回两个数组，这样就不会造成数据的冗余，专业名称zymc放入X轴的data中，papernum放入series的data中。后台数据库中的数据的可视化结果就呈现在前端页面中了，如图9所示。 4 结论（Conclusion） 本文介绍了ECharts在可视化开发中的基础配置和使用方法，展示了数据可视化开发过程。 通过对教师专业发展数据的可视化关键技术的阐述，可以看出，采用ECharts技术实现数据可视化后，数据呈现形式鲜明、直观，能够向用户形象直观地呈现数据，便于用户对数据表进行管理、总结和分析，能够极大提高工作效率，在教师专业发展数据可视化开发中发挥了重要作用，通过将教师教学、科研、教育积累的大量数据以适合的方式加以呈现，能促进决策者全面、正确、深入理解数据，科学制定教师发展决策。也为当下流行的数据挖掘、大数据分析提供了技术支持。 参考文献（References） [1] LauraE.Matzen，MichaelJ.Haass，KristinM.Divis，et al.Wilson.Data Visualization Saliency Model：A Tool for Evaluating Abstract Data Visualizations[J].IEEE Transactions on Visualization and Computer Graphics，2018，24（1）：563-573. [2] Xuedi Qin，Yuyu Luo，Nan Tang，et al.DEEPEYE：An Automatic Big Data Visualization Framework[J].Big Data Mining and Analytics，2018，1（01）：75-82 [3] HumairaEhsan，MohamedA.Sharaf，PanosK.Chrysanthis.Efficient Recommendation of Aggregate Data Visualizations[J].IEEE Transactions on Knowledge and Data Engineering，2018，30（2）：263-277. [4] 胡瑞娟.大數据架构下的热词发现与可视化技术研究[J].软件工程，2018，21（05）：1-3. [5] 陈为，沈则潜.数据可视化[M].北京：电子工业出版社，2013：12. [6] 崔迪，郭小燕，陈为.大数据可视化的挑战与最新进展[J].计算机应用，2017，37（07）：2044-2049;2056. [7] 王龙，王一男.基于ECharts的可视化高校综合信息分析决策系统[J].现代电子技术，2017，40（06）：68-70. [8] 沈汉威，张小龙，陈为，等.可视化及可视分析专题前言[J].软件学报，2016，27（05）：1059-1060. [9] 王龙，王一男.基于ECharts的可视化高校综合信息分析决策系统[J].现代电子技术，2017，40（06）：68-70. [10] 王子毅，张春海.基于ECharts的数据可视化分析组件设计实现[J].微型机与应用，2016，35（14）：46-48;51. [11] 刘欢，汤维中，任友群.数据可视化促进教育决策科学化：内涵、策略与挑战[J].教育发展研究，2018，38（05）：75-82. 作者简介： 崔 蓬（1980-），女，硕士，讲师.研究领域：虚拟现实，Web程序开发.
