第

第PAGE5页（共14页）

基于Web和VisualStudioCode的地震数据分析系统设计

摘要

本国地处太平洋环带和欧亚地震带之间，被压缩成太平洋板块、印度和菲律宾海板块，属于地震断层很活动非常频繁，地震多发国家。地震活动范围非常大，地震会引起余震和其他灾害，都对人身和经济安全构成较大损失。现代信息技术的出现为数据得处理提供了强有力的技术支撑，使人们能有组织的解释信息，另一方面，现代信息技术的出现加快了信息的递送与生产，它使得通信技术与信息技术更受业内的广泛欢迎。现如今人们居家隔离对数据要求越来越高，这是本文研究的主要原因。本篇旨在让人们更清晰明了的熟悉地震数据。本文采用数据可视化方式，利用VisualStudioCode为基础软件来实现页面上的变化，使用elements、ApacheEcharts等组件完成页面优化使本网页在众多数据的大环境中脱颖而出。

关键词：数据可视化；VisualStudioCode;elements;ApacheEcharts

目录

TOC\o1-2\h\u一、引言 1

（一）研究背景与选题意义 1

（二）国内外研究综述 1

二、实现平台相应技术 2

（一）Web框架 2

（二）Vue.js主要特点 2

三、平台分析与设计 6

（一）平台分析 6

（二）平台设计 6

四、实现过程及使用方法 9

（一）实现过程 9

（二）成果展示 12

五、总结 13

参考文献 14

引言

（一）研究背景与选题意义

1.研究背景

在可视化层面，可视化要求比较简单。大屏幕显示系统仅用作显示介质，因此可以在前沿捕获和传输信息，并且图像和音频视频信号被传输到屏幕并显示。然而，随着大数据技术和人工智能技术的迅速发展，目前的大屏幕显示系统不仅能有效地分析大量的数据信息，且能显示分析成效，挖掘数据身后的法则。为用户的行为提供凭据。

这对专业方面提出了高要求。长期以来，制造商主要提供硬件，但现在他们需要软件开发。然而，任何行业应用程序都与许多不同数据之间的对接和分析相关。很少有公司仍然能够完全具备资格。同时，需要大量的时间、资金和人力资源培训。

2.选题意义

数据的可见展示提高了对信息的评释能力，且不易从过多数据和信息中获得关联，但图形和图表可在短时间提供讯息，并可以直接地提供所要的数据。数据的可视化[2]被认为是通过简单且高效地概括数据来提高人们共享和学习信息的方法。

（二）国内外研究综述

1.国内研究现状

媒体在数据分析中使用处理数据方式还在初级阶段。这是因为我们过去曾使用通用饼图、条形图、表格和其他格式来装饰布局，并使设计具有数字图像和讲故事的特定字段变得更加容易。这种陈旧，内容抽象，语言组织在社会文化框架内，观众真正理解和思考数字的深层含义与清晰这很难做到。事件发展的方向和趋势[3]。因此，如果不更改此状态，就必须保持初心。现在许多媒体都表明出我国的数据可视化已经演变得越来越先进对比从前。

2.国外研究现状

在海外来看数据可视化发展现状对数据处理的方式是一项十分纯熟的工艺。他们使用数据可视化技术将许多可视化媒体可视化并传播信息以增加其影响力。《芝加哥论坛报》、BBC、ABC[4]等有名媒体通过数据可视化提升了个人的影响效果，但由于计算机技术的成熟和搜索引擎技术的发展，政府随着数据的信息化和云计算模型的发展，得取和释译数据的可能极大升高。数据挖掘和[5]数据可视化将是时兴的新进展和冲破。

实现平台相应技术

Web框架

与React框架的对比

本文所实现的数据处理平台使用Vue框架来搭建，使用Vue的主要目的是实现代码的轻量化与模块化。Vue是一套构建用户界面的渐进式，主要表现为能用到那一部分就写那一部分不需要把全部都预置进去，Vue只关心视图层。

对比React两者有非常多相似的地方。如都使用DOM；提供响应式Reactive和组件Composable的组件。将自己的注意力完全聚精会神的集中在核心代码，把别的功效像路由交给相应的库。都有支持native的方案，支持SSR服务[6]渲染支持props进行父子组件的通信。但相对于性能方面还是Vue更胜一筹，因为Vue的VirtualDOM相对更为轻量化一些。相异之处就是：数据绑定模块，Vue实现了数据的双向绑定，react数据是单向的DOM不同，Vue会跟踪每个组件的依靠关系，而无需重新渲染全部组件树。在React的情况下，每次应用程序的state发生变化时，所有组件都会再一次渲染，因此为了控制React应用程序的state对象的不变性，需要React的shouldCompon