## 前言 * 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue项目构建、指令的灵活运用、组件封装、组件之间通信，使内部图表组件库可实现自由替换和组合。 * 项目中部分前端库采用外部CDN引入，可以减少打包文件体积，加快页面渲染。 * 可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽和1080px高是最佳效果。 * 目前制作数据可视化大屏，前端比较流行的第三方库有：Echarts（百度），AntV（阿里），Highcharts（国外公司），D3.js（国外公司）。 ## 开发 - 位于 dev 分支 - 请使用 less 编写样式 - 技术栈 - vue2.6 - echarts4.7 - axios - webpack - ES6 - scss - css3 - jquery - iconfont ``` sh # 建议 node v14 yarn yarn mm yarn serve ``` - 运行之后，访问地址：http://localhost:8081 - 接口文档 http://127.0.0.1:8100/doc ## 发布 ``` sh yarn build ``` ## 页面 - 综合问览 http://localhost:8081/#/page1 - 种植分析 http://localhost:8081/#/page2 - 种植分析详情 http://localhost:8081/#/page3 - 登录页 http://localhost:8081 - 首页 http://localhost:8081/#/home - 公司介绍 http://localhost:8081/#/brand ## 任务 - 目标 -- 11月25号之前完成页面和模拟接口/数据 - 分工 - 模拟接口和数据 -- 肖文华 - 综合问览 -- 徐云辉 - 地图 -- 徐云辉 - 不包含的内容 - 顶部条 - 实时统计中的目标完成率表 - 种植分析 -- 肖文华 - 不包含的内容 - 本月移栽数量趋势 - 本年移栽数据趋势 - 种植分析详情 -- 肖文华 - 不包含的内容 - 本月移栽数量趋势 - 本年移栽数据趋势 ## 仅供参考 - datav http://datav.jiaminghi.com/guide/ - echarts https://echarts.apache.org/examples/zh/index.html - 首页 http://localhost:8081/#/home - 公司介绍 http://localhost:8081/#/brand - 图表示例集 - https://echarts.apache.org/examples/zh/index.html - http://chart.majh.top/ - https://echarts.zhangmuchen.top/#/index - https://madeapie.com/#/examples - 功能示例 - http://www.htmleaf.com/Demo/201508082380.html - https://echarts.zhangmuchen.top/#/detail?cid=3e3af-6681-01d4-9e8ae-3475649d - https://echarts.zhangmuchen.top/#/detail?cid=ef808-0753-f28d-b9dbf-857232b3 - https://echarts.zhangmuchen.top/#/detail?cid=cc8db-77e6-1b92-a8b88-e8026e2a - https://echarts.zhangmuchen.top/#/detail?cid=xomSYW64ff - https://echarts.zhangmuchen.top/#/detail?cid=f5937-38f8-ac10-b0dd5-e36bd25c - https://echarts.zhangmuchen.top/#/detail?cid=5e921-123f-ee83-8f550-d21ebe25 - https://echarts.zhangmuchen.top/#/detail?cid=xcyIqcHZDe - https://echarts.zhangmuchen.top/#/detail?cid=c1732-f317-0e53-a4a00-82e8f168 - https://echarts.zhangmuchen.top/#/detail?cid=xQbO0oOmdg - https://echarts.zhangmuchen.top/#/detail?cid=xjHG-ufzOD - https://echarts.zhangmuchen.top/#/detail?cid=xbmSYGhnhK - https://echarts.zhangmuchen.top/#/detail?cid=xMQNuAkUYq - 数据下载 - https://github.com/TangSY/echarts-map-demo - https://datav.aliyun.com/portal/school/atlas/area_selector - https://geojson.cn/ - 图标 - https://icon-sets.iconify.design/?query=weather - 天气 - https://lbs.amap.com/api/webservice/guide/api/weatherinfo - 地图引入 - https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue - https://lbs.amap.com/demo/list/js-api-v2 - 坐标获取 https://lbs.gaode.com/console/show/picker - https://lbs.amap.com/demo/loca-api/demos/districtlayer/loca_dist_getstatus - [（上）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 // 登录界面 ```