张 业 男

(黑龙江农业经济职业学院，黑龙江 牡丹江 157000)

数据可视化能够利用图表将数据直观地展示出来，帮助人们分析数据和查找数据的规律，特别与web前端技术结合后极大提高了可访问性和交互性，作为一个新兴技得到了很好的发展[1]。

在数据可视化课程中，教学内容通常侧重于数据分析和单个图表制作，整个过程略显枯燥，学习一段时间后，学生对于重复性知识逐渐失去兴趣，同时在实际工作中不同领域的数据分析重点和分析方法区别较大。为了缓解这些问题，可以引入不同专业领域的数据和基础知识，制作可视化大屏。本文以农业为主题，利用HTML、CSS、JavaScript、echarts等技术，展示可视化大屏作为案例的在教学中的应用。

一、整体框架设计

在数据可视化大屏的初期设计时，可以结合教学内容来确定图表的展示内容，本案例将农业数据的统计分析与数据大屏相结合，在学习数据可视化知识的同时，也了解部分农业数据统计相关概念，包括柱状图、折线图、条形图、面积图、堆叠图，制作难度逐步升级，能够让学生循序渐进掌握知识的同时，产生强烈的成就感，激发学习兴趣。

对于数据大屏的整体设计，需要保证展示的内容清晰、重点突出、易于阅读，准备呈现的数据有粮食产量、播种面积、消费结构、粮食价格、种植成本结构、猪粮比等内容。应该将全局数据放在醒目位置，相互关联的数据应该在相邻位置，重要信息安排较大区域，同时应做到主次分明、重点突出，基于以上需求，一个合格的数据大屏应该根据展示内容划分区域。利用HTML+CSS技术构建数据大屏主体结构，如图1所示，将页面划分为7个区域，其中左右两侧分别有三个区域，中间为一个区域，其中展示的图表有柱状图、折线图、饼图、柱状堆叠图。

数据大屏通常显示在较大的显示设备上，比如电视、大屏显示器等，设计数据大屏时需要充分考虑显示设备，根据显示设备的比例来设计分辨率，目前最流行的设备比例为16：9，本案例使用的分辨率为1920*1080。利用浏览器打开全屏显示后，可以达到最佳效果[2]。

图1 主体结构

二、常见图表制作

本案例使用echarts库制作图表，它是一款开源的数据可视化图表库，基于JavaScript语言，可以流畅地运行在PC和移动设备上，兼容绝大部分浏览器，提供直观，交互丰富，可高度个性化定制数据可视化图表，支持多种数据格式，提供非常丰富的的图表类型，并且可以将不同图表混搭，进一步提高可视化图表制作的灵活性[3]。

(一)制作近年玉米产量统计图

近年玉米产量柱状图是数据大屏中最简单的一个图表，通过该图表的制作可以让学生了解Echarts的基本使用方法，如果是期末作为综合练习，可以让学生仿照Echarts的官方Demo来制作。Echarts的使用大体上分为如下几个步骤：

1.在html页面中引入ECharts库。

2.准备用于显示图表的DOM容器，通常为DIV。

3.初始化echarts实例。

4.指定图表的配置项和数据。

在图表制作时，首先导入所需的js文件，需要导入的文件如下：

由于案例中图表较多，为了使HTML页面代码更加简洁，可以将图表相关代码放在一个单独js文件中，并导入该文件，导入代码如下：

在my_echarts.js中编写近年玉米产量图表的相关代码，首先需要初始化echarts组件，代码如下：

var myChart = echarts.init(document.getElementById('echart1'));

其中echart1为图表容器div标签的id，利用myChart.setOption(option)设置echarts配置项，就能够显示图表，参数option为配置项，对于柱形图需要配置xAxis、yAxis、series，xAxis用于配置横坐标轴，关键代码为：

xAxis:{

type: 'category',//指定为分类轴

data: ["2017年",…… "2022年"],//设置标签内容

……

}

yAxis用于配置纵坐标轴，关键代码为：

yAxis:{

type: 'value',// 指定为数值轴

……

}

series用于配置数据，并制定图表类型，关键代码为：

series:[

type: 'bar',// 指定图表类型为柱状图

data: [25907.07,…… ,27720.3],// 指定图表数据

……

]

还可以根据实际教学内容，通过其他配置项调整图表显示效果，如图2所示：

图2 近年全国玉米产量统计图

(二)制作近年大豆产量与进口总量统计图

近年大豆产量与进口总量统计图的中包含了“大豆产量”“大豆进口量”“大豆进口量同比”三种数据的统计，此时需要在series中配置三组数据，同时大豆进口量同比为百分比与其他数据单位不一致，不能放在同一个坐标轴中，关键代码如下：

yAxis: [

{ position: 'left' // 设置当前坐标轴的位置为左侧(其他代码略)},

{ position: 'right',// 设置当前坐标轴的位置为又侧(其他代码略)}

]

series:[

{type: 'bar',// 指定图表类型为柱状图(其他代码略) }

{type: 'bar',// 指定图表类型为柱状图(其他代码略) }

{

type: 'line',// 指定图表类型为折线图图(其他代码略)

yAxisIndex: 1,// 当前数据使用编号1的y轴(其他代码略)

}

]

echarts支持多坐标轴，可以在yAxis中设置多个坐标轴，并指定坐标轴位置，在series中有一组数据使用yAxisIndex属性，用于指定使用的坐标轴，坐标轴的编号默认从0开始，如果不是用该属性，会使用默认值0。如果想要在图表中显示多个图形，可以在series中编写多组图表数据配置，上述代码中编写了三个配置，并分别指定了图表类型，显示效果如图3所示。

图3 今年大豆产量与进口总量统计图

(三)制作粮食消费结构统计图

粮食消费结构统计图是由3个饼图组成的，如图4所示，包括玉米、大豆和稻谷三种粮食的消费结构。

图4 粮食消费结构

饼图是一种不包括坐标轴的图表，在制作时最核心的配置项为series，该配置项中至少要配置数据和图表类型，三个饼图的写法类似，这里以玉米消费结构饼图为例，关键代码如下：

series: [{

type: 'pie',// 指定图表类型

data: [// 配置数据，数据为键值对形式

{ "name": "饲用消费","value": 18550 },

……

{ "name": "其他消费","value": 1144 }

]

}]

(四)制作各省粮食总产量条形图

条形图与柱状图的制作非常相似，将数值轴和分类轴调换即可，如图5所示，也就是说将xAxis配置为数值轴，将yAxis配置为分类中，关键代码如下：

xAxis:{type: 'value',// 指定为数值轴(其他代码略)}

yAxis:{type: 'category',//指定为分类轴(其他代码略)}

在该图表中，带箭头的虚线表示平均值，最下面显示的气泡表示最大值。Echarts库中提供了各种图表标记，可以利用标记线、标记点、标记区域提升图表显示效果，在实际授课中可以让学生参考文档自行设计图表标记。

图5 各省粮食总产量

三、进阶图表制作

Echarts库还提供了一些高级的显示效果，与常见图表搭配能够制作出更加复杂的图表，丰富图表中蕴含的信息量。需要配置的参数更多，比较适合学生在掌握了一定基础之后学习。

(一)制作玉米和大豆价格走势图

玉米和大豆价格走势图是以折线图为基础，利用areaStyle可以将指定颜色填充个到折线下方区域，如图6所示。

图6 玉米和大豆价格走势图

在图中使用的数据量较大，可以指导学生将数据存放于其他文件中，这样管理起来补交方便，同时想要提升折线下方区域的填充效果，可以创建echarts.graphic.LinearGradient对象，实现颜色的渐变效果。

(二)制作粮食种植成本结构图

为了更直观地对比不同粮食的种植成本结构，可以使用柱状堆叠图，一个柱表示一种粮食，并且每个柱中还可以包含粮食种植的各种成本，如图7所示。可以看到每种粮食都是由“物质与服务费用”“人工成本”“土地成本”组成。通过该图表很直观地展示出不同粮食之间种植成本的区别。

图7 粮食种植成本结构图

柱状堆叠图主要是配置series，在series中应包含“物质与服务费用”“人工成本”“土地成本”三组数据，并在每组数据中设置stack属性。该图表属于柱状图的进阶版，学生在制作时，应重点关注多组数据的组成，以及stack属性的设置。

(三)制作猪粮比走势图

猪粮比的计算方式为国家发展改革委监测统计的每周生猪出场价格与全国主要批发市场二等玉米平均批发价格的比值，在2021年的《完善政府猪肉储备调节机制 做好猪肉市场保供稳价工作预案》中修改了猪肉价格预警机制，生猪生产的盈亏平衡点为7：1，当猪粮比低于6：1或高于9：1时开始预警，防止猪肉生产和供应的大起大落[4]。

猪粮比走势图根据猪肉价格预警机制进行设计，统计2021年1月-2022年7月的猪粮比走势，通过图表直观地展示出猪粮比的波动趋势和生猪养殖的盈亏情况，如图8所示。

图8 猪粮比走势图

本案例综合使用Echarts库提供的多种效果，从简单到复杂循序渐进制作了的不同类型的图表，最终效果如图9所示。该数据大屏基于静态网页实现，稍加修改后还可融入vue、flask、Django、spring等web框架中，有很强的扩展性。

图9 重点农产品市场信息数据大屏

本文重点展示了Echarts库在数据可视化过程中的应用，介绍了多种图表的制作思路和注意事项，可以作为贯穿整个学期的教学案例，或期末综合练习，也可以在web网站开发的课程中使用。通过由浅入深的方式讲解图表的制作过程，对编程基础要求较低，成品效果比较出色，容易让学生接受，能够很好地提升学生动手能力，提高学习主动性。