分组切换折线图

通过 Tab 切换展示不同数据组的核心指标与基准对比。选中组以品牌色高亮呈现，非选中组退至背景作为参照。

数据组 A - 核心指标

数据组 A - 基准

数据组 B - 核心指标

数据组 B - 基准

当前峰值

数据组 A 核心指标

平均基准

数据组 A 基准值

增长趋势

+--%

环比上月

设计原理

01. 注意力聚焦

选中组使用高饱和度品牌色（#00D4AA / #F59E0B），非选中组采用36%透明度灰色（#3E3F54）。符合视觉刺激从边缘系统到前额叶皮层的认知处理路径。

02. 背景参照保留

置灰的非选中组仍保持40%透明度可见，提供全时序上下文参照。用户可直观对比当前关注组与历史其他组的相对位置。

核心实现代码

// Tab 切换控制
const activeGroup = 'A'; // 'A' | 'B'

// 动态颜色配置
color: activeGroup === 'A' 
    ? ['#00D4AA', '#F59E0B', '#3E3F54', '#3E3F54']
    : ['#3E3F54', '#3E3F54', '#4ECDC4', '#FF6B6B'],
    
// 动态线宽
lineWidth: activeGroup === 'A'
    ? d => d.includes('A') ? 2.5 : 1.5
    : d => d.includes('B') ? 2.5 : 1.5