Tidak Ada Deskripsi

Cooklalala 60898da6ca fix: page3接口对接 1 Minggu lalu
mm c0597b40df fix:接口联调 5 bulan lalu
public b96f730040 fix: page1接口对接 2 minggu lalu
src 60898da6ca fix: page3接口对接 1 Minggu lalu
.eslintrc.js 843858e92b feat: 嵌入地图 5 bulan lalu
.gitignore 1c132a5df1 修复词云图不显示问题 1 tahun lalu
LICENSE 1c132a5df1 修复词云图不显示问题 1 tahun lalu
README.md 012ba73590 feat: 新建电商可视化 1 bulan lalu
_config.yml 1c132a5df1 修复词云图不显示问题 1 tahun lalu
babel.config.js 7772efefae fix: 补充依赖 5 bulan lalu
doc.md 870a07b49e chore: 框架完善 5 bulan lalu
package.json 012ba73590 feat: 新建电商可视化 1 bulan lalu
vue.config.js b96f730040 fix: page1接口对接 2 minggu lalu
yarn.lock 012ba73590 feat: 新建电商可视化 1 bulan lalu

README.md

前言

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

开发

  • 位于 dev 分支
  • 请使用 less 编写样式
  • 技术栈

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

      # 建议 node v14
      
      yarn
      yarn mm
      yarn serve
      
  • 运行之后,访问地址:http://localhost:8081

  • 接口文档 http://127.0.0.1:8100/doc

发布

yarn build

页面

任务

  • 目标 -- 11月25号之前完成页面和模拟接口/数据
  • 分工
    • 模拟接口和数据 -- 肖文华
    • 综合问览 -- 徐云辉
    • 地图 -- 徐云辉
    • 不包含的内容
      • 顶部条
      • 实时统计中的目标完成率表
    • 种植分析 -- 肖文华
    • 不包含的内容
      • 本月移栽数量趋势
      • 本年移栽数据趋势
    • 种植分析详情 -- 肖文华
    • 不包含的内容
      • 本月移栽数量趋势
      • 本年移栽数据趋势

仅供参考

项目架构

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

    │  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                 // 登录界面