agchart/README.md
2026-05-11 09:47:57 +08:00

63 lines
1.5 KiB
Markdown

# 组团趋势图
这是一个基于 `React + AG Charts` 的组团趋势图页面,用来查看不同分类维度下的年度统计趋势,并通过右侧筛选条件联动图表结果。
## 功能
- 左侧展示组团趋势图,支持最低值、最高值、平均值、中位数和数据量切换
- 右侧展示分类树,支持按 `自然地理区位 / 设施类别 / 建设阶段 / 规划形式` 选择节点
- 筛选条件支持 `省市区`,后端会根据 `uf_xzqy` 展开到区级 `id` 后再过滤
- 支持搜索筛选树节点,支持多条件叠加
- 图表空状态会提示当前是否需要先选择右侧分类项
## 技术栈
- React 19
- TypeScript
- Vite
- AG Charts Enterprise
- Bun
## 开发
安装依赖:
```bash
bun install
```
启动开发服务:
```bash
bun run dev
```
构建生产包:
```bash
bun run build
```
本地预览构建结果:
```bash
bun run preview
```
## 接口说明
前端默认请求后端统计接口,当前代码里的地址在 `src/App.tsx``API_BASE_URL`
省市区筛选依赖后端接口返回的 `uf_xzqy` 字典数据,前端会将平铺数据归并为 `省 -> 市 -> 区` 的展示结构。
## 目录
- `src/App.tsx`:主页面逻辑、图表配置、筛选联动
- `src/styles.css`:页面样式
- `dist/`:构建产物
## 备注
- 如果要切换到本地后端,把 `src/App.tsx` 里的 `API_BASE_URL` 改成对应地址即可
- AG Charts 的 license key 已写在代码里,和当前页面绑定