[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8803":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":29,"discoverSource":30},8803,"vueDataV","jackchen0120\u002FvueDataV","jackchen0120","基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。","",null,"Vue",2166,530,25,27,0,2,5,1,30.18,"MIT License",false,"master",true,[],"2026-06-12 02:01:58","# 前言\n\n* 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue项目构建、指令的灵活运用、组件封装、组件之间通信，使内部图表组件库可实现自由替换和组合。\n* 项目中部分前端库采用外部CDN引入，可以减少打包文件体积，加快页面渲染。\n* 可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽和1080px高是最佳效果。\n* 目前制作数据可视化大屏，前端比较流行的第三方库有：Echarts（百度），AntV（阿里），Highcharts（国外公司），D3.js（国外公司）。\n* 如果感觉还不错的话，老铁们是不是赏个★Star鼓励一哈，后续会持续更新和优化，也期待大家的交流。\n\n\n[在线效果演示](https:\u002F\u002Fjackchen0120.github.io\u002FvueDataV\u002F)\n\n## 学习教程分上下篇\n* [（上）Vue+Echarts构建可视化大数据平台实战项目分享](https:\u002F\u002F54web3.cc\u002Fblog\u002Finduction-tutorial\u002Fvue-echarts-prev-section)\n* [（下）Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享](https:\u002F\u002F54web3.cc\u002Fblog\u002Finduction-tutorial\u002Fvue-echarts-next-section)\n\n# 效果截图\n\n## 登录界面\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fjackchen0120\u002FvueDataV\u002Fblob\u002Fmaster\u002Fpublic\u002Fimg\u002Flogin_0.png\" width=\"900\" alt=\"登录界面\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fjackchen0120\u002FvueDataV\u002Fblob\u002Fmaster\u002Fpublic\u002Fimg\u002Flogin_1.png\" width=\"900\" alt=\"登录界面\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fjackchen0120\u002FvueDataV\u002Fblob\u002Fmaster\u002Fpublic\u002Fimg\u002Flogin_2.png\" width=\"900\" alt=\"登录界面\" \u002F>\n\n## 首页酷屏统计图\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fjackchen0120\u002FvueDataV\u002Fblob\u002Fmaster\u002Fpublic\u002Fimg\u002FdataV_1.png\" width=\"900\" alt=\"首页酷屏统计图\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fjackchen0120\u002FvueDataV\u002Fblob\u002Fmaster\u002Fpublic\u002Fimg\u002FdataV_2.png\" width=\"900\" alt=\"首页酷屏统计图\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fjackchen0120\u002FvueDataV\u002Fblob\u002Fmaster\u002Fpublic\u002Fimg\u002FdataV_3.png\" width=\"900\" alt=\"首页酷屏统计图\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fjackchen0120\u002FvueDataV\u002Fblob\u002Fmaster\u002Fpublic\u002Fimg\u002FdataV_4.png\" width=\"900\" alt=\"首页酷屏统计图\" \u002F>\n\n## 公司品牌介绍\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fjackchen0120\u002FvueDataV\u002Fblob\u002Fmaster\u002Fpublic\u002Fimg\u002Fbrand.png\" width=\"900\" alt=\"炫酷展示公司品牌\" \u002F>\n\n\n\n# 项目架构\n```\n│ vue.config.js \u002F\u002F webpack配置 \n├─public\n│ favicon.ico \u002F\u002F ico图标\n│ index.html \u002F\u002F 入口html文件\n└─src\n │ App.vue \u002F\u002F 根组件\n │ main.js \u002F\u002F 程序入口文件\n ├─assets\n │ ├─iconfont \u002F\u002F 引用阿里巴巴矢量图标库 \n │ ├─img \u002F\u002F 存放公共图片文件夹 \n │ ├─js\n │ │ utils.js \u002F\u002F 封装工具类方法\n │ └─styles\n │ │ base.scss \u002F\u002F 基础样式文件\n │ │ common.scss \u002F\u002F 公用样式文件\n │ └─fonts \u002F\u002F 字体库文件 \n ├─components\n │ │ index.js \u002F\u002F 封装组件库\n │ ├─bar3d \u002F\u002F 3D立体柱状图\n │ ├─bgAnimation \u002F\u002F 登录界面背景图动画 \n │ ├─cakeLinkage \u002F\u002F 柱饼组合联动 \n │ ├─circleNesting \u002F\u002F 圆环套圆环 \n │ ├─circleRunway \u002F\u002F 环形跑道图 \n │ ├─colorfulArea \u002F\u002F 多彩轮播面积 \n │ ├─colorfulRadar \u002F\u002F 多彩雷达 \n │ ├─companySummary\n │ │ business.vue \u002F\u002F 业务范围\n │ │ distrbution.vue \u002F\u002F 客户分布\n │ │ history.vue \u002F\u002F 发展历程\n │ │ income.vue \u002F\u002F 营业收入\n │ │ talent.vue \u002F\u002F 人才队伍\n │ │ wordCloud.vue \u002F\u002F 产品热词 \n │ ├─dynamicLine \u002F\u002F 动态轮播折线图 \n │ ├─dynamicList \u002F\u002F 动态列表动画 \n │ ├─flashCloud \u002F\u002F 闪动云 \n │ ├─gauge \u002F\u002F 仪表盘 \n │ ├─modal \u002F\u002F 自定义全局模态框 \n │ ├─pyramid \u002F\u002F 金字塔动画 \n │ ├─pyramidTrend \u002F\u002F 金字塔趋势 \n │ ├─rainbow \u002F\u002F 彩虹轨道图 \n │ ├─ringPie \u002F\u002F 环形饼图 \n │ ├─ringPin \u002F\u002F 环形气泡图 \n │ ├─rotateColorful \u002F\u002F 旋转多彩图 \n │ ├─scanRadius \u002F\u002F 扫描半径图 \n │ ├─scrollArc \u002F\u002F 滚动弧形线 \n │ ├─seamless \u002F\u002F 新闻无缝滚动 \n │ ├─sinan \u002F\u002F 司南排名图 \n │ ├─staffMix \u002F\u002F 人员占比 \n │ ├─szBar \u002F\u002F 双轴柱状图 \n │ ├─toast \n │ │ index.js \u002F\u002F 注册全局消息提示框组件\n │ │ index.vue \u002F\u002F 自定义消息提示框模板\n │ └─waterPolo\n │ index.vue \u002F\u002F 水球图、水波图 \n ├─router\n │ index.js \u002F\u002F 单页面路由注册组件\n ├─store\n │ index.js \u002F\u002F 状态管理仓库未使用到\n └─views\n Brand.vue \u002F\u002F 公司品牌介绍\n Home.vue \u002F\u002F 酷屏首页统计图\n Login.vue \u002F\u002F 登录界面\n```\n\n# 技术栈\n\n- vue2.6\n- echarts4.7\n- axios\n- webpack\n- ES6\n- scss\n- css3\n- jquery\n- iconfont\n\n# 功能模块\n\n- 登录界面抖动\n- 粒子动效\n- 背景图轮播\n- 自定义全局模态框\n- 自定义消息提示框\n- 酷屏首页组件库\n- 各种酷炫小部件\n- 炫酷展示公司品牌\n\n# 下载安装依赖\n\n```\ngit clone https:\u002F\u002Fgithub.com\u002Fjackchen0120\u002FvueDataV.git\ncd vueDataV\n# 建议node版本使用 v12\nnpm install 或 yarn\n```\n\n## 开发模式\n\n```\nnpm run serve 或 yarn serve\n```\n\n运行之后，访问地址：http:\u002F\u002Flocalhost:8081\n\n## 生产环境打包\n\n```\nnpm run build 或 yarn build\n```\n\n#### 获取更多项目实战经验及各种源码资源，请关注作者公众号：懒人码农\n\n\u003Cimg src=\"https:\u002F\u002Fimgconvert.csdnimg.cn\u002FaHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC81LzEzLzE3MjBlM2U0ZmQ5NDZiZDQ?x-oss-process=image\u002Fformat,png\" width=\"430\" alt=\"公众号二维码\" \u002F>\n","vueDataV是一个基于Vue和Echarts构建的数据可视化平台，提供多种酷炫大屏展示模板及组件库。该项目通过灵活的Vue指令运用、组件封装以及组件间通信机制，实现了图表组件的自由替换与组合，并采用外部CDN引入部分前端库以减少打包体积，提升加载速度。它特别适用于需要高性能数据可视化展示的场景，如企业监控中心、业务分析报告等场合。为了获得最佳体验，建议使用谷歌浏览器在1920px*1080px分辨率下查看或开发。此外，项目持续更新实用模板和新颖组件，支持用户根据需求定制化开发。","2026-06-11 03:19:49","top_language"]