(上)Vue+Echarts构建可视化大数据平台实战项目分享(附源码)
前言
分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。数据可视化通俗来说就是:数据的展示、处理和分析。目的是借助于图形化手段,清晰有效地传达与沟通信息。
那前端数据可视化又是什么呢?前端数据可视化其实就是利用前端表现层的手段,以前端手段展示、处理和分析数据。前端因为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 // 状态管理仓库未使用到└─viewsHome.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: process.env.NODE_ENV === "production" ? "/vueDataV/" : "/", // 部署生产环境和开发环境下的URL:可对当前环境进行区分lintOnSave: false, // 是否在代码保存时进行eslint检测productionSourceMap: false, // 是否在构建生产包时生成sourceMap文件,false将提高构建速度devServer: { // webpack-dev-server 相关配置 port: 8081, // 端口号hotOnly: false, // 取消热更新// proxy: { // 使用代理// '/api': {// target: '//api.github.com', // 目标代理服务器地址// changeOrigin: true, // 允许跨域// pathRewrite:{// '^/api': '' // 重写路径,需要设置重写的话,要在后面的调用接口前加上/api来代替target// }// }// }},configureWebpack: {// 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并externals: {'jquery' : '$','echarts': 'echarts','axios' : 'axios'}}
}
在配置文件vue.config.js中添加webpack的externals对象,把不需要打包的依赖库(减少打包文件体积
),直接按上面的方式写入。然后在index.html文件中引入CDN即可,如下图:
6) 公共样式,图片,字体,JS,统一存放在/src/assets/文件夹下,如下图:
js文件夹里面的utils.js文件的作用,如下图:
作者偷懒只针对酷屏首页组件库会用到,通常按照UI设计师提供的数据可视化屏幕尺寸都是宽:1920px,高:1080px,所以上面的配置也按照这个尺寸进行屏幕缩放。后续会专门讲数据可视化面板的合理布局。首页引用如下图:
iconfont文件夹存放图标文件,可以直接去阿里巴巴矢量图标库查找下载所需要的图标。
style文件夹存放base.scss(基本样式)和common.scss(组件库通用样式),直接在main.js文件引入即可,如下图:
功能设计和代码实现
按照上面的步骤完成脚手架构建,把需要的axios、vue-router、echarts、scss、jquery等依赖库引入和安装配置好,准备开始上路。
登录界面主要功能包含:背景图轮播、粒子动效、登录框抖动、自定义消息提示框
等等。
- 背景图轮播
利用css3动画属性animation实现轮播背景图的路径,使这个动画无限循环下去,以实现背景图自动轮播的效果。背景图轮播功能已封装注册全局小组件在components/bgAnimation目录文件,直接上代码:
<template><ul class="slide-box"><li></li><li></li><li></li><li></li></ul>
</template><script>
export default {name: "bgAnimation"
};
</script><style lang="scss">
.slide-box {position: fixed;width: 100%;height: 100%;background: rgba(0, 134, 179, .5);top: 0;left: 0;z-index: 0;li {width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;color: transparent;background-size: cover;background-position: 50% 50%;background-repeat: none;opacity: 0;z-index: 0;-webkit-backface-visibility: hidden;-webkit-animation: imgAnimation 48s linear infinite 0s;-moz-animation: imgAnimation 48s linear infinite 0s;-o-animation: imgAnimation 48s linear infinite 0s;-ms-animation: imgAnimation 48s linear infinite 0s;animation: imgAnimation 48s linear infinite 0s;&:nth-child(1) {background-image: url(../../assets/img/bg-4.jpg);}&:nth-child(2) {background-image: url(../../assets/img/bg-5.jpg);-webkit-animation-delay: 12s;-moz-animation-delay: 12s;-o-animation-delay: 12s;-ms-animation-delay: 12s;animation-delay: 12s;}&:nth-child(3) {background-image: url(../../assets/img/bg-2.jpg);-webkit-animation-delay: 24s;-moz-animation-delay: 24s;-o-animation-delay: 24s;-ms-animation-delay: 24s;animation-delay: 24s;}&:nth-child(4) {background-image: url(../../assets/img/bg-4.jpg);animation-delay: 36s;}}
}
@-webkit-keyframes imgAnimation {0% {opacity: 0;-webkit-animation-timing-function: ease-in;}8% {opacity: 1;-webkit-transform: scale(1.1);-webkit-animation-timing-function: ease-out;}17% {opacity: 1;-webkit-transform: scale(1.2);}25% {opacity: 0;-webkit-transform: scale(1.3);}100% {opacity: 0;}
}
@keyframes imgAnimation {0% {opacity: 0;animation-timing-function: ease-in;}8% {opacity: 1;transform: scale(1.1);animation-timing-function: ease-out;}17% {opacity: 1;transform: scale(1.2);}25% {opacity: 0;transform: scale(1.3);}100% {opacity: 0;}
}
</style>
如果对animation属性不熟,可以参考这个网站教程。
- 粒子动效 点击查看效果
这种粒子背景特效在Vue框架中实现不难,因为已经有大神帮我们做好了,我们只需引入到自己的项目中即可,作者推荐vue-particles
插件,简单看一下使用,具体用法可以移步vue-particles官网。
<vue-particles color="#6495ED":particleOpacity="0.7":particlesNumber="80"shapeType="circle":particleSize="4"linesColor="#6495ED":linesWidth="1":lineLinked="true":lineOpacity="0.6":linesDistance="150":moveSpeed="3":hoverEffect="true"hoverMode="grab":clickEffect="true"clickMode="push"
>
</vue-particles>
- 自定义全局消息提示框
消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型。效果如下图:
消息弹框功能已封装注册全局小组件在components/toast目录文件,代码如下:
<template><transition name="fade"><div class="toast-container" v-if="visible"> <div class="toast" :class="type"><div class="content"><i class="iconfont" :class="'icon-' + type"></i><span>{{ content }}</span></div><i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i></div></div></transition>
</template><script>
export default {name: 'Toast',data() {return { content: '',time: 3000,visible: false,type: 'error', //四种类型:info, success, warning, errorhasClose: false, }},mounted() {this.close();},methods: { close () {setTimeout(() =>{this.visible = false;}, this.time);}}
}
</script>
在components/toast/index.js目录文件中注册全局组件,如下图:
在main.js中全局引用,如下图:
在登录模板界面调用即可,如下图:
参数名 | 类型 | 说明 |
---|---|---|
content | String | 内容 |
time | Number | 消失时间,默认3秒后消失 |
type | String | info/success/warning/error,默认info |
hasClose | Boolean | 是否含关闭按钮,默认false |
最后
由于时间关系,文章写的仓促,难免会有些问题或BUG出现,愿意接受批评和指正。此次实战项目分享内容分为上下两篇文章,下一篇要分享的内容大概有:自定义全局模态框、首页设计布局、数字滚动、某个酷炫小部件开发
等。
下一篇讲讲大数据炫酷展示公司品牌实例
- 基于 flexible.js + rem 智能大屏适配
- sublime text 3 cssrem插件
- Flex 布局
- Echarts 图表和地图的基本使用
如果感觉还不错的话,老铁们是不是来github里赏个★Star鼓励一哈。后续会持续更新和优化,也期待大家的交流。
阅读作者相关优质文章
- NodeJS全栈开发一个功能完善的Express项目(附完整源码)
- 前端必知必会MySQL的那些事儿 - NodeJS全栈成长之路
- 开发一款微信小程序的个性简历,能打开大厂之门并获得门票?(附源码)
- 2020值得收藏与学习280多款H5小游戏,从入门到彻底了解它(附源码)
如需获取更多项目实战经验及各种源码资源,请关注作者公众号:懒人码农
(上)Vue+Echarts构建可视化大数据平台实战项目分享(附源码)相关推荐
- Vue+Echarts构建可视化大数据平台实战项目(上)粒子动效,登录界面抖动,背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
- 3d饼图 vue_Vue+Echarts构建可视化大数据平台实战项目分享(附源码)(上)
前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...
- 20个大数据可视化大屏模板(评论区附源码)
为什么大屏数据展示模板越来越受欢迎? 大屏在企业中越来越受欢迎,主要有两个方面的原因 第一:全方位的数据展示. 目前企业都有面临"信息孤岛"问题,各个系统平台之间的数据无法实现融合 ...
- 【threejs】可视化大屏酷炫3D地图附源码
目录 效果如下: 1. 前言: 2. 使用: 1.修改整体的背景图可以使用颜色或用贴图改材质编辑 方法: 2. 取消地图上柱状图显示 3.更换地图.更换省份.市 4.修改相机的视角,页面展示的远近角 ...
- axios下载大文件_用Vue构建一个github“可视化大数据平台”
GitDataV,是一个github"大数据可视化平台",通过它你可以更直观的看到你在github里的一些数据,(之所以打双引号,是因为我觉得这个还没到大数据可视化的程度).其实我 ...
- 如何用Vue快速构建github可视化大数据平台
一.项目简介 如何用Vue快速构建github可视化大数据平台 二.实现功能 个人信息 仓库语言分类 仓库公开数量 仓库stars情况 仓库数据 最近你的操作 粉丝数量 跟随数量 最近的跟随 最新信息 ...
- CM+CDH构建企业大数据平台系列(一)
问题导读: 1.CM是什么? 2.CDH是什么? 3.CM+CDH是什么? 4.什么是企业大数据平台? 5.如何用CM+CDH构建企业大数据平台? .......... 带着种种疑问让我们开启真正的企 ...
- 重点人口动态管控轨迹分析系统开发,可视化大数据平台建设
重点人口动态管控轨迹分析系统开发,可视化大数据平台建设 重点人口动态管控轨迹分析系统的可视化及辅助决策功能可以为重点人口动态管控提供强有力的支持,能够有效地利用各种警力.信息和资源等,为提升公安部门预 ...
- 哈尔滨3D可视化数字孪生工厂,三维可视化大数据平台,智慧工厂VR虚拟仿真系统,大屏可视化展示系统
哈尔滨3D可视化数字孪生工厂,三维可视化大数据平台,智慧工厂VR虚拟仿真系统,大屏可视化展示系统.数字孪生的概念近年来逐渐进入大家的视野,它是指利用数字模型.传感器数据.系统数据等将物理世界在虚拟空间 ...
最新文章
- c语言五子棋linux,在linux下ubuntu的五子棋游戏c语言代码.doc
- 101个MySQL的调节和优化的Tips
- Linux学习之CentOS(三十)--SELinux安全系统基础
- Tomcat 7 'javax.el.ELException' 的解决方式(failed to parse the expression [${xxx}])
- SMB MS17-010 利用(CVE-2017-0144 )
- python中变量和函数的区别_python中带下划线的变量和函数的意义
- ubuntu测试键盘工具_强势霸榜GitHub,微软最强命令行工具发布引爆技术圈
- ffmpeg输出yuv的函数堆栈(h264)
- msconfig蓝屏_电脑msconfig改动后蓝屏怎么修复
- HDLBITS 练习 卡诺图化简部分
- 在上海创业的日子之寻找办公室
- Linux中光盘使用的文件类型,Linux光盘行动之制作光盘
- 结构化数据和半结构化数据和非结构化数据
- wordpress搜索引擎蜘蛛统计插件SEO
- AMBA总线概述——AHB、APB、AXI
- 计算机视觉四大基本任务介绍
- 【Windows】取消某种格式文件默认的打开方式
- python中sha1 md5等用法
- QFile创建文件以及递归文件删除文件
- 计算机应用基础0006 20春在线作业2,【奥鹏】[四川大学]《计算机应用基础0006》20春在线作业1...
热门文章
- 大连27中学距离计算机学校多远,热烈祝贺大连市第二十四中学被中国计算机(CCF)学会授予首批NOI培训基地...
- 仿金蝶电商ERP进销存系统V3多仓库带扫描php网页版B/S进销存系统
- Linux语音助手——Lewis小精灵(简陋版小度小度)
- 微信小程序,发放优惠券,领取卡券添加到卡包
- 新媒体运营如何寻找热点新闻,有哪些有效手段?
- 谷歌浏览器右下角弹窗提醒
- Android编写一个视频监控App
- ESP32的flash_download_tool工具使用问题记录
- 解析各大电子商务网站订单号的生成方式
- 越狱第三季--完结篇