ApexCharts实现每日/每周数据切换及双系列配置问题

问题根源梳理 #

1. 数据未完整存储：当前两个API请求独立执行，每次仅传递单份数据到图表处理方法，且_prepareEnergyDailyChartData的第二个参数从未被传入，导致周度数据无法被正确加载
2. 切换逻辑语法错误：HTML中*ngIf的判断写法错误，[energyTypeSelector].value应为energyTypeSelector.value，且对比值未加引号（daily/weekly是字符串）
3. 系列配置命名错误：代码中误将weekly系列命名为monthly，与按钮的weekly值不匹配

修正方案 #

1. 调整API调用与数据存储

将两个API请求并行执行，确保同时获取日度和周度数据后再初始化图表：

// 并行获取日度和周度数据
forkJoin([
  this._lookupService.getEnergyGraphDaily(s),
  this._lookupService.getEnergyGraphWeekly(s)
]).subscribe({
  next: ([energyDaily, energyWeekly]) => {
    console.log("日度数据", energyDaily);
    console.log("周度数据", energyWeekly);
    // 保存两份数据供后续切换使用
    this.energyDaily = energyDaily;
    this.energyWeekly = energyWeekly;
    // 传入完整数据初始化图表
    this._prepareEnergyChartData(energyDaily, energyWeekly);
    this._changeDetectorRef.detectChanges();
  },
  error: (err) => {
    console.log("数据请求失败", err);
  }
});

2. 修正图表配置方法

修改方法参数，正确配置日度/周度系列，移除错误的monthly命名：

private _prepareEnergyChartData(energyDaily: any, energyWeekly: any): void {
  // 按切换键值存储对应系列数据
  const chartSeries = {
    'daily': [
      {
        'name': 'Energy',
        'data': energyDaily.dataPLTS
      }
    ],
    'weekly': [
      {
        'name': 'Energy',
        'data': energyWeekly.dataPLTS
      }
    ]
  };

  console.log("系列数据", chartSeries);

  this.chartEnergy = {
    chart: {
      animations: { enabled: false },
      fontFamily: 'inherit',
      foreColor: 'inherit',
      height: '100%',
      type: 'area',
      toolbar: { show: false },
      zoom: { enabled: false }
    },
    colors: ['#64748B'],
    dataLabels: { enabled: false },
    fill: {
      colors: ['#64748B'],
      opacity: 0.5
    },
    grid: {
      show: false,
      padding: { bottom: -40, left: 0, right: 0 }
    },
    legend: { show: false },
    // 保存所有系列，供切换时选择
    series: chartSeries,
    stroke: { curve: 'smooth', width: 2 },
    tooltip: {
      followCursor: true,
      theme: 'dark',
      x: { format: 'MMM dd, yyyy' }
    },
    xaxis: {
      axisBorder: { show: false },
      labels: {
        offsetY: -20,
        rotate: 0,
        style: { colors: 'var(--fuse-text-secondary)' },
        datetimeUTC: false
      },
      tickAmount: 3,
      tooltip: { enabled: false },
      type: 'datetime'
    },
    yaxis: {
      labels: { style: { colors: 'var(--fuse-text-secondary)' } },
      show: false,
      tickAmount: 5
    }
  };
}

3. 简化HTML图表切换逻辑

只保留一个图表组件，通过按钮组的选中值动态切换数据源，修正语法错误：

<!-- 切换按钮组 -->
<div class="ml-2">
  <mat-button-toggle-group class="hidden sm:inline-flex border-none space-x-1" 
                           value="daily" #energyTypeSelector="matButtonToggleGroup">
    <mat-button-toggle class="px-1.5 rounded-full overflow-hidden border-none font-medium" value="daily">Daily</mat-button-toggle>
    <mat-button-toggle class="px-1.5 rounded-full overflow-hidden border-none font-medium" value="weekly">Weekly</mat-button-toggle>
  </mat-button-toggle-group>
  <div class="sm:hidden">
    <button mat-icon-button [matMenuTriggerFor]="energyMenu">
      <mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
    </button>
    <mat-menu #energyMenu="matMenu">
      <!-- 绑定菜单点击事件，更新按钮组值 -->
      <button mat-menu-item (click)="energyTypeSelector.value = 'daily'">Daily</button>
      <button mat-menu-item (click)="energyTypeSelector.value = 'weekly'">Weekly</button>
    </mat-menu>
  </div>
</div>

<!-- 统计卡片部分保持不变 -->
<div class="flex items-start mt-6 mx-6">
  <!-- 原统计卡片代码 -->
</div>

<!-- 图表区域：仅保留一个图表组件，动态切换series -->
<div class="flex flex-col flex-auto h-80 mt-3">
  <apx-chart 
    class="flex-auto w-full h-full" 
    [chart]="chartEnergy.chart" 
    [colors]="chartEnergy.colors"
    [dataLabels]="chartEnergy.dataLabels" 
    [grid]="chartEnergy.grid" 
    [legend]="chartEnergy.legend"
    <!-- 根据选中值动态加载对应系列 -->
    [series]="chartEnergy.series[energyTypeSelector.value]" 
    [stroke]="chartEnergy.stroke"
    [tooltip]="chartEnergy.tooltip" 
    [xaxis]="chartEnergy.xaxis" 
    [yaxis]="chartEnergy.yaxis">
  </apx-chart>
</div>

额外优化点 #

• 移除了重复的图表组件，减少DOM冗余
• 移动端菜单按钮添加了点击事件，确保能同步更新按钮组的选中值
• 调整了颜色配置（单系列无需两种颜色）

内容的提问来源于stack exchange，提问作者Jansen Su