在設計報表圖表配置表時，為存儲 同比、環比 這類分析指標，建議通過以下方式定義字段結構和命名：
一、字段設計方案
// 配置表示例結構
interface ChartConfig {id: string; // 唯一標識name: string; // 圖表名稱queryOptions: object; // 數據查詢參數echartOptions: object; // ECharts 配置analysisMetrics: Metric[]; // 新增：分析指標配置（同比、環比等）
}
字段名稱建議
| 字段名 | 類型 | 說明 |
|---|---|---|
analysisMetrics | Metric[] | 推薦命名：明確表示“分析指標”，覆蓋同比、環比等多種類型 |
comparisonMetrics | Metric[] | 備選命名：強調“對比”特性，但可能不涵蓋非對比類指標（如累計值） |
二、指標項結構定義（Metric）
interface Metric {type: "YoY" | "MoM" | "QoQ" | "custom"; // 指標類型（必填）displayName?: string; // 顯示名稱（如"同比增長率"）enabled: boolean; // 是否啟用該指標params?: { // 計算參數（可選）basePeriod?: string; // 對比基準周期（如"2023-01"）precision?: number; // 小數精度（默認2）unit?: "%" | "x"; // 單位（默認百分比）};// 可擴展字段// style?: object; // 可視化樣式（如顏色、圖表類型）// formula?: string; // 自定義計算公式（高級場景）
}
三、配置示例
1. 簡單場景（僅啟用同比環比）
{id: "sales_chart_001",name: "銷售額趨勢",analysisMetrics: [{ type: "YoY", displayName: "同比增長率",enabled: true,params: { precision: 1 }},{ type: "MoM", displayName: "環比增長率",enabled: true}]
}
2. 高級場景（自定義基準周期）
{id: "user_growth_002",name: "用戶增長分析",analysisMetrics: [{type: "custom",displayName: "較年初增長率",enabled: true,params: {basePeriod: "2024-01", // 指定對比基準為2024年1月unit: "%"}}]
}
四、關聯數據處理
1. **與 queryOptions 的聯動
通過 analysisMetrics 動態生成查詢參數：
// 根據指標類型自動追加查詢字段
if (analysisMetrics.some(m => m.type === "YoY")) {queryOptions.fields.push("last_year_value");
}
2. **與 echartOptions 的集成
在圖表中渲染指標（如副Y軸或Tooltip）：
// 自動生成副Y軸配置
if (analysisMetrics.length > 0) {echartOptions.yAxis.push({type: "value",name: "增長率",axisLabel: { formatter: "{value}%" }});
}// 在Tooltip中顯示指標值
echartOptions.tooltip.formatter = (params) => {const metricsText = params.filter(p => p.seriesType === 'line') // 假設增長率為折線圖.map(p => `${p.seriesName}: ${p.value}%`).join("<br/>");return `${params[0].name}<br/>${metricsText}`;
};
五、擴展性建議
-
類型擴展：
預留custom類型，支持未來新增指標（如WoW周環比、YTD年初至今累計）：type MetricType = "YoY" | "MoM" | "QoQ" | "WoW" | "YTD" | "custom"; -
計算邏輯分離：
在后端或數據層實現指標計算，避免在前端配置中嵌入復雜公式。 -
可視化控制：
可增加style字段控制指標在圖表中的呈現方式：interface Metric {// ...style?: {chartType?: "line" | "bar"; // 渲染為折線圖或柱狀圖color?: string; // 顏色覆蓋position?: "left" | "right"; // Y軸位置}; }
六、完整配置表示例
{id: "revenue_analysis_003",name: "營收多維分析",queryOptions: {dataset: "monthly_sales",filters: { year: 2024 },fields: ["month", "revenue"]},echartOptions: { /* 原始ECharts配置 */ },analysisMetrics: [{type: "YoY",displayName: "同比",enabled: true,params: { precision: 1 }},{type: "MoM",displayName: "環比",enabled: true,style: {chartType: "line",color: "#ff6b6b",position: "right"}}]
}
通過這種設計，您的配置表可以：
- 清晰區分不同分析指標類型
- 靈活控制指標的計算與展示
- 無縫銜接數據查詢與圖表渲染
- 輕松擴展新增指標類型
操作列表)
