2020年第9期
20计算机应用
信息技术与信息化
基于Vue 的响应式数据可视化平台的设计与实现
罗永梅* LUO Yong-mei
摘 要 随着信息技术的高速发展，人们面对海量数据不再满足于仅仅通过文本数据进行分析与理解。本文为此
结合Vue 和ECharts 等技术设计了一套稳定、便捷、用户体验良好的响应式数据可视化平台，有助于用户通过不同终端设备对运营数据进行快速分析与理解。
关键词 Vue ；ECharts ；组件化；响应式；数据可视化
doi：10.3969/j.issn.1672-9528.2020.09.005
* 南宁市自然资源信息中心系统运维所 广西南宁 530000
0 引言
随着物联网、大数据的快速发展和数字化信息技术的普及，信息化集中管理配合数据的直观性表达，使得各项管理工作和服务更高效、便捷。“数据可视化”将数据分析与图形技术相结合，把相对复杂且抽象的数据通过设计之美以用户易于感知的图像进行展示，用户可通过可视化平台交互地理解和分析运营数据，有助于智能且高效的决策。1 技术选型1.1 开发模式
以当前技术发展趋势来看，前后端分离的开发模式已成为软件项目开发的业界主流。此开发模式的优点：
（1）可以降低前后端的耦合度，前后端可并行开发，提高开发效率。
（2）部分数据处理工作可放在前端进行可减少服务器的压力。
（3）后台服务出错不会直接影响到前台，避免用户看到异常信息，在一定程度上提升了用户体验。1.2 开发框架
Vue 作为当今主流前端框架之一，具有轻量级、高性能、灵活性强等特点，是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计，使得前端开发更加便捷[1]。Vue 可将网页拆分成多个独立组件，组件可单独进行功能开发和维护而不影响其他文件。Vue 的mixins 功能可将一些公用属性和方法
抽离出来单独定义，以供组件和页面使用，分
发了组件中的可复用功能。组件和mxins 的组合使用提高了代码的复用性，有助于快速构建用户界面，大幅度提升开发效率。
2 数据可视化平台设计2.1 项目构建
在安装node 环境的前提下，通过npm 命令安装相关依赖包。使用vue-cli 4.x 手脚架构建项目，图1是前端项目目录结构：
图1 项目目录结构
其中，核心功能文件在src 目录下，main.js 是项目入口文件，assets 是静态资源目录，存放平台的框架效果图。components 是功能组件目录，存放数据图表和公用展示组件。mixins 是混入函数目录，存放视图的公用属性和图表通用方法。views 是视图目录，存放最终呈现的界面效果文件。2.2 响应式设计
响应式设计是一种网页布局形式，用户界面可智能的根
计算机应用信息技术与信息化
据不同终端屏幕分辨率展示相应的布局。基于响应式设计能开发一套平台在多终端设备运行这一特点，极大程度地减少了开发和运营成本。
根据平台需求确定3套主流的终端设备，并为其定制不同的视图：
（1）移动端设备，最大宽度为1024px，视图名为“mobile”。
（2）pc或普通TV终端，主流分辨率为1920*1080px，视图名为“pc”。
（3）超宽屏设备，一般分辨率长宽比为21：9及以上，视图名为“wideScreen”。
通过JavaScript监听浏览器大小改变事件，根据不同屏幕分辨率，将对应的视图组件赋值给currentView：window.addEventListener (“resize”, () => {
if (document.body.clientWidth > 1024) {
if (document.body.clientWidth / document.body. clientHeight >= 21 / 9) {
this.currentView = “wideScreen”;
return;
}
this.currentView = “pc”;
return;
} else {
this.currentView = “mobile”;
return;
}
});
利用Vue中component的is属性，按需加载视图组件currentView渲染到界面中：
<component :is=”currentView” :api-data=”api-Data”/>
由于不同终端设备屏幕尺寸不一致，对应显示的内容数量和文本大小也不一，仅仅是根据分辨率不同来区分不同的布局视图未能达到预期效果。rem是Css3中新定义的一种相对单位，可通过定义父级元素的字体大小的来动态调整内容尺寸。例如，在2560*1440px分辨率下，将根元素html的字体大小font-size设置为100px，此时100px=1rem，展示对应内容尺寸为100*100px。当分辨率切换至1920*1080px（即原分辨率的1/2倍）时，修改html的font-size为50px（同为1/2倍），此时50px=1rem，原内容尺寸便会根据计算自动调整至50*50px大小显示。因此，为了提升用户阅读体验，还需根据不同的视图定义不同的根元素字体大小，对平台做进一步的优化。2.3 图表设计
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅地运行在多终端设备上，兼容各主流浏览器，为我们提供直观、交互丰富、可高度定制化的数据可视化图表。
ECharts 引入简单，通过配置项的设置，可以控制数据呈现形式和视觉效果[2]。Echarts主要是通过option参数完成图表配置的，为了增强图表组件的复用性和高度定制化，将option参数中的部分项拆分成props属性赋予组件。视图调用图表组件时，可通过传递相应的属性来展示不同视觉效果的图表。
经过需求分析，针对不同的数据类型应选用不同的视觉图表进行展示。例如：体现地市的统计数据，采用地图图表；各城区季度数据统计量，采用多柱状图；近24小时业务办理量，采用波浪式折线图；包含数据比例的，采用饼图等。因此需分别创建多个独立且通用图表组件。
后端将采集的运营数据转换成JSON数据格式，前端通过axios请求成功接收JSON数据，传递于图表组件对应的属性chartData中。图表组件接收chartData后需将其处理成ECharts可接收的对应图表数据格式，然后通过option参数配置执行setOption方法绘制图表：
this.option = {
background: this.background,
tooltip: this. tooltip,
series: [{
type: “pie”, // 饼图
radius: [0, “50%”],
center: [“50%”, “50%”],
label: {
normal: {
formatter: “{b}：{c}\n\n({d}%)”,
前端响应式布局fontSize: this.labelFontSize * this.scale }
},
data: this.handleData(this.data)
}]
};
this.chart.setOption(this.option);
由于数据是实时变化的，需通过定时器间隔性与后端交互获取最新的数据并改变chartData。在图表组件中可通过Vue的watch方法监听chartData的变动，当chartData有改变时，重新执行setOption方法对图表进行重绘，以展示新的数据，从而达到视图的更新。
2020年第9期21
2020年第9期
22计算机应用
信息技术与信息化
基于Node.js 的创新团队管理系统的优化与改进
罗 文* 兰全祥
LUO Wen LAN Quan-xiang
摘 要 攀枝花学院创新团队管理系统于2018年正式上线，该系统能有效地解决创新团队技术分享、信息展示、
成果管理等问题。但随着创新团队的不断发展与完善、开发技术的不断革新，创新团队管理系统在诸多方面仍然存在一些问题。本文分别从功能、安全性、性能以及可维护性等方面对系统存在的问题进行分析，提出了相应的解决方案，并使用fullPage 、邮箱验证、第三方云存储、Jenkins 等技术和手段完成了对创新团队管理系统的优化和改进。
关键词 Node.js ；创新团队；管理系统；优化改进
doi：10.3969/j.issn.1672-9528.2020.09.006
* 攀枝花学院数学与计算机学院 四川攀枝花 617000[基金项目] 攀枝花学院大学生创新创业训练计划项目（2019cxcy070）
0 引言
2018年罗文
[1]
等提出并设计的基于Node.js 创新团队
管理系统使用Vue、Bootstrap、Koa2以及token 等技术实现了一款用于成员管理、活动管理、成果管理、技术交流等一体的在线管理系统，有效地解决了创新团队技术分享、信息展示、成果管理等问题。经过了近两年的运行和使用，创新团队管理系统很好地为攀枝花学院应用型人才培养和创新 创业团队的发展提供了助力。但随着创新团队的不断发展与完
善，互联网技术的不断更新，创新团队管理系统在功能、安
全性、性能以及可维护性[2]等方面存在一些问题。针对这些问题，提出了相应的解决方案，并在原有创新团队管理系统的基础上完成了优化与改进。1 扩展系统功能
基于Node.js 的创新团队管理系统（后文简称为“系统v1.0”）在经过一段时间的运行和维护之后，根据创新团队管理的实际需求发现其存在以下问题。创新团队管理系统虽然对信息动态进行了管理，但没有对创新团队的整体进行概
述和介绍；虽然对成果进行了管理，但没有对团队成员的成果进行归集；虽然对技术进行了分享，但缺少对学习资源的
2.4 动效设计
交互过程中的动态效果讲的是页面和功能信息模块在切换时产生的动态效果[3]。为了便于用户对数据的阅读和理解，可在平台上增加一些数据的动态展示效果，让用户直观可见数据的变化：
（1）仅做数值展示的图表，数据变化导致的增减量展示可添加淡入淡出的视觉特效，可提高用户对数据的阅读性。
（2）体现24小时数据统计变化的折线图表，因每小时更新一次数据，可添加数据跟随时间进行相对位移的动画，展示出时间流逝的视觉效果。
（3）根据需求对地图图表增加数据迁徙的动画效果，将数据汇至一处，给用户提供了直观的数据流向。3 结语
本文从前端框架选型以及用户与界面交互的机制出发，
通过Vue 和ECharts 等技术实现了响应式数据可视化平台。该平台在响应式设计这一特点上，可方便用户使用不同终端设备对运营数据进行监控和分析，而数据的可视化和动态处理给用户带来良好的视觉体验。
参考文献：
[1]易剑波.基于MVVM 模式的WEB 前端框架的研究[J].信息与电脑(理论版), 2016(19):76-77+84.
[2]崔蓬.ECharts 在数据可视化中的应用[J].软件工程, 2019, 22(6):42-46.
[3]章萍.浅谈网页设计中的动态艺术效果[J].广西轻工业, 2008(12):103-104.
（收稿日期：2020-07-15 修回日期：2020-08-02）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论