1. 引言
1.1. 背景介绍及意义
随着电商市场的不断扩大和竞争的加剧,电商平台产生了大量的数据,包括销售数据、用户行为数据、产品数据等。企业需要更加精细化地管理和分析海量数据,以便做出更加准确的业务决策。
而传统的数据报表往往呈现出来的是生硬的数据数字,难以直观地展示数据之间的关联和趋势。因此,利用数据可视化技术可以更加清晰地呈现数据,帮助企业决策者更好地理解数据、发现问题和机会。
基于Vue框架的电商数据可视化平台的设计与实现,具有提升数据可视化效率和质量的意义,Vue框架具有响应式数据绑定和组件化开发的特性,能够快速构建交互式的数据可视化界面,并且具有良好的性能和稳定性,能够满足大规模数据可视化的需求,提升数据可视化的效率和质量;具有支持实时数据分析的意义,电商数据可视化平台可以实现对实时数据的动态监控和分析,帮助企业及时发现问题和机会,快速调整策略和方向。数据可视化平台可以帮助企业管理者直观地了解业务的运营状况、市场趋势和用户行为,从而基于数据进行科学化和精细化的业务决策,提升企业的竞争力和盈利能力。
1.2. 国内外研究现状
为了提高项目开发效率,国内对于前端框架的研究主要聚焦于实际应用场景,如电商、社交、媒体等行业的前端开发需求。同时,随着移动互联网和云计算的发展,前端框架在微服务、大数据可视化等方向也得到了广泛应用和研究。国外对前端框架的研究更加注重技术创新和框架设计原理。例如,新的数据绑定、状态管理、组件化、性能优化等方面的研究成果不断涌现[1],推动前端技术的进一步发展。
1.2.1. 开发框架现状
随着前后端分离的趋势,前端框架的研究也越来越注重与后端技术的结合,以实现全栈开发。
随着移动端、桌面端和Web应用的融合,跨平台开发和性能优化成为前端框架研究的重要方向。用户体验和可访问性在前端框架的研究中也受到越来越多的关注,以提供更好的用户体验和满足不同用户群体的需求。随着技术的不断进步和应用场景的扩展,前端框架的研究和发展仍将是前端技术领域的重要方向。
1.2.2. 技术发展现状
前端框架技术在过去几年里经历了快速的发展,有三种框架易用性和应用率较高,这三种框架分别为Angular框架、React框架、Vue框架。
Angular框架经历了从AngularJS到Angular的重大变革,现在的Angular框架更加现代化、模块化,支持TypeScript,并且拥有强大的功能和工具集。尽管相对于Vue.js和React,Angular在新项目中的使用率有所下降,但在企业级应用和一些特定场景中仍然具有一定的市场份额[2]。
React作为另一款流行的前端框架,在技术领域也保持着稳定的领先地位。其虚拟DOM和单向数据流的设计思想,以及庞大的社区支持[3],使得React在大型项目和企业级应用中得到广泛应用。
Vue框架作为一款轻量级、易学易用的前端框架,在过去几年中持续增长,成为了许多开发者的首选。其简洁的语法、响应式数据绑定以及丰富的生态系统受到了广泛的欢迎。
1.3. 论文研究内容
本项目采用了目前广泛使用的Vue框架进行设计与开发,通过利用Vue的组件化特性,可以显著提升代码的复用性。该框架使得电商数据可视化平台的开发更为简洁,能够轻松实现诸如商家分布图、地区销量趋势图等多个功能模块[4]。使用Vue框架的另一个优点是,它可以优化页面的渲染速度和数据更新过程,从而提升最终用户的体验。这种优化不仅提高了界面的响应性,还确保了数据显示的实时性,使平台用户能够获取到最新的商业洞察,以支持更好的决策制定。论文将通过电商可视化大屏案例,探讨电商可视化大屏的界面设计、数据可视化效果设计等方面内容。
2. 开发环境及相关技术介绍
2.1. 开发环境的选择和搭建
2.1.1. VS Code
本次项目开发选用的开发工具是VS Code,VS Code可以在Windows、Mac和Linux上运行,有向远程仓库提交代码的功能。启动速度快,占用系统资源少,适合于各种大小的项目,几乎支持所有流行的编程语言和开发框架[5]。可以通过安装相关的扩展来增强编辑器的功能,满足开发需求,VS Code提供了强大的代码补全功能,能够根据上下文和已有的代码提示出可能的选项,大大提高了编码效率。
2.1.2. Node环境配置
从官方网站下载合适的node.js的安装包,安装完成后,打开终端,输入相关命令查看Node.js和npm的版本,确保它们已正确安装,安装Node.js之后更新npm到最新版本。根据网络环境,可以配置npm镜像源来加速包的下载速度[6]。
2.1.3. Vue项目搭建
安装Vue脚手架,进入想要创建项目的目录可以用yarn代替npm来解决建立项目速度慢的问题[7]。创建项目时,Vue CLI会提示你选择项目的配置,可以选择手动配置或者使用预设配置,成功构建完项目后就可以正常启动项目。
3. 可视化平台的开发流程
项目采用Vue3 + Koa2 + WebSocket的极简架构:
前端用Vue CLI搭建单页应用,所有图表整合在ScreenPage内,通过Vuex统一管理主题与全屏状态;数据层前期用Axios轮询RESTAPI,后期由WebSocket推送,保持实时更新[8]。
后端仅Koa服务:REST接口负责初始数据,WebSocket长连接把本地JSON文件内容实时推给前端。
静态资源全部放在/public/static,ECharts、主题、地图矢量数据和图片一次性加载。
整体就是“前端一屏、后端一服、数据一夹”的小而全方案。整体结构如图1所示。
Figure 1. Overall architecture
图1. 整体结构
3.1. 电商数据可视化平台后台开发流程
在Koa2项目中,只需完成三件事:先记录每次请求开始时间,待后续中间件执行完毕后将总耗时写入响应头;接着根据返回数据类型自动写入对应MIME (如JSON输出Content-Type: application/json);最后把存放图表数据的指定目录映射为只读接口,直接读取文件内容返回,从而省掉数据库,实现轻量高效的后台,具体数据来源于电商平台的后台数据并稍作修改以验证一些极端数字,JSON数据结构以热销产品数据为例如图2所示。
Figure 2. JSON data display
图2. JSON数据展示
3.1.1. 后台项目的实现
项目准备:
app.js作为入口文件,data目录存放模块相关的JSON文件数据,middleware目录包含各种中间件代码,包括koa_response_data.js负责业务逻辑、koa_response_duration.js计算服务器处理时长、以及koa_response_header.js设置响应头,具体文件结构如图3所示。
Figure 3. Backend file structure
图3. 后台文件结构
3.1.2. 总耗时中间件
总耗时中间件是一种常见的中间件,用于计算请求处理的总耗时,并将其记录下来,以便监控和性能优化[9]。还可以提供更详细的性能数据,比如每个请求处理阶段的耗时情况,以及可能的瓶颈或性能优化建议。
通过记录的结束时间减去记录的开始时间,计算出过程的以毫秒为单位的执行时间,总耗时中间体代码如图4所示。
Figure 4. Total time intermediate code
图4. 总耗时中间体代码
3.1.3. 响应头中间件
由于向前端浏览器返回的数据都是JSON格式的字符串,因此MIME类型可以统一设置为application/json。
响应头的key是Content-Type,其值为application/json,响应头中间体代码如图5与图6所示。
Figure 5. Response header intermediate code
图5. 响应头中间体代码
Figure 6. Response header intermediate code
图6. 响应头中间体代码
3.1.4. 业务逻辑中间件
它承载了服务端处理后的数据或信息,以供客户端进行解析和显示[10]。这通常包括了所请求资源的状态、内容、以及可能的其他相关信息。
3.2. 电商数据可视化平台前端开发流程
前端项目的实现
全局环境中安装vue-cli脚手架
使用命令行执行创建项目vision
1) 引入Echarts包
将名为static的文件夹从资料文件夹复制到public目录中,在public/index.html文件中添加echarts.min.js文件的引用,以便在网页中使用echarts进行数据可视化。代码如图7所示。
Figure 7. Importing the ECharts package
图7. 引入Echarts包
2) 单独图表组件的开发(以商家销售量统计表为例)
在项目的初始阶段,首先将每种图表单独开发,再将它们合并到一个界面之中。在单独开发每个图表时,每个图表会使用一个独立的路径进行全屏展示,如图8所示为商家销售量统计的展示。
Figure 8. Expected sales volume statistics chart for merchants
图8. 商家销售量统计预期图
在src/components/目录下创建Seller.vue组件,用于展示图表。为外层的div增加类样式为com-container,随后建立一个新的显示图表的div标签元素,并且为新增的div增加类样式com-chart,之后为外层div元素增加样式com-page,在SellerPage中引入Seller组件,并注册和使用。
在mounted生命周期中初始化echartsInstance对象,确保图表库被正确加载。在mounted中获取服务器的数据,将获取到的数据设置到图表上,通过echartsInstance对象来渲染图表。
首先进行数据处理,代码如图9所示。
Figure 9. Data processing
图9. 数据处理
鼠标事件的处理,代码如图10所示。
Figure 10. Mouse event handling
图10. 鼠标事件处理
分辨率的适配
对窗口大小变化的事件进行监听
将字体大小的值设置给图表的某些区域
3) WebSocket的引入
WebSocket协议通过在客户端和服务器之间建立的单个TCP连接上提供全双工通信,允许服务器实时地向客户端推送数据,而无需等待客户端发起请求[11],涉及到前端代码和后端代码的改造,前端需要进行websocket包的安装以及创建实例对象和监听事件等任务,后端需要约定好与客户端数据交换的格式和含义等任务,此处不再详细描述后端改造过程,而只描述部分前端代码改造过程。
Vue.prototype.$socket = SocketService.Instance
Figure 11. Code processing
图11. 代码处理
3.3. 本章小结
在本章节中,详细介绍了电商数据可视化平台的功能实现情况,包括主要功能模块和设计步骤。实现的功能基本符合需求分析的要求。通过对电商数据可视化平台的前端页面进行设计分析,发现其优点在于数据显示清晰、准确,并且图形展示效果良好。然而,仍有一些地方需要优化,比如页面略显单一,以及地图显示时容易出现不稳定的情况。
NOTES
*通讯作者。