# vue开发大屏展示 **Repository Path**: wp950820/vue-big-screen ## Basic Information - **Project Name**: vue开发大屏展示 - **Description**: 由于公司有大屏，自己想着做个大屏展示系统，这个项目里面主要使用了大量的eachers结合vue来开发大屏展示项目，很丰富，基本满足开发需求，都是都是假数据，通过axios请求数据更新data就可以实现前后端联调。遇到需要实时展示的推荐使用websocket进行真实配合，性能不清楚，主要是两个内容的大屏展示，多的可以自己组装开发。 - **Primary Language**: HTML - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 173 - **Forks**: 78 - **Created**: 2020-08-14 - **Last Updated**: 2025-08-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## 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 # 功能模块 * 登录界面抖动 * 粒子动效 * 背景图轮播 * 自定义全局模态框 * 自定义消息提示框 * 酷屏首页组件库 * 各种酷炫小部件 * 炫酷展示公司品牌