10.16638/jki.1671-7988.2021.012.055
一种汽车数据自助报表前端实现方案
温丰蔚，张送，韦通明，温丽梅，韦统边
（上汽通用五菱汽车股份有限公司技术中心，广西柳州545007）
摘要：数据报表一直是车企进行市场研究、车辆研发的重要工具手段，传统报表制作时间长、重复工作多、实效性差，难以体现数据快速更新与变化。随着汽车数字化智能化的发展，车企能从更多角度拿到汽车运行的相关数据，从中便会产生更多类别数据统计分析报表的需求。为满足这些需求，文章介绍了一种基于Vue的可视化报表系统前端设计与实现，用于替代传统的报表制作方式，减少报表制作中重复环节，提高报表中各个图表的可重用性，使得报表更易于分享与展示。
关键词：HTML5；Vue；数据报表
中图分类号：U461.99 文献标识码：A 文章编号：1671-7988(2021)12-174-03
A Front-end Realization Scheme of Automobile Data Self-service Report
WEN Fengwei, ZHANG Song, WEI Tongming, WEN Limei, WEI Tongbian
( SAIC-GM-Wuling Automobile Co., Ltd., Technology Center, Guangxi Liuzhou 545007 )
Abstract:Data reports have always been an important tool for car companies to conduct market research and vehicle research and development. Traditional reports take a long time to produce, have many repetitive tasks, and have poor effectiveness. It is difficult to reflect rapid data updates and changes. With the development of automobile digitalization and intelligence, automobile companies can obtain relevant data of automobile operation from more angles, and the demand for statistical analysis reports of more types of data will be generated from this. In order to meet these needs, the article introduces the front-end design and implementation of a visual report system based on Vue, which is used to replace traditional report making methods, reduce repetitive links in report making, improve the reusability of each chart in the report, and make the report more Easy to share and display.起亚k3最新报价
Keywords: HTML5; Vue; Data report
飞鹰摩托车CLC NO.: U461.99 Document Code: A Article ID: 1671-7988(2021)12-174-03
引言
近年来，随着汽车数字化网联化的发展，汽车变得更为智能，也有更多数据产生。为了消化这些数据，让数据服务于企业，服务于用户，制作分析报表是一个有效的工具。车企数据多存于云端，每次报表制作前，需要相关人员从存储服务器中导出，导出过程沟通成本高，重复性操作较多，浪费了很多人力成本。为了更方便快捷地进行数据报表的制作，减少沟通成本，提高报表可复用性，自主报表系统应运而生。
1 自助报表系统简介
通过自助报表系统，制作者可以根据自己的要求，在web 页面上选择对应的数据类型，以及数据的筛选条件与需要的图表类型，实时自动生成对应的报表。大大节省了数据导出
作者简介：温丰蔚，男，本科，助理工程师，就职于上汽通用五菱汽车股份有限公司技术中心，研究方向：汽车大数据可视化开发。
174
温丰蔚 等：一种汽车数据自助报表前端实现方案
微型面包车哪个好
175
时间、数据统计时间，以及沟通成本。
由于数据的实时性，可以一次制作周期性报表如周报、月报等，每次打开对应页面则是最新周期的数据报表，大大减少重复性工作，把专注力投入到更重要的工作中去。由于图表可配置，相关报表可以快速迭代，可以应对更多场景的要求。
如图1所示，系统分为3个页面：报表页面、数据源管理页和图表编辑页面。
图1  平台页面结构
（1）数据源管理页：包括工作表创建与字段设置的功能，工作表中包括了图表可用的数值与维度的字段，其操作有数据提取，以及一些数据预先聚合等内容。
（2）图表编辑页：可编辑多种图表，其结构主要包括智能显示、度量筛选器、维度数值设置等。其中，图表类型的智能显示是指根据所选的维度和度量个数及其类型判断可以生成的图表类型并以高亮显示缩略图以供用户选择。筛选功能主要针对一些脏数据或者用户不想看到的数据，为了突出意图可以进行相关的过滤从而更加方便地分析所生成的报表。
（3）仪表盘页：主要为报表管理功能，报表即为多个图表构成。可以在报表中对图表进行操作，包括位置调整，大小调整，针对单个图标鼠标悬停可以进行下载、编辑以及删除动作。
2 方案与架构
2.1 架构介绍
本文中报表系统前端使用Vue 为基础框架，Vuex 为状态管理工具，ECharts 为图表库。
Vue.js 渐进式框架进行组件化开发。Vue.js 是一个轻巧、高性能、可组件化的MVVM 库，也是一个构建数据驱动的Web 界面的库，拥有非常容易上手的API 。
Vuex 为此专门为Vue.js 设计了状态管理库，利用Vue.js 的细粒度数据响应机制来进行高效的状态更新，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
ECharts 是国内一开源的纯JavaScript 图表库，底层依赖轻量级Canvas 类库Zrender ，对大数据可视化具有较好的支
持。
2.2 报表页面组件
如图2所示，Login.vue 组件控制用户登录登出状态，登录成功后会进入到Panel.vue 组件，通过List.vue 可以在不同的报表之间切换，Views.vue 为展示报表展示组件。
图2  报表页代码结构
2.3 图表编辑页组件
如图3所示，Left.vue 组件中集成了提供可选字段组件ItemList.vue ，和筛选器组件Filter.vue ，在Left.vue 中实现控制数据的类型与范围。Middle.vue 组件中设置图表维度数值项的组件Axis.vue 和图表预览组件Preview.vue 。在Right.vue 组件中，可以设置图表的标题Title.vue 和类型Type.vue ，本文中报表系统支持包括折线图在内的7种图表可以选择。
图3  图表编辑页代码结构
2.4 数据源页面
如图4所示，数据源页面由边栏Sider.vue 与面板Panel. vue 构成。边栏包括添加、编辑和删除工作表等动作。而面板可以过滤选择Filter.vue 工作表的字段，并且将其展示出来（Table.vue ）。
图4  数据源页代码结构
2.5 图表编辑模块设计与实现
图表编辑为自助报表系统前端的核心部分，其主要实现方式是通过拖拽单击等易于理解的交互操作获取查询条件
[1]
，将其传递给对应的接口，            （下转第181页）
宋明浩 等：制冷剂R1234yf 物性及应用发展研究
181
circular tube[J]. International Journal of Heat a-nd Mass Transfer, 2018,121: 726-735.
[8] Diani A, Mancin S, Rossetto L. Flow boiling heat transfer of
R1234yf inside a 3.4 mm ID microfin tube[J]. Experimental Thermal and Fluid Science, 2015, 66: 127-136.
[9] Nalbandian H, Yang C Y , Chen K T. Effect of channel size and shape
on condensation heat transfer of refrigerants HF-O-1234yf and HFC-134a in rectangular microchannels[J]. International Journal of Heat and Mass Transfer, 2020, 161.
[10] 柴玉鹏，马国远，许树学，等.R1234yf 和R134a 制冷及制热性能实
手自一体车怎么开验研究[J].制冷与空调,2017,31(4): 435-440.
汽车设备[11] 张耘，张科，等.回热器在R1234yf 汽车空调系统中的应用与优化
[J].制冷技术, 2018, 38(5): 18-23.
[12] 刘雨声，李万勇，张立，等.采用R1234yf 制冷剂的汽车超低温强化
补气热泵空调性能[J].上海交通大学学报,2020,54(10):1108-1116. [13] Li W Y , Liu R, et al. Performance evaluation of R1234yfheat pump
system for an electric vehicle in cold climate[J]. Internati--onal Journal of Refrigeration, 2020,115:117-225.
[14] 杨梦，张华，秦延斌，等.混合制冷剂R134a/R1234yf(R513A)与
R134a 热力学性能对比及实验[J].化工进展,2019,38(3):1182- 1189. [15] 孟照峰，张华，秦延斌，等.R1234yf/R134a 混合物在汽车空调中替
代R134a 的实验研究[J].化工进展,2018,69(6): 2396-2403.
（上接第175页）
获取生成图表的原始数据，经过对图表模型的数据转换，将结果传递给ECharts 生成最后的图表。流程如下图5所示。
图5  ECharts 配置生成流程
ECharts 生成图表主要依赖于其Option 配置项，由于ECharts 有很多种格式，其所对应的Option 也不尽相同。若对每一种图表编写特定的Option 代码，会造成代码冗余过多，维护困难。为解决这个问题，本文通过研究ECharts 的文挡，采用函数式编程方式，编写了一套Option 拼接模块[2]，其可通
过图表的查询参数和端口返回的数据生成对应的Option ，交给ECharts 生成对于图表。
3 结语
文本介绍了一种基于Vue 的可视化报表系统前端设计与实现，用于替代传统的报表制作方式，减少报表制作中重复环节，提高报表中各个图表的可重用性，使得报表更易于分享与展示。
参考文献
[1] 刘翔宇.基于Vue 的数据可视化系统的设计与实现[D].北京：北京
邮电大学,2018.
湖州交警信息网[2] 江婷，林嘉琦，马建雄，高齐琦.基于组件化的数据可视化系统设计
与实现[J].智能物联技术,2019,51(1): 48-54.