Vue.js 打造酷炫的可视化数据大屏

Z时代
2024-01-10
分类：综合

vue

可视化技术与 Vue 介绍

实验介绍

在本节实验中，将对可视化技术的应用场景、发展历程进行介绍，让大家对可视化技术有一个基础的概念。随后将介绍如今流行的可视化框架与其之间的优缺点对比。最后介绍 Vue 与其脚手架的概念知识，也是本课程后期项目实战的核心技术点之一。

知识点

可视化技术发展与应用

可视化技术框架

Vue 技术

Vue-cli 脚手架

什么是可视化

“数据可视化” 是一门数据与视觉相结合的技术，简单理解就是将数据转换成易于用户辨识和理解的视觉表现形式。通过图表展现方式，让数据转换为视觉图像，如各种 2D 图表、3D 图表、地理地图、关系数据图等等，以此来更好的展现数据的价值。

可视化应用场景

在此我们举几个十分常见的可视化简单应用，来加深大家的印象。

Excel

百度脑图

项目数据展示（vue-admin-beautiful）

数据大屏

可视化技术的框架与优缺点

可视化技术框架介绍

可视化技术运用广泛，但是实现起来难度较大，使用原生写法门槛较高，于是在技术社区的氛围之下也诞生出了非常多优秀的开源框架，这里也列举了一些经典框架并相应地介绍它们的优缺点：

框架	说明
Echart.js	国内最火的图表库之一，由百度技术团队出品，内容丰富社区活跃，Echarts3 对性能进行了很好的提升和改进。
AntV	蚂蚁可视化技术，类别丰富，拥有 G2、G6、F2、L7 等专业图标库，对图形的控制上要更自由，更抽象通用。
Highcharts	内容丰富，支持 IE6 +、iPhone/iPad、Android 等目前市面上所有主流的浏览器，即开创性的支持 IE6 浏览器。
D3.js	D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。功能拆得非常细，适合拿来学习的可视化算法。
Chart.js	一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。

可视化技术的优缺点

优点

优秀的可视化图形可以帮助人们快速、轻松地理解数据之间的联系，其显著的特点是能够让用户通过快速地吸收图形特征，从而理解信息内容，达到高效率提升数据分析的目的。

可视化技术在很大程度上减轻了用户对于数据表的理解压力，无需让用户埋头于大量令人眼花缭乱的数据中。可视化技术也广泛地应用在大屏展示相关场合，通过本身自带的良好视觉效果属性极大的提升了推广效率。

缺点

可视化技术的原生数据交互能力拥有极大的局限性，并且展示效果也会受到图像风格的限制。由于本身的特性导致其能展示的报表级别不会太高，无法进行更进一步的展示。如果不能合理的将业务数据与图表形式进行结合，则效果可能会不尽如人意，违背了初衷。

Vue 介绍

Vue 技术

Vue 是一套用于构建用户界面、实现 MVVM 开发方式的渐进式框架。根据官网的介绍说明，可以看出与其它传统 JQuery、Bootstrap 等大型框架不同的是，Vue 的核心在于只关注视图层的同时，避免了直接操作 Dom 元素，让开发者更好地处理数据直接的联系，并且能够为复杂的单页应用提供驱动。

通常在项目的应用中开发者更多的是对 Vue 与其技术体系插件进行使用，包括但不限于：Vue-router、VueX、Vue-cli、Axios、Element-ui 等。

与 Vue 对应的还有大家熟悉的 React 和 Angular 框架，相比于 Vue 来说，Angular 和 React 的学习成本都很高，对新人不太友好，并且中国使用 Vue 的公司是占大多数，所以为了让大家更快地上手和在实际中进行应用，本课程选择使用 Vue 技术进行本课程开发实现。

Vue-cli 脚手架

Vue-cli 是一个基于 Vue.js 进行快速开发的完整系统，也称之为 Vue 脚手架。它只需通过便捷 npm/yarn 进行安装即可，通过几行简单的命令，就能够帮助开发者搭建一个完整的项目框架，节省大量前期开发配置时间。更多详细介绍说明可以在官网进行查看。

官方说明它具备以下几点主要特征：

可升级、基于 Webpack 构建，并带有合理的默认配置。

可以通过项目内的配置文件进行配置。

可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。

一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue-cli 还具备界面 UI 工具，开发者可以用来创建和管理项目，简化了编写命令行的步骤。开发者可以在浏览器中配置或运行 Vue 项目相关的所有任务，包括依赖项、插件、命令等。项目的可视化演示使此工具，能够让开发者直观快速的进行使用，而在本教学课程中，项目和初始练习项目的环境也都是选择了脚手架来进行搭建。