（上）Vue+Echarts构建可视化⼤数据平台实战项⽬分享（附源码）
前⾔
分享之前我们先来普及⼀下什么是数据可视化？数据可视化可以把数据从冰冷的数字转换成图形，揭⽰蕴含在数据中的规律和道理。
数据可视化通俗来说就是：数据的展⽰、处理和分析。⽬的是借助于图形化⼿段，清晰有效地传达与沟通信息。
那前端数据可视化⼜是什么呢？前端数据可视化其实就是利⽤前端表现层的⼿段，以前端⼿段展⽰、处理和分析数据。前端因为H5的到来，使前端有了质的飞跃，也使前端数据可视化的飞速发展得到了契机。H5提供的canvas就是这⼀契机。它是前端利⽤JS制作在做前端数据可视化的利器，⼏乎全部前端数据可视化⼯具都是基于其上做的。
简⽽⾔之，前端数据可视化是数据可视化的发展也是促使前端发展的⽀柱。
接下来要实现数据可视化平台酷屏展⽰效果，前端界出现了各种第三⽅开源库：，，，等。但是，万变不离其宗。
总的来说，所有的第三⽅库都是基于这两种浏览器图形渲染技术实现的： Canvas 和 SVG 。
SVG Canvas
不依赖分辨率依赖分辨率
⽀持事件处理器不⽀持事件处理器
最适合带有⼤型渲染区域的应⽤程序（如地图）弱的⽂本渲染能⼒
复杂度⾼会减慢渲染速度（任何过度使⽤ DOM 的应⽤都不快）能够以 .png 或 .jpg 格式保存结果图像
不适合游戏应⽤最适合图像密集型的游戏
可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘
制的图形均被视为对象。⼀旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发⽣变化，那
么整个场景都需要重新绘制。
数据可视化利器对⽐
1、兼容性
Highcharts 兼容 IE6 及以上的所有主流浏览器，完美⽀持移动端缩放、⼿势操作。
Echarts 兼容 IE6 及以上的所有主流浏览器，同样⽀持移动端的缩放和⼿势操作。
D3 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。
AntV 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。
2、是否免费/开源
看完这些，基本对⼤数据可视化的设计有所了解，没有UI设计师，⾃⼰也懂⼀点设计得话，前端⼀样可以愉快的玩耍。先上⼀波效果图。效果截图
登录界⾯
酷屏⾸页组件库
│  fig.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
功能模块
登录界⾯抖动
粒⼦动效
背景图轮播
⾃定义全局模态框
⾃定义消息提⽰框
数字滚动
酷屏⾸页组件库
各种酷炫⼩部件
可视化⾯板布局
准备⼯作
1. windows 10系统
2. 下载安装 nodejs v10+
3. 代码编辑器⼯具 sublime text 3
搭建开发环境（此处⾮⼩⽩可以忽略）
1） 打开命令⾏窗⼝，输⼊ node -v 查看，出现版本号说明已安装成功，如下图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。