Angular中使用HttpClient将JSON读取至数组（ECharts场景）

嘿，作为刚接触Angular和ECharts的新手，这种把JSON数据拆分到对应数组的需求其实非常普遍，我来一步步带你搞定整个流程！

第一步：确保HttpClient模块已导入 #

首先要确认你的AppModule里已经导入了HttpClientModule，这是Angular发起HTTP请求的基础，新手很容易漏掉这一步：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 导入模块

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule], // 添加到imports数组
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第二步：定义数据接口（类型安全） #

为了让代码更清晰、避免类型错误，最好先定义一个接口匹配你的JSON数据结构。这里分两种常见情况：

情况1：JSON是包含单个数据项的数组 #

如果你的JSON是类似这样的结构（每个对象包含label、data、tooltip字段）：

[
  {"label": "周一", "data": 120, "tooltip": "周一销售额：120元"},
  {"label": "周二", "data": 200, "tooltip": "周二销售额：200元"}
]

对应的接口可以这样写：

// 可以放在组件文件里，或者单独的interfaces.ts文件中
interface ChartItem {
  label: string;
  data: number;
  tooltip: string;
}

情况2：JSON顶层直接包含三个数组 #

如果你的JSON本身就是拆分好的三个数组：

{
  "labels": ["周一", "周二", "周三"],
  "data": [120, 200, 150],
  "tooltips": ["周一销售额120", "周二销售额200", "周三销售额150"]
}

对应的接口就是：

interface ChartResponse {
  labels: string[];
  data: number[];
  tooltips: string[];
}

第三步：创建数据服务获取JSON #

Angular推荐用服务处理数据请求，这样代码更易维护。我们创建一个ChartDataService：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
// 根据你的情况导入对应的接口
import { ChartItem } from './app.component'; // 或者ChartResponse

@Injectable({
  providedIn: 'root'
})
export class ChartDataService {
  constructor(private http: HttpClient) { }

  // 如果是情况1，返回Observable<ChartItem[]>
  getChartData(): Observable<ChartItem[]> {
    // 这里可以是本地JSON文件路径，也可以是后端API接口地址
    return this.http.get<ChartItem[]>('/assets/chart-data.json');
  }

  // 如果是情况2，返回Observable<ChartResponse>
  // getChartData(): Observable<ChartResponse> {
  //   return this.http.get<ChartResponse>('/assets/chart-data.json');
  // }
}

第四步：在组件中订阅数据并拆分到数组 #

接下来在你的组件里，注入服务、订阅数据，然后把数据拆分到三个目标数组：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ChartDataService } from './chart-data.service';
import { ChartItem } from './app.component'; // 或者ChartResponse
import * as echarts from 'echarts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  // 定义三个用于ECharts的数组
  labels: string[] = [];
  dataValues: number[] = [];
  tooltips: string[] = [];
  chartInstance: echarts.ECharts | null = null;

  constructor(private chartDataService: ChartDataService) { }

  ngOnInit(): void {
    this.fetchAndSplitData();
  }

  private fetchAndSplitData(): void {
    this.chartDataService.getChartData().subscribe({
      next: (data) => {
        // 处理情况1：遍历数据项填充数组
        if (Array.isArray(data)) {
          data.forEach(item => {
            this.labels.push(item.label);
            this.dataValues.push(item.data);
            this.tooltips.push(item.tooltip);
          });
        } 
        // 处理情况2：直接赋值数组
        else {
          this.labels = data.labels;
          this.dataValues = data.data;
          this.tooltips = data.tooltips;
        }
        // 数据准备好后初始化ECharts
        this.initECharts();
      },
      error: (err) => {
        console.error('获取数据失败，请检查路径或接口:', err);
      }
    });
  }

  private initECharts(): void {
    const chartDom = document.getElementById('chart-container');
    if (!chartDom) return;
    
    this.chartInstance = echarts.init(chartDom);
    // 配置ECharts，直接使用我们拆分好的数组
    const option = {
      tooltip: {
        // 自定义tooltip内容，用我们的tooltips数组
        formatter: (params: any) => this.tooltips[params.dataIndex]
      },
      xAxis: {
        type: 'category',
        data: this.labels // X轴标签用labels数组
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.dataValues, // 图表数据用dataValues数组
          type: 'bar' // 这里用柱状图，你可以改成折线图等其他类型
        }
      ]
    };

    this.chartInstance.setOption(option);
    // 添加窗口 resize 监听，让图表自适应
    window.addEventListener('resize', () => this.chartInstance?.resize());
  }

  ngOnDestroy(): void {
    // 组件销毁时销毁ECharts实例，避免内存泄漏
    this.chartInstance?.dispose();
    window.removeEventListener('resize', () => this.chartInstance?.resize());
  }
}

第五步：组件模板添加图表容器 #

在你的组件模板（比如app.component.html）里添加一个用于渲染ECharts的DOM容器：

<div id="chart-container" style="width: 600px; height: 400px;"></div>

一些注意事项 #

• 确保你的JSON文件路径正确，如果放在assets目录下，Angular默认会把这个目录打包进去，无需额外配置。
• 记得先安装ECharts：npm install echarts
• 组件销毁时一定要销毁ECharts实例，避免内存泄漏，上面的代码已经包含了这部分逻辑。

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