前言
分享之前我们先来普及一下什么是数据可视化？数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。数据可视化通俗来说就是：数据的展示、处理和分析。目的是借助于图形化手段，清晰有效地传达与沟通信息。
那前端数据可视化又是什么呢？前端数据可视化其实就是利用前端表现层的手段，以前端手段展示、处理和分析数据。前端因为H5的到来，使前端有了质的飞跃，也使前端数据可视化的飞速发展得到了契机。H5提供的canvas就是这一契机。它是前端利用JS制作在做前端数据可视化的利器，几乎全部前端数据可视化工具都是基于其上做的。
简而言之，前端数据可视化是数据可视化的发展也是促使前端发展的支柱。
接下来要实现数据可视化平台酷屏展示效果，前端界出现了各种第三方开源库：Echarts（百度），AntV（阿里），Highcharts（国外公司），D3.js（国外公司）等。但是，万变不离其宗。
总的来说，所有的第三方库都是基于这两种浏览器图形渲染技术实现的： Canvas 和 SVG 。
| SVG | Canvas |
|---|---|
| 不依赖分辨率 | 依赖分辨率 |
| 支持事件处理器 | 不支持事件处理器 |
| 最适合带有大型渲染区域的应用程序（如地图） | 弱的文本渲染能力 |
| 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） | 能够以 .png 或 .jpg 格式保存结果图像 |
| 不适合游戏应用 | 最适合图像密集型的游戏 |
| 可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。 | 一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景都需要重新绘制。 |
数据可视化利器对比
1、兼容性
- Highcharts 兼容 IE6 及以上的所有主流浏览器，完美支持移动端缩放、手势操作。
- Echarts 兼容 IE6 及以上的所有主流浏览器，同样支持移动端的缩放和手势操作。
- D3 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。
- AntV 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。
2、是否免费/开源
- Highcharts 非商业免费，商业需授权，代码开源。
- Echarts 完全免费，代码开源。
- D3 完全免费，代码开源。
- AntV 完全免费，代码开源。
3、难易程度
- Highcharts 基于SVG，方便自己定制，但图表类型有限。
- Echarts 基于Canvas，适用于数据量比较大的情况。
- D3版本v3 基于SVG，方便自己定制；D3版本v4支持Canvas+SVG，如果计算比较密集，也可以选择用Canvas。除此之外，D3图表类型非常丰富，几乎可以满足所有开发需求，但代码相对于以上两个插件来说，会稍微难一点。
- G 是 AntV 蚂蚁金服旗下一款易用、高效、强大的 2D 可视化渲染引擎，提供 Canvas、SVG 等多种渲染方式的实现。
通过各种比较之后，我最终选择基于Echarts进行开发，上手快。当然，如果技术够硬，可以选择D3.js等，学成后牛逼哄哄，非常适合用于为用户制定个性化图表，但更强的专业性也就意味着更高的学习成本，仁者见仁智者见智吧。
了解可视化相关设计
自己去百度搜索数据可视化设计，乍一看，设计主题都是偏深蓝色调。科技感，酷炫，大屏展示，视觉冲击感强。如图：
看完这些，基本对大数据可视化的设计有所了解，没有UI设计师，自己也懂一点设计得话，前端一样可以愉快的玩耍。先上一波效果图。
效果截图
登录界面
酷屏首页组件库
看了以上效果图，都只是静态的，还不过瘾，直接线上体验：https://jackchen0120.github.io/vueDataV/
高端大气上档次，是我追求的目标。如果感觉还不错的话，老铁们是不是赏个点赞鼓励一哈，作者才有动力继续写下去。好了，言归正传，想要快速做出酷炫大屏，让人眼前一亮，就请接着往下看。
项目架构
│ vue.config.js // webpack配置
├─public
│ favicon.ico // ico图标
│ index.html // 入口html文件
└─src
│ App.vue // 根组件
│ main.js // 程序入口文件
├─assets
│ ├─iconfont // 引用阿里巴巴矢量图标库
│ ├─img // 存放公共图片文件夹
│ ├─js
│ │ utils.js // 封装工具类方法
│ └─styles
│ │ base.scss // 基础样式文件
│ │ common.scss // 公用样式文件
│ └─fonts // 字体库文件
├─components
│ │ index.js // 封装组件库
│ ├─bar3d // 3D立体柱状图
│ ├─bgAnimation // 登录界面背景图动画
│ ├─cakeLinkage // 柱饼组合联动
│ ├─circleNesting // 圆环套圆环
│ ├─circleRunway // 环形跑道图
│ ├─colorfulArea // 多彩轮播面积
│ ├─colorfulRadar // 多彩雷达
│ ├─dynamicLine // 动态轮播折线图
│ ├─dynamicList // 动态列表动画
│ ├─flashCloud // 闪动云
│ ├─gauge // 仪表盘
│ ├─modal // 自定义全局模态框
│ ├─pyramid // 金字塔动画
│ ├─pyramidTrend // 金字塔趋势
│ ├─rainbow // 彩虹轨道图
│ ├─ringPie // 环形饼图
│ ├─ringPin // 环形气泡图
│ ├─rotateColorful // 旋转多彩图
│ ├─scanRadius // 扫描半径图
│ ├─scrollArc // 滚动弧形线
│ ├─seamless // 新闻无缝滚动
│ ├─sinan // 司南排名图
│ ├─staffMix // 人员占比
│ ├─szBar // 双轴柱状图
│ ├─toast
│ │ index.js // 注册全局消息提示框组件
│ │ index.vue // 自定义消息提示框模板
│ └─waterPolo
│ index.vue // 水球图、水波图
├─router
│ index.js // 单页面路由注册组件
├─store
│ index.js // 状态管理仓库未使用到
└─views
Home.vue // 酷屏首页统计图
Login.vue // 登录界面
技术栈
- vue2.6
- echarts4.7
- axios
- webpack
- ES6
- scss
- css3
- jquery
- iconfont
功能模块
- 登录界面抖动
- 粒子动效
- 背景图轮播
- 自定义全局模态框
- 自定义消息提示框
- 数字滚动
- 酷屏首页组件库
- 各种酷炫小部件
- 可视化面板布局
准备工作
- windows 10系统
- 下载安装 nodejs v10+ https://nodejs.org/zh-cn/
- 代码编辑器工具 sublime text 3
搭建开发环境（此处非小白可以忽略）
1） 打开命令行窗口，输入 node -v 查看，出现版本号说明已安装成功，如下图：
2） 使用以下命令安装vue-cli3
npm install -g @vue/cli
# 安装指定版本
npm install -g @vue/cli@3.11.0
# OR
yarn global add @vue/cli
3）安装完成，检查vue版本，如下图：
vue -V
4） vue-cli3 创建项目及运行
vue create woyouzhe
cd woyouzhe
npm run serve
在浏览器地址栏输入：http://localhost:8080/
5）开发配置
在使用vue-cli3脚手架创建项目后，因为webpack的配置均被隐藏，当你需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来配置新的配置如下（含注解）：
module.exports = {
publicPath