The credit-bi-react from gittig11

credit-bi-react's Introduction

韭菜盒子数据大屏（WIP）

项目 Fork 于 hzzly/credit-bi-react，减少重复没必要的开发工作。专注于图表设计和数据爬取展示。欢迎PR共建

觉得没挑战的，还有个大的方向（Low-Code），搞大屏拖拽生成编辑器。Serverless 做数据源接口，一个数据源就是一个function，负责爬取各种数据。大屏编辑器统计图组件可设置选择数据源，最后预览即可见大屏效果。

Setup

# install dependencies
yarn install

# serve with hot reload at localhost:8586
yarn start

技术选型

React 全家桶（React-Router、React-Redux、React Hooks）
Webpack 编译打包
Echarts 图表组件
Grid 网格布局

项目结构

项目结构如下：

├── src
│   ├── assets // 资源目录
│   ├── components // 公共组件目录
│   │   ├── Card // Card组件
│   │   ├── Charts // 图表组件目录
│   │   │   ├── Bar // 柱状图
│   │   │   ├── ChinaMap // **地图
│   │   │   ├── Funnel // 漏斗图
│   │   │   ├── Line // 折线图
│   │   │   ├── Pie // 饼图
│   │   │   └── lib // 基础图表组件
│   │   ├── ScrollNumber // 滚动数字组件
│   │   └── SvgIcon // Icon组件
│   ├── global.scss
│   ├── index.js
│   ├── pages // 分块结构目录
│   ├── router // 路由
│   ├── store
│   │   ├── actions
│   │   ├── index.js
│   │   ├── reducers
│   │   ├── sagas
│   │   └── types.js
│   └── utils
│       ├── genChartData.js
│       ├── genMapData.js
│       ├── socket.js
│       └── util.js