《现代电影技术》｜全国农村电影管理平台数据可视化的研发与实现

本文刊发于《现代电影技术》2024年第3期

随着大数据技术的飞速发展，数据可视化已成为一种必要的技术手段，帮助人们更好地理解数据、发现规律、做出决策。近年来，电影公益放映服务体系不断升级，电影公益放映服务管理工作也进入了新的发展阶段。在农村数字电影放映回传监管系统和基于GPS/GPRS的全国农村电影放映监管平台的基础上，中央宣传部电影数字节目管理中心以多年运营数据为基础，构建了农村电影大数据指标体系。

全国农村电影基层宣传文化阵地图以及全国农村电影管理平台的提出，为持续做好农村电影公益放映的规范化服务管理工作，保障电影公益放映工作健康、有序发展，确保政府资金投入惠及于民起到重要作用，成为全流程掌握农村电影放映服务情况的重要技术手段。全国农村电影管理平台（图1）从阵地图、放映计划、放映回传、满意度情况等方面对农村电影公益放映工作进行了综合性数据展示，从而全面综合地了解农村电影放映服务情况，为运营和管理人员提供数据支持。该平台的数据可视化实现需要经过以下流程：数据预处理、数据分析、可视化结果生成和用户交互。

图1　全国农村电影管理平台功能架构图

2.1 数据预处理技术

数据预处理是数据挖掘分析前非常重要的数据准备工作。其一方面可以保证数据的准确性和有效性，另一方面通过对数据格式和内容的调整，使数据更符合挖掘需求^[1]。本项目的数据预处理主要依据项目功能需求，对现有公益放映数据进行关联分析，剔除与目标无关的冗余数据，形成可用的结果数据。在对原始数据表进行处理后得到结果表，大大提升了可视化结果生成的效率，同时减少数据更新时产生的错误。在数据格式方面，由于JSON格式的数据易于创建、解析，便于转换和传输，本项目最终会将所有结果表中的数据统一转换成JSON格式，从而完成对目标数据的预处理。

2.2 数据可视化技术

数据可视化技术是将繁杂、不能直接读取的数据信息，转换成数据结果和结论的过程。通过图表表达，将数据、信息简洁化，使用户可以快速获取信息、理解数据，发现数据规律^[2]。从呈现效果可将数据可视化分为静态可视化、交互可视化、动态可视化：静态可视化通常以二维数据为主，通过图表和文字的组合展示某个主题的信息数据；交互可视化是对多维数据的展示，将基础数据图表进行组合，以人机交互为核心，通过鼠标事件对数据节点的“下钻”操作展示数据的内部关联，这也是本项目的主要展现部分；动态可视化将多维数据信息进行整合处理，以动态形式展示各维数据间的变化，最普遍的就是按照时间发展情况的动态展示数据。

数据可视化的基本流程主要包括数据采集与处理、数据挖掘与分析、数据到可视化的映射、可视化展示。

其中可视化映射是数据可视化的核心环节。不同数据对应不同的可视化图形，数据类型包括分类数据、时序数据和位置数据。在本项目中，主要存在以下数据类型映射：分类数据和位置数据。分类数据主要通过其属性进行分组，如不同影片的放映场次、不同地区的放映点数量等，主要表现形式为条形图、柱状图或饼图等。位置数据是以地图形式展示的数据，如全国放映点打点、放映回传地理位置打点等，主要有地理散点图、迁徙图、热力图等。

2.3 ECharts库

ECharts是一个使用 JavaScript 实现的开源可视化库，可跨设备运行，具有良好的兼容性和可扩展性，底层依赖矢量图形库 ZRender，提供简明直观、交互丰富、可高度个性化定制的数据可视化图表。ECharts提供了常规的折线图、柱状图、散点图、饼图、K线图，以及用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、树形图、旭日图，多维数据可视化的平行坐标，还有用于商业智能（Business Intelligence, BI）的漏斗图和仪表盘，且支持不同种类图的组合应用。Echarts 4.0以上的版本能够展现千万级数据量，此数据量级依然能够进行流畅的缩放、平移等交互。

2.4 Ajax

Ajax，即异步JavaScript 和XML（Asynchronous Javascript and XML） ，是一种创建交互式网页应用的网页开发技术。服务器与后台只需进行少量的数据交换，便可在不重新加载整个网页的情况下，对网页进行局部更新^[3]。在页面加载与更新时，用户的请求并非直接全部提交给服务器，其中一些数据处理工作交给Ajax引擎来完成，这就实现了用户请求与服务器响应的异步化。引入Ajax可以很好地解决传统Web应用加载速度慢的问题，可实现高速异步传输，减轻服务器的压力和资源损耗。

3.1 可视化前的数据分析与处理

可视化前的数据分析与处理是整个流程中的关键环节，它是将预处理后的数据按照一定规则和方法进行分析，为可视化展示提供直接的数据支撑。本项目可视化前的数据处理工作主要包括数值单位转换、放映场次排序和分组，以及放映点分布、放映场次分布、放映场次占比等数据的处理；根据数据更新频率和数据量的大小可选择进行前端处理或后端处理。前端处理可在页面上直接通过Ajax异步获取数据进行可视化展示，后端处理主要针对数据量较大的放映点地理坐标数据、放映回传数据或其他需要计算排序的数据，如影片部数和场次数据，通过后端数据变换或函数操作生成可视化展示的结果数据。

（1）数值单位转换：放映点数据、累计放映场次数据随着时间的发展可达到十万或百万，为使数据呈现更为直观，对这些数据统一转换为以“万”为单位的数据。

（2）排序计算：经过预处理生成的结果表中影片部数或场次等数据已经是可以直接使用的数据，此处的排序计算则是将结果数据根据可视化映射类型进行处理。如需在前端对分类型数据进行条形图、饼图展示时，通过sort函数进行排序计算后，生成可直接可视化展示的调用结果。

3.2 海量数据的加载与更新

海量数据的加载与更新是本项目解决的关键技术难点之一。根据全国放映点填报数据显示，截至2024年2月底，全国已有超61万个公益放映点（公益放映点数据动态变化），当以数据地图进行数据展示时，将面临十万级以上数据加载与更新；同时按照近5年农村电影放映运营的数据反馈来看，年均订购场次1000万左右，年均放映回传数据在800万场左右，这就意味着在进行累计数据展示时，最多时将面临百万级数据的加载更新。本项目在多个展示页面中出现了地图数据的绘制，如阵地图、放映计划、放映公示均有地图展示整体的分布情况，为降低页面加载时间，带来更好的用户体验，主要从以下四个方面进行处理： 

（1）分步加载

本项目在进行可视化设计时，采用了数据与图表结合的方式进行综合性展示。为了提高加载速度，提升用户使用大屏的体验，我们对数据展示和图表展示采用分步加载进行呈现。对数值型展示数据，如每日放映点、场次、影片数量等静态数据，利用Ajax技术直接从后台获取，在前端页面中即时赋值加载；对放映地图、排行、趋势类图表数据，经过数据分析与处理后使用ECharts进行绘制。这样可以在页面刷新时，直接将一部分直观数据呈现，避免页面出现空白的情况。

（2）ECharts的渲染

ECharts对百万以上数据量的渲染场景提供了appendData处理接口，例如地理数据的打点，往往需要分片加载数据量。appendData 接口提供了分片加载后增量渲染的能力，渲染新加入数据块时不会清除原有已渲染部分。本项目中，对全国放映阵地地图采用了appendData渲染方式，加快了渲染速度，提升了用户体验。但值得注意的是，目前此接口只适用于散点图和线图。

除此以外，对柱状图、条形图、散点图、线图、热力图等配置渐进式渲染（Progressive Rendering）方式，支持每个系列单独配置。

当图中有数千到几千万图形元素时，同时绘制或交互重绘的时候可能会造成界面的卡顿甚至假死。ECharts 4.0以上版本全流程支持渐进式渲染，渲染时会把创建好的图形分到数帧中渲染，每一帧只渲染指定数量的图形，避免了页面卡顿或假死情况发生。progressive参数用于设定一次渲染处理多少数据，如“progressive:400”表示每次渲染处理400个数据。progressiveThreshold参数用于设定启用渐进式渲染图形数量的阈值，意味着当单系列图形数量超过该阈值时启用渐进式渲染，如“progressiveThreshold:3000”表示已有渲染数据达到3000个之后开始加载渲染后的图案。这个配置项的默认值是当数据量大于3000个时开启，每次渲染400个。渐进式渲染配置的数据参数，需要根据图表图形复杂度进行适当调整。若复杂度低，设置的数值可以大一些，若复杂度高，可以设置数值小一些，从而在不影响交互流畅性的前提下获得更快的绘制速度。

（3）数据量压缩

在放映回传展示部分，我们以热力图形式进行呈现。热力图的优势在于可直观反映地域分布的密集程度，即可直观展现出各地区放映点以及是否回传的情况。但通过测试发现，百万千万级的数据量通过热力图呈现时会造成过载的情况，影响各地区界线的呈现。综合考虑可视化呈现数据处理情况，我们对回传部分展示的数据进行了压缩，以达到更优的展示效果。

通过对比3种压缩力度（不压缩、10倍压缩、100倍压缩）的结果，我们发现，过大和过小的压缩量均会对可视化呈现产生失真的影响，综合考虑后，我们最终选择压缩10倍的数据。

（4）页面加载提示

在用ECharts绘制地图时，我们在初始化加载地图的同时添加了页面加载提示，可直接调用ECharts的showLoading方法显示，还可为其设置样式，从视觉上可有效提升用户体验。

3.3 基于ECharts进行可视化研发与实现

本项目中的可视化图表均使用ECharts库进行实现。

3.3.1 全国农村电影基层宣传文化阵地图研发

全国农村电影基层宣传文化阵地图是直观展现全国农村电影公益放映点填报情况的数据地图，为更好地呈现出放映点分布情况，选用基于地理坐标系构建的散点图进行展示，主要通过ECharts的geo地理坐标系组件来实现。具体分以下几个步骤：

（1）绘制地图轮廓

ECharts通过使用registerMap接口将地图数据注册到ECharts中以绘制地图轮廓。地图数据信息可通过geoJSON和SVG两种方式引入。本项目地图使用了互联网地图，通过geoJSON的方式注册地图数据。

（2）绘制放映点数据

ECharts中的series⁃scatter配置项用来实现散点图的绘制。其中用coordinateSystem指定数据系列使用的坐标系，“geo”即表示通过geoIndex指定相应的地理坐标系组件。在series⁃scatter中可以通过datasetIndex、dataGroupId、data三种方式添加数据，本项目中已将放映点的地理数据以JSON形式存储并赋值相应的变量，即可直接使用data对应变量的方式添加放映点数据。

（3）绘制地图样式

在地图样式设置时，可使用geo配置项，对地图的位置、中心位置、长宽比、区域颜色、图形颜色、描边粗细及颜色、阴影等进行设置。本项目中通过对geo图层的叠加实现立体地图效果，在样式设置中，底层地图与上层地图的样式设置略有不同。

在设置放映点的样式时，可使用series⁃scatter配置项，从而对点的大小、颜色、标识等进行样式设置。全国农村电影基层宣传文化阵地图呈现效果示例如图2所示，图上的黄色散点是放映点。

图2　全国农村电影基层宣传文化阵地图呈现效果示例

3.3.2 图表可视化研发

（1）多图表展示

在该项目中，“当日放映情况”与“放映回传情况”部分需多图表综合性展示，以更全面地反映放映公示填报与放映回传的整体情况。

在可视化图表的选择上，排行类的图表选用条形图呈现，分布类的图表用饼图呈现，趋势类的则用折线图呈现。

在创建了ECharts绘制容器后，可通过grid来设置不同图表的位置和大小；grid将构建一个直角坐标系网格，最多支持2个x轴和2个y轴，可通过具体参数设置将图表定位到grid的特定位置。

条形图、柱状图、折线图等由直角坐标系构建的图表，用grid进行布局设置后，通过xAxis（x轴）和yAxis（y轴）配置详细的图表样式并填入相应的数据以完成绘制。

（2）放映点特效展示

ECharts中不仅支持标准散点图，也支持带有涟漪特效动画的散点图（Effect Scatter），可应用动画特效将某些数据进行突出视觉展示。如对当前有放映公示计划的放映点进行突出展示时，对effectScatter的rippleEffect中的相关样式进行设置即可。

3.3.3 放映公示与天气情况呈现

根据目前填报的电影公益放映点具体情况可知，当前大部分公益放映点仍为室外放映点。室外放映在一定程度上受到天气情况的制约，如在大风、雨雪、沙尘暴、炎热等天气条件下不利于开展室外公益放映。在放映公示地图的基础上，加入天气影响因素参考，对做好公益放映服务管理工作，完善放映公示计划填报管理具有积极作用。

本文通过与互联网天气应用编程接口（API）进行对接，得到了全国范围内的实况天气数据，通过post方式从后台天气综合表中获取天气判断指标数据。

（1）天气数据的处理

通过对实况天气数据的采集和综合性分析，对采集的天气数据中有关观测时间、温度、体感温度、风力等级、风速、当前小时累计降水量、能见度数据进行提取，形成天气参考指标。该天气API支持的实况天气更新频率为15分钟，根据系统需要，我们将更新频率设置为采集数据量/小时。

（2）天气数据指标的设置

鉴于天气情况对放映工作会产生实际影响，我们对提取的天气数据进行计算后形成不利天气指标：将累计降水量作为是否降雨的参考依据，设置“降雨量>0”即为有雨；将实况风力等级作为是否大风的参考依据，设置“实况风力等级>5”即为大风；将实况温度作为是否低温的参考依据，设置“实况温度≤10”即为低温；以上三项只要有任一不利天气出现便定义为“不适宜放映”。

（3）天气地图的可视化呈现

天气地图的可视化呈现使用了ECharts的视觉映射，通过visualMap组件来实现。视觉映射分为连续型和分段型。连续型是通过指定数据的最大值和最小值来确定映射范围；分段型具有更丰富的模式，支持数据平均分段、自定义分段以及类别分段。通过处理后的天气数据设置为不同的可视化样式，呈现在地图上。

3.3.4 用户交互研发

在本项目中，各页面都存在与用户的交互，除页面本身的交互外，通过图表进行的交互主要可分为两大类：事件交互和图表交互。事件交互如点击省份名称切换省份地图，在全国地图上点击相应的省份“下钻”到省份地图查看详细信息；图表交互主要为放映点详细信息的展示。

事件交互以“下钻”省份地图为例，通过ECharts鼠标操作触发。例如绑定一个鼠标点击操作，图表交互主要通过ECharts的tooltip组件弹出提示框，展示放映点详细信息。tooltip组件可以设置在全局，也可以设置在grid、series、data中。需要判断我们所交互的内容是针对哪一部分，如我们将鼠标放置在放映点上弹出提示框，就是在系列中设置tooltip。tooltip的属性也可对提示框的外观样式、触发类型进行设置。

本文介绍了全国农村电影管理平台数据可视化解决方案，通过Ajax和 ECharts的综合应用实现了数据图表的高效实时动态呈现，重点解决了十万级乃至百万级数据可视化展示时加载与更新的难题。绘制的放映阵地图、放映公示地图、放映回传热力地图直观鲜明地展示了我国电影公益放映点的分布、放映公示及放映回传情况。 

本项目基于电影公益放映实际情况进行设计，已可满足当前运营管理服务需求，但对标实时更新的信息技术与不断发展的电影公益放映事业，还需进一步升级完善。从技术上看，数据可视化技术、智能化技术的进一步发展，Echarts图表库的逐渐丰富，将为完善细化电影公益放映数据综合服务拓展新视角、提供新思路。从服务中国电影事业产业发展来看，持续丰富的公益放映场景，放映智能新终端、移动播控的投入使用，数据的实时传输，将为未来更多维度的数据精准化服务提供技术支撑。不断积累的电影公益放映数据已具备为各级各类管理机构和需求方提供多样化数据服务的能力，电影公益放映大数据体系也将持续深化，助力城乡电影公共文化服务体系一体化建设，推动电影公益放映高质量发展。