vueDataV: 基于Vue + Echarts 构建的数据可视化平台,酷炫大屏展示模板和组件库,持续更新各行各业实用模板和炫酷小组件。

代码拉取完成,页面将自动刷新

扫描微信二维码支付

取消

支付完成

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

1 Star 0 Fork 0

anydev/vueDataV

代码 Issues 0 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

新建文件新建 Diagram 文件

新建子模块

上传文件

分支 29

标签 0

贡献代码

同步代码

创建 Pull Request

了解更多

对比差异通过 Pull Request 同步

同步更新到分支

通过 Pull Request 同步

将会在向当前分支创建一个 Pull
Request,合入后将完成同步

jackchen0120 修复词云图不显示问题 efd818b

62 次提交

docs

public

src

.gitignore

LICENSE

README.md

_config.yml

babel.config.js

package-lock.json

package.json

vue.config.js

yarn.lock

README

MIT

# 前言

* 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建、指令的灵活运用、组件封装、组件之间通信,使内部图表组件库可实现自由替换和组合。
* 项目中部分前端库采用外部CDN引入,可以减少打包文件体积,加快页面渲染。
* 可视化数据大屏展示对前端性能要求高,建议使用谷歌浏览器查看或开发,屏幕尺寸为1920px宽和1080px高是最佳效果。
* 目前制作数据可视化大屏,前端比较流行的第三方库有:Echarts(百度),AntV(阿里),Highcharts(国外公司),D3.js(国外公司)。
* 如果感觉还不错的话,老铁们是不是赏个★Star鼓励一哈,后续会持续更新和优化,也期待大家的交流。

[在线效果演示](https://jackchen0120.github.io/vueDataV/)

## 学习教程分上下篇
* [(上)Vue+Echarts构建可视化大数据平台实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-prev-section)
* [(下)Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-next-section)

# 效果截图

## 登录界面

## 首页酷屏统计图

## 公司品牌介绍

# 项目架构
```
│ 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
# 建议node版本使用 v12
npm install 或 yarn
```

## 开发模式

```
npm run serve 或 yarn serve
```

运行之后,访问地址:http://localhost:8081

## 生产环境打包

```
npm run build 或 yarn build
```

#### 获取更多项目实战经验及各种源码资源,请关注作者公众号:懒人码农

MIT License Copyright (c) 2020 Jack Chen Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.