## 前言

* 一个基于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
  - https://juejin.cn/post/6979147635156320286
- 地图商家
  - https://www.gpsov.com/cn2/index.php
  - http://www.tuxingis.com/locaspace.html
  - https://www.openstreetmap.org/#map=4/69.62/-74.90
  - https://www.arcgis.com/apps/mapviewer/index.html
  - http://lbs.tianditu.gov.cn/server/MapService.html
  - https://www.cnblogs.com/tuxingis/p/15419703.html
- 增加清晰度
  - 使用地图下载器下载 google 地图瓦片图数据并操作成 wmts 服务给高德引用
  - http://lbs.zjkelan.com/JSAPIBook/chapter2/3.1.html
  - https://www.cnblogs.com/amadoGrowers/p/14949540.html
  - https://blog.51cto.com/bigemap/4980388
  - https://blog.51cto.com/bigemap/2883864
  - https://juejin.cn/post/7213189189303107643

- [（上）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                 // 登录界面
```
