17 Star 170 Fork 77

柯基与佩奇 / vue开发大屏展示

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vue大屏展示

  • 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建、指令的灵活运用、组件封装、组件之间通信,使内部图表组件库可实现自由替换和组合。
  • 项目中部分前端库采用外部CDN引入,可以减少打包文件体积,加快页面渲染。
  • 可视化数据大屏展示对前端性能要求高,建议使用谷歌浏览器查看或开发,屏幕尺寸为1920px宽和1080px高是最佳效果。

项目架构

│  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                  // 登录界面
    └─big-screen                      // h5的大屏展示    

技术栈

  • vue2.6
  • echarts4.7
  • axios
  • webpack
  • ES6
  • scss
  • css3
  • jquery
  • iconfont

功能模块

  • 登录界面抖动
  • 粒子动效
  • 背景图轮播
  • 自定义全局模态框
  • 自定义消息提示框
  • 酷屏首页组件库
  • 各种酷炫小部件
  • 炫酷展示公司品牌

空文件

简介

由于公司有大屏,自己想着做个大屏展示系统,这个项目里面主要使用了大量的eachers结合vue来开发大屏展示项目,很丰富,基本满足开发需求,都是都是假数据,通过axios请求数据更新data就可以实现前后端联调。遇到需要实时展示的推荐使用websocket进行真实配合,性能不清楚,主要是两个内容的大屏展示,多的可以自己组装开发。 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
HTML
1
https://gitee.com/wp950820/vue-big-screen.git
git@gitee.com:wp950820/vue-big-screen.git
wp950820
vue-big-screen
vue开发大屏展示
master

搜索帮助