Echarts在数据可视化课程中的应用

郑戟明　柳青

摘要：数据可视化作为一种数据展示和分析的工具已广泛应用各个领域。文章根据数据可视化课程的特点，有机结合了Echarts的基本功能、参数配置以及实现手段等内容，并把这些内容通过分阶段有效地运用到课堂教学的各个环节中。在课堂教学中展示了数据可视化的实现过程。文章表明了，通过一系列的训练，学生掌握了运用数据可视化工具的方法，同时学生的综合应用能力也得到了很大的提升。

关键词：数据可视化;Echarts;JavaScript;图表;课堂教学

中图分类号：G642        文献标识码：A

文章编号：1009-3044（2020）02-0009-03

Abstract： As a tool for data display and analysis， data visualization has been widely used in various fields. According to the characteristics of data visualization course， this paper combines Echarts' basic functions， parameter configuration and implementation methods， and these contents can be effectively applied to classroom teaching. The realization process of data visualization is shown in classroom teaching. The article shows that through a series of training， students have mastered the method of using data visualization tools， and their comprehensive application ability has been improved.

Key words： data visualization; Echarts; JavaScript; charts; classroom teaching

1 概述

數据可视化主要是通过各种视觉形式，清晰又直观地展现复杂数据。简单说，即利用图形化手段，来传递与交流信息。数据可视化的目的其实就是借助图形化的手段，让人们更直观生动的了解数据。

在大数据时代的背景下，人们不可避免地要面对海量数据，所以如果通过传统的数据表达方式来处理和使用数据已经是几乎不可能的。数据可视化则提供了一条比较便捷和有效的途径，让人们能更好地运用数据去解决一些实际问题。

数据可视化工具以可视化、图形化的形式展示数据，是进行数据分析不容忽视的重要组成部分，如通过柱状图、饼图、热图、直方图、雷达/蜘蛛图等工具可以简单地展示分析数据。数据可视化工具可以帮助用户实现人机交互性、嵌入数据、数据采集与共享、数据挖掘和人工智能等功能。常用的数据可视化工具有入门级Microsoft Excel;功能强大的Tableau、Microsoft PowerBI、百度ECharts;数据挖掘编程语言Python等。

数据可视化课程重点是尝试引入各种先进的工具来实现数据展示、数据分析。在教学过程中，教师教学重点是把数据可视化工具如何合理的融入教学之中，让学生在运用可视化工具基础上去理解和掌握数据可视化概念和相关知识。这样的学习方式使学生感到有新鲜感，对教学内容产生兴趣，对学习知识产生动力，也为数据可视化课程教学尝试一种新的教学方法。

2 百度ECharts简介

Echarts是百度研发的开源图表库，该库提供了各种基本和专业可视化图表，使能进行直观的展示，并能实现多种方式的数据交互，而且可根据用户需求进行个性化定制。Echarts以大部分常用浏览器作为运行平台，对于硬件设备，不管是个人电脑还是移动设备，都能很好地运行。ECharts通过直接引用Echarts.js文件，设置合适的DOM容器和配置一系列图表参数即可以生成可视化图表。

3 Echarts在数据可视化课程中的应用

百度ECharts数据可视化是通过JavaScript来实现的。JavaScript是一种属于网络的脚本语言，JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。对于没有程序设计基础的学生，要运用JavaScript来实现数据可视化会存在一定的困难，所以需要结合本课程的特点，采用合适的教学手段与方法来完成教学任务。

3.1 数据可视化任务分解

ECharts数据可视化可以提供直观，交互丰富，可高度个性化定制的复杂数据可视化图表。这些图表呈现在的学生面前的将是一个比较复杂的，且是较为庞大的问题，同时还要基于JavaScript脚本语言来实现，这时很多学生会感觉到困难，产生了惧怕心理。解决这一问题的最好方法，就是采用搭积木的形式，将原来较为烦琐的案例基于知识点通过合理的方法进行分解，在教学过程中分多个阶段步骤去实现。针对分解后的案例，分阶段和步骤去逐个找出实现的方法，最终完成整个案例。这样可以有效地降低难度，便于分析和解决问题。在课堂教学中引入了这一手段，将数据可视化过程进行了相应的简化。

在数据可视化课程教学过程中，教师把整个案例分解成多个任务，如获取与引入ECharts、绘制简单的图表、设置图表的样式、加入交互组件、事件和行为等。这样学生面对的不再是包含大段代码程序的整个烦琐的案例，而是一段段相对容易理解的小程序，所以学生只需要像搭积木一样将一段段小程序拼接起来，那么最终也就实现了整个案例的功能，同时也基本掌握了数据可视化的方法和过程。

所以教学的第一阶段的主要任务是实现ECharts的数据可视化基本功能。

（1） 在引入 Echarts.js文件之前，先需要新建一个html文件。

<！DOCTYPE html>

...

...

（2） 引入ECharts图表库（echarts.js文件）。

ECharts只需要像普通JavaScript库一样用script 标签引入。

（3） 在绘图前为ECharts设置放图表的 DOM 容器，并设定该容器的宽和高。

（4） 通过 echarts.init 方法初始化一个echarts 实例。

var myChart = echarts.init（document.getElementById（'chartmain'））;

（5） 通过参数option完成图形样式、数据等配置。

var option = {…};

在option中series 是生成图表的核心，其中type参数表示图表类型，data参数表示生成图表的数据。

（6） ECharts使用setOption 方法实现加载div 容器中各类数据，生成需要的图表类型。

myChart.setOption（option）;

在这一学习过程中，将一个个任务像搭积木按步骤完成，就可以实现ECharts的数据可视化基本功能。

3.2 数据可视化功能加入

在数据可视化课程的初级阶段，主要是要求学生掌握ECharts的数据可视化图表创建的基本过程。通过这一阶段的学习，学生对数据可视化方法和过程有了一定的了解。但是由于这一階段教学内容只涉及基本的知识和概念，学生对于数据可视化知识和JavaScript脚本语言的掌握还是有所欠缺的，因此在掌握基于ECharts图形库创建基本可视化图表的基础上，有必要对学习内容加以深入和扩展，需要把数据可视化各种更为复杂的功能加入教学过程中。

在该阶段中，教学的主要内容是如何把与数据可视化功能相关的知识合理嵌入到课堂教学中，同时教师的课堂职能也需要有所转变。教师的主要作用不再是对知识进行全面细致的讲解，而是将实现各种新功能所一些需要重视的关键点进行解析和提示，培养学生独立思考和解决问题的能力，摆脱依赖心理。

在新增加的可视化功能中将涉及设置图表标题和图例参数、交互参数、工具箱参数和样式参数等内容。这部分内容涉及知识点较多，应用到的函数和语句复杂程度和数量上有所增加。由于受课堂教学课时的限制，教师不能再以知识体系作为教学的主要思路和线索来实施教学，而是要结合数据可视化各种功能的实现，去讲解所涉及的知识。如在样式设置中，包含了itemStyle、lineStyle、areaStyle、label等各种参数设置，那么教师就需要有针对性的讲解这些参数的作用、格式、使用对象等内容，这样学生对这些参数有了直观的理解，而且可以在课堂就能设置和实现这些参数的功能。这种教学方式以应用作为教学目的，让所学知识相对容易接受和掌握，也提升了学生学习的积极性，教学效果比传统教学有所提高。当然对于另一些课堂教学中没有涉及的，但又比较重要的可视化参数和功能，教师会提供一些资料和途径，作为课外知识进行拓展，培养学生自学的能力。

3.3 数据可视化综合能力训练

经过前面阶段的训练和学习，学生应该较好掌握了ECharts数据可视化的方法和过程。但是依旧存在一系列问题，如教学内容相对比较单一，只应用了一些常用基本图表，如折线图、柱状图、散点图、饼图等，但缺乏专业图表基本的应用，如地图、关系图、热力图等;可视化参数也有限，而且涉及范围也不广，特别是在动态数据展示方面更为欠缺;数据的应用没有实现与常用的后台数据库关联，如MySQL等;后台交互等更多的综合应用知识几乎没有涉及。

当然上述一系列问题不可能在课堂上全部解决，但教师可以通过一些教学手段，以及合理有效的引导学生，逐步去解决这些问题，或者提供解决问题的思路和方法。所以本阶段在结合实现ECharts数据可视化基本功能的基础上，再增加一些较为复杂，综合应用程度高的图表功能，如数据标注内容设置;强调样式设置;Echarts主题设置;样式设置等。要实现上述功能，前阶段所学的知识是不够的，而要在课堂上详细的讲解这些功能也是不现实的，所以教师可以在课堂进行一些简单的讲解，然后提供一些相关资料，还有一些获取资料的途径，如参考书籍、参考文献、相关网站论坛等等，引导学生在查询资料的基础上，组织小组讨论，寻求实现上述图表功能的方法。当然在自学过程中，学生不可避免会产生各种各样的问题，但是教师采用这种教学手段的目的主要是培养学生思考探索问题的过程，重点不在于的完成结果如何。在经过学生自学这一过程后，教师在课堂要及时加以总结分析，对于积极思考，努力探索的学生给予表扬，对他们进行鼓励，从而培养学生独立思考、团队合作、综合素质等多方面的能力。

由于受到多种因素的影响和限制，仅仅通过课堂教学是不可能对学生实现多方位多阶段的培养。这些综合素质的培养，往往需要在学习各种基础课程知识的基础上，把学到的知识，与自己专业的知识有效地结合起来，尽可能运用到实际的工作中，如学生将学到的知识应用到各种课题和项目的研究开发中。从具体实施情况来看，学生在各方面都得到了锻炼，都感受到收获巨大，这些收获和锻炼是课堂教学所无法给予的。

4 结束语

在当前的大数据时代中，数据可视化不仅仅应用于科学研究开发领域中，在各种教学活动中也已经被广泛地应用。本文结合教学特点，介绍了ECharts融入数据可视化课程的方法，以及实施的步骤。从实际应用效果来看，ECharts技术直观地将数据呈现出来，在数据可视化教学中发挥了重要作用，让教师和学生对数据有全面、正确、直观的认识，从而进一步深入理解和运用数据。

参考文献：

[1] （美）Stephen A.Thomas. JavaScript数据可视化编程[M]. 北京：人民邮电出版，2017.

[2] 崔蓬. ECharts在数据可视化中的应用[J]. 软件工程，2019， 22（6）：42-46.

[3] 左圆圆，王媛媛，蒋珊珊，徐榕荟. 数据可视化分析综述[J]. 科技与创新，2019（11）：82-83.

[4] 徐欣威. 基于ECharts的科技统计数据可视化设计与实现[J]. 天津科技，2019，46（3）：66-70.

[5] 沈汉威，张小龙，陈为，等. 可视化及可视分析专题概述[J].软件学报，2016，27（5）：1059-1060.

[6] 王子毅，张春海. 基于 ECharts的数据可视化分析组件设计实现[J]. 微型机与应用，2016， 10（3）：45-48.

[7] 王龙，王一男. 基于ECharts的可视化高校综合信息分析决策系统[J]. 现代电子技术，2017， 40（6）：68-70.

[8] 付长军，乔宏章. 大数据可视化技术探析[J]. 无线电通信技术，2017（5）：1-5.

【通联编辑：王力】