Refactor financial chart implementation

README.md

@@ -8,24 +8,38 @@
 
 ## 快速开始
 
-### 1. 启动本地服务器
+首次使用时，在项目根目录安装依赖：
 
 ```bash
-# 方案 A：Python 3（Mac/Linux 自带）
-python3 -m http.server 8899
+pnpm install
+```
 
-# 方案 B：Node.js（需要先安装 Node）
-npx http-server -p 8899
+### 1. 启动开发服务器（支持热更新）
 
-# 方案 C：PHP（Mac 自带）
-php -S localhost:8899
+```bash
+# 方案 A：Vite 开发服务器
+pnpm dev
+
+# 方案 B：直接双击项目根目录的 `.start.command`
+# 脚本会启动 Vite 并自动打开浏览器
 ```
 
 ### 2. 打开浏览器
 
 访问 **http://localhost:8899**。页面左侧选择公司，中间用 Tab 切换分析维度，右侧可跳转到当前分类的图表。
 
-当前 manifest 内登记了 5 张示例图表和 14 张泡泡玛特财报图表：
+修改 `js/` 或 `css/` 后页面会热更新；修改 `manifest.json` 或 `data/**/*.csv` 后页面会自动整页刷新。
+
+需要生成静态发布文件时：
+
+```bash
+pnpm build
+pnpm preview
+```
+
+构建结果位于 `dist/`，其中包含运行所需的 manifest 与 CSV，不包含 `data/ppmt/raw/` 中的原始 PDF/XLSX。
+
+当前 manifest 内登记了 5 张示例图表和 22 张泡泡玛特财报图表：
 
 **示例图表：**
 1. **存货、营收与存货周转天数** — 双柱 + 折线，双 Y 轴
@@ -49,6 +63,8 @@ php -S localhost:8899
 17. **主要 IP 收入占比（2026H1）** — 饼图，右侧图例带收入与占比
 18. **各 IP 半年收入占比（21H1-26H1）** — 归一化堆叠柱状图，看收入结构变迁
 19. **除 THE MONSTERS 外的 IP 收入及同比** — 柱 + 折线双轴，剔掉爆款看其余盘子
+20. **区域渠道分布（2026H1）** — 左右堆叠条形图，对比各区域线上与线下渠道收入
+21. **区域渠道同比增速趋势** — 热力图查看区域 × 渠道的历史同比变化
 
 ### 3. 修改数据
 
@@ -77,6 +93,7 @@ smart-fin-chart/
 ├── data/                   # 数据文件（按公司划分）
 │   ├── demo/
 │   └── ppmt/
+│       └── raw/            # 用户提供的原始 xlsx / PDF
 ├── js/
 │   ├── main.js             # 入口：读取 manifest、渲染、导出 PNG
 │   ├── ui.js               # 三栏 UI 构建
@@ -92,7 +109,7 @@ smart-fin-chart/
 ## 测试
 
 ```bash
-npm test
+pnpm test
 ```
 
 用 ECharts 的 SSR 模式遍历 manifest 中的图表并渲染成 SVG，断言：
@@ -139,7 +156,7 @@ A：
 1. 在 `data/` 下创建新 CSV
 2. 在 `js/charts/` 下创建新 `.js`，从 `theme.js` 取共享配置（`lineSeries()`、`barSeries()`、`standardLegend()`、`periodAxis`），不要手写等价值
 3. 在 `js/charts/index.js` 注册 chart key
-4. 在 `manifest.json` 对应公司与 Tab 中添加图表配置
+4. 在 `manifest.json` 对应公司的 `chartCatalog` 中登记图表配置，再在需要展示的 Tab 的 `chartRefs` 中引用它；概览可直接引用同一图表 ID，无需复制配置
 5. 跑 `node test/regress.mjs <chart-id>`；浏览器检查标签、颜色和脚注
 
 **Q：能改水印文字吗？**  
@@ -152,7 +169,7 @@ A：编辑 `js/theme.js` 的 `PALETTE` 对象，所有图表自动同步。
 
 ## 技术细节
 
-- **ECharts 5.5.1**：从 jsDelivr CDN 加载，无需 npm install
+- **ECharts 5.5.1**：从 jsDelivr CDN 加载，无需额外安装 ECharts
 - **ES6 Modules**：用原生 `<script type="module">`，无构建步骤
 - **Canvas 渲染**：页面用 canvas（性能好），导出时用 ECharts 自带的 `getDataURL` 生成 PNG
 - **响应式**：window resize 时重绘（水印数量跟着画布尺寸变化）