echarts vue 酷炫图_GitHub - athena-flow/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和...

前言

一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue项目构建、指令的灵活运用、组件封装、组件之间通信，使内部图表组件库可实现自由替换和组合。

项目中部分前端库采用外部CDN引入，可以减少打包文件体积，加快页面渲染。

可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽和1080px高是最佳效果。

目前制作数据可视化大屏，前端比较流行的第三方库有：Echarts(百度)，AntV(阿里)，Highcharts(国外公司)，D3.js(国外公司)。

如果感觉还不错的话，老铁们是不是赏个★Star鼓励一哈，后续会持续更新和优化，也期待大家的交流。

效果截图

登录界面

首页酷屏统计图

公司品牌介绍

项目架构

│ 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

生产环境打包

npm run build

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