图表配置表增加分析指标字段_图表中映射的指标字段名称-优快云博客

本文链接：https://blog.youkuaiyun.com/z1941563559/article/details/146803532

在设计报表图表配置表时，为存储 同比、环比 这类分析指标，建议通过以下方式定义字段结构和命名：

一、字段设计方案

// 配置表示例结构
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"
      }
    }
  ]
}