可视化技术与 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 项目相关的所有任务，包括依赖项、插件、命令等。项目的可视化演示使此工具，能够让开发者直观快速的进行使用，而在本教学课程中，项目和初始练习项目的环境也都是选择了脚手架来进行搭建。

实验总结

在本节实验中，我们学习了可视化技术的发展历程，可视化框架的介绍与对比，让大家对可视化技术有了基础的概念，介绍 Vue 与 Vue-cli 的知识与相关应用。

以上内容来自实验楼新课《Vue.js 打造酷炫的可视化数据大屛》，点击链接即可免费学习课程前两章！

Vue.js 打造酷炫的可视化数据大屏相关推荐

基于 Echarts 实现可视化数据大屏展示(150套)
基于 Echarts 实现可视化数据大屏展示(150套) 基于 Echarts 实现可视化数据大屏响应式展示效果的源码, 代码质量高,可以在此基础上重新开发. 作品介绍 1.网页作品简介方面 :本项目 ...
前端可视化数据大屏（1）
效果图技术架构:datav,vue2,echarts 我们一步一步的来实现一个简单的可视化数据大屏,开始吧!! 1,vue脚手架搭建项目太简单了,百度上可以搜索,我这里就不多说了,把router装 ...
手把手教你搭建可视化数据大屏
可视化现在也是越来越卷了,层出不穷的图表样式和各种各样的色彩搭配让人目不暇接,当然其中站在卷的顶峰的还是可视化数据大屏.就像下面这样: 但是怎么搭建呢,是不是很难呢?今天就带大家手把手搭建可视化数据大 ...
安徽合肥芜湖数字孪生智慧工厂,工厂车间数字化三维仿真交互,3d可视化数据大屏展示系统
安徽合肥芜湖数字孪生智慧工厂,工厂车间数字化三维仿真交互,3d可视化数据大屏展示系统.在数字化时代,传统的工业企业数字化转型迫在眉睫.在宝钢智能化升级项目中,引入了数字孪生这个概念,对工业生产全过程进 ...
油气管道供应可视化数据大屏：连点成线，打破信息孤岛
冬季悄然已至,供暖问题又需提上日程. 我国存在油气供需资源不平衡问题,管道运输能力瓶颈一定程度上限制了我国油气资源的使用.近年来,为适应日益增长的需求,我国油气管网规模不断扩大,管道的建设施工及管理水 ...
物流可视化平台/大屏看板/图表统计/运单跟踪/物流数据统计/物流看板/运单量统计/axure原型/大屏数据可视化/动效可视化数据大屏看板
作品介绍:物流可视化平台/大屏看板/图表统计/运单跟踪/物流数据统计/物流看板/运单量统计/axure原型/大屏数据可视化/动效可视化数据大屏看板 Axure原型演示及下载地址:Untitled Do ...
从0到1开发可视化数据大屏
前言:大数据时代,以大屏为载体的数据可视化需求日渐增多,数据大屏成为越来越多企业绩效展示,报表展示,业务监控等等的一种形式,大屏的上线带来的是便捷,无需编码,用户可以直接将所要呈现的组件拖拽到画布上, ...
Apache Superset可视化数据大屏
搭建Apache Superset可视化数据大屏 1.下载git并安装 Git (git-scm.com) 在CentOS6以上版本的yum源中有git的版本了,可以直接使用yum源进行安装. $ s ...
可视化数据大屏选择简报
因项目需要,需采购可视化数据大屏,以满足时间紧.要求多的业务需求.现对几家云服务商的可视化数据大屏产品做以对比,选择合适工具并应用. 数据对比时间为2021年二月中旬. 最后选择了百度云的Sugar产 ...

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