图表配置方案：同时展示当前数值、同比数值、同比增长率

以下是针对 同时展示当前数值、同比数值、同比增长率 的完整配置方案，包含数据查询、图表配置、指标计算逻辑：

---

一、数据结构与查询配置

1. 原始数据格式要求

// 示例数据（需包含以下字段）
const rawData = [
  {
    period: '2024-01',    // 当前周期（月份/季度）
    current: 150,         // 当前数值
    lastYear: 120         // 去年同期数值（用于计算同比）
  },
  // ...其他周期数据
];

2. 查询参数配置 (queryOptions)

{
  "queryOptions": {
    "dataset": "sales_data",    // 数据源名称
    "fields": [
      "period",                // 时间周期字段
      "current",               // 当前值字段
      "lastYear"              // 去年同期值字段
    ],
    "filters": {              // 查询筛选条件
      "year": 2024
    }
  }
}

---

二、指标配置 (analysisMetrics)

{
  "analysisMetrics": [
    // 当前数值（作为主指标，通常已包含在基础series中）
    // 同比数值（绝对值）
    {
      "type": "YoY_absolute",  // 自定义类型标识
      "displayName": "同比数值",
      "enabled": true,
      "params": {
        "precision": 0,        // 数值精度（0表示整数）
        "unit": ""             // 单位（无）
      },
      "style": {
        "chartType": "bar",    // 用柱状图展示
        "color": "#36a2eb"     // 与主指标颜色区分
      }
    },
    // 同比增长率（相对值）
    {
      "type": "YoY_rate",
      "displayName": "同比增长率",
      "enabled": true,
      "params": {
        "precision": 1,        // 保留1位小数
        "unit": "%"            // 百分比
      },
      "style": {
        "chartType": "line",   // 用折线图展示
        "color": "#4bc0c0",    // 颜色区分
        "yAxisPosition": "right" // 右侧次坐标轴
      }
    }
  ]
}

---

三、ECharts 配置实现

1. 核心配置结构

{
  // 基础配置（坐标轴、图例等）
  xAxis: { type: 'category', data: periods },
  yAxis: [
    { // 主Y轴（左侧，用于绝对数值）
      type: 'value',
      name: '销售额（万元）'
    },
    { // 次Y轴（右侧，用于比率）
      type: 'value',
      name: '增长率',
      axisLabel: { formatter: '{value}%' }
    }
  ],
  // 数据系列
  series: [
    // 当前数值（主指标）
    {
      type: 'bar',
      name: '当前数值',
      data: currentValues,
      itemStyle: { color: '#ff9f40' }
    },
    // 同比数值（副柱状图）
    {
      type: 'bar',
      name: '同比数值',
      data: lastYearValues,
      itemStyle: { color: '#36a2eb' }
    },
    // 同比增长率（折线图）
    {
      type: 'line',
      name: '同比增长率',
      yAxisIndex: 1, // 绑定右侧Y轴
      data: growthRates,
      lineStyle: { color: '#4bc0c0' },
      label: { 
        show: true, 
        formatter: '{@y}%' // 显示百分比标签
      }
    }
  ]
}

---

四、关键实现逻辑

1. 数据计算逻辑

// 计算同比增长率
const calculateGrowth = (data) => {
  return data.map(item => {
    const growthRate = item.lastYear === 0 
      ? 0 
      : ((item.current - item.lastYear) / item.lastYear * 100);
    return {
      ...item,
      growthRate: Number(growthRate.toFixed(1)) // 保留1位小数
    };
  });
};

// 生成ECharts所需数据
const processedData = calculateGrowth(rawData);
const periods = processedData.map(d => d.period);
const currentValues = processedData.map(d => d.current);
const lastYearValues = processedData.map(d => d.lastYear);
const growthRates = processedData.map(d => d.growthRate);

2. Tooltip 集成

tooltip: {
  trigger: 'axis',
  formatter: (params) => {
    const current = params.find(p => p.seriesName === '当前数值');
    const yoyValue = params.find(p => p.seriesName === '同比数值');
    const yoyRate = params.find(p => p.seriesName === '同比增长率');
    
    return `
      ${current.axisValue}<br>
      ${current.marker} ${current.seriesName}: ${current.value}万<br>
      ${yoyValue.marker} ${yoyValue.seriesName}: ${yoyValue.value}万<br>
      ${yoyRate.marker} ${yoyRate.seriesName}: ${yoyRate.value}%
    `;
  }
}

---

五、可视化效果优化

1. 图表布局

grid: {
  top: 80,     // 留出标题空间
  bottom: 100, // 留出图例空间
  containLabel: true
},
legend: {
  data: ['当前数值', '同比数值', '同比增长率'],
  bottom: 20
}

2. 差异化样式

指标	样式策略	作用
当前数值	橙色粗柱状图（width: 35%）	突出显示主要数据
同比数值	蓝色细柱状图（width: 25%）	对比显示历史同期绝对值
增长率	绿色虚线折线图 + 数值标签	清晰呈现趋势变化

---

六、扩展配置建议

1. 动态单位切换：在 params 中添加 unit 字段，支持切换万元/亿元等单位
2. 异常值处理：当去年同期数据为0时，显示 “–” 代替无意义的百分比
3. 阈值标记：当增长率超过设定阈值时，显示警示图标

   label: {
     formatter: ({ value }) => {
       return value > 50 ? `${value}% ▲` : 
              value < -10 ? `${value}% ▼` : 
              `${value}%`;
     }
   }
   

此方案通过清晰的指标分离和视觉编码，可同时呈现 绝对值对比 与 相对变化趋势，满足业务分析的多维度需求。