146 lines
6.5 KiB
Markdown
146 lines
6.5 KiB
Markdown
# 前言
|
||
|
||
* 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue项目构建、指令的灵活运用、组件封装、组件之间通信，使内部图表组件库可实现自由替换和组合。
|
||
* 项目中部分前端库采用外部CDN引入，可以减少打包文件体积，加快页面渲染。
|
||
* 可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽和1080px高是最佳效果。
|
||
* 目前制作数据可视化大屏，前端比较流行的第三方库有：Echarts（百度），AntV（阿里），Highcharts（国外公司），D3.js（国外公司）。
|
||
* 如果感觉还不错的话，老铁们是不是赏个★Star鼓励一哈，后续会持续更新和优化，也期待大家的交流。
|
||
|
||
|
||
[在线效果演示](https://jackchen0120.github.io/vueDataV/)
|
||
|
||
## 学习教程分上下篇
|
||
* [（上）Vue+Echarts构建可视化大数据平台实战项目分享](https://juejin.cn/post/6844904158181457933)
|
||
* [（下）Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享](https://juejin.cn/post/6845166890449371149)
|
||
|
||
# 效果截图
|
||
|
||
## 登录界面
|
||
|
||
<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/login_0.png" width="900" alt="登录界面" />
|
||
<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/login_1.png" width="900" alt="登录界面" />
|
||
<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/login_2.png" width="900" alt="登录界面" />
|
||
|
||
## 首页酷屏统计图
|
||
|
||
<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/dataV_1.png" width="900" alt="首页酷屏统计图" />
|
||
<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/dataV_2.png" width="900" alt="首页酷屏统计图" />
|
||
<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/dataV_3.png" width="900" alt="首页酷屏统计图" />
|
||
<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/dataV_4.png" width="900" alt="首页酷屏统计图" />
|
||
|
||
## 公司品牌介绍
|
||
|
||
<img src="https://github.com/jackchen0120/vueDataV/blob/master/public/img/brand.png" width="900" alt="炫酷展示公司品牌" />
|
||
|
||
|
||
|
||
# 项目架构
|
||
```
|
||
│ 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 // 多彩雷达
|
||
│ ├─companySummary
|
||
│ │ business.vue // 业务范围
|
||
│ │ distrbution.vue // 客户分布
|
||
│ │ history.vue // 发展历程
|
||
│ │ income.vue // 营业收入
|
||
│ │ talent.vue // 人才队伍
|
||
│ │ wordCloud.vue // 产品热词
|
||
│ ├─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
|
||
Brand.vue // 公司品牌介绍
|
||
Home.vue // 酷屏首页统计图
|
||
Login.vue // 登录界面
|
||
```
|
||
|
||
|
||
# 技术栈
|
||
* vue2.6
|
||
* echarts4.7
|
||
* axios
|
||
* webpack
|
||
* ES6
|
||
* scss
|
||
* css3
|
||
* jquery
|
||
* iconfont
|
||
|
||
# 功能模块
|
||
* 登录界面抖动
|
||
* 粒子动效
|
||
* 背景图轮播
|
||
* 自定义全局模态框
|
||
* 自定义消息提示框
|
||
* 酷屏首页组件库
|
||
* 各种酷炫小部件
|
||
* 炫酷展示公司品牌
|
||
|
||
# 下载安装依赖
|
||
```
|
||
git clone https://github.com/jackchen0120/vueDataV.git
|
||
cd vueDataV
|
||
npm install 或 yarn
|
||
```
|
||
|
||
## 开发模式
|
||
```
|
||
npm run serve
|
||
```
|
||
运行之后，访问地址：http://localhost:8081
|
||
|
||
## 生产环境打包
|
||
```
|
||
npm run build
|
||
```
|
||
|
||
#### 获取更多项目实战经验及各种源码资源，请关注作者公众号：懒人码农
|
||
|
||
<img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC81LzEzLzE3MjBlM2U0ZmQ5NDZiZDQ?x-oss-process=image/format,png" width="430" alt="公众号二维码" />
|