Angular 12 如何在表格可展开行内调用图表组件

实现方案（以ECharts为例，也可替换为任意你熟悉的图表库） #

第一步：安装依赖 #

npm install echarts ngx-echarts

安装完成后在对应业务模块的imports数组中引入NgxEchartsModule即可。

第二步：修改abc.component.ts代码 #

import * as $ from 'jquery';
import 'datatables.net';
import * as echarts from 'echarts'; // 新增导入echarts

@Component({
  selector: 'app-abc',
  templateUrl: './abc.component.html',
  styleUrls: ['./abc.component.scss']
})
export class AbcComponent implements OnInit {
  @ViewChild('dataTable', { static: false })
  table!: { nativeElement: any; };

  dataTable: any;
  agentStatsData: TableData[] = [];

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

  getAllStatsData(): void {
    this.dataService.getStatsData()
      .subscribe((data) => {
        this.agentStatsData = data;
        this.initTableData();
      });
  }

  initTableData() {
    // 新增：绑定原生DOM到dataTable属性
    this.dataTable = $(this.table.nativeElement);
    // 保存组件实例，避免click回调内this指向错误
    const that = this;
    var demoTable = this.dataTable.DataTable({
      "data": this.agentStatsData,
      "columns": [
        { "data": "name" },
        { "data": "type" },
        { "data": "team" },
        { "data": "status" },
        { "data": "totalStudent" },
        { "data": "totalActive" },
        { "data": "totalInActive" }
      ]
    });

    // 行展开功能
    $('.dataTable tr').on('click', function () {
      var tr = this;
      var row = demoTable.row(tr);

      if (row.child.isShown()) {
        // 收起行时销毁图表，避免内存泄漏
        const chartDom = document.getElementById(`chart-${row.data().name}`);
        if(chartDom) {
          echarts.getInstanceByDom(chartDom)?.dispose();
        }
        row.child.hide();
      } else {
        row.child(that.format(row.data())).show();
        // 展开后渲染对应行的图表
        that.renderChart(row.data());
      }
    });
  }

  // 格式化展开行内容，新增图表容器
  format(data: any) {
    // 用数据唯一标识作为图表容器id，避免重复
    return `<div>
      <p>活跃数据：${data.totalActive}</p>
      <p>非活跃数据：${data.totalInActive}</p>
      <p>总计：${data.totalStudent}</p>
      <div id="chart-${data.name}" style="width: 600px;height:300px;"></div>
    </div>`;
  }

  // 新增图表渲染方法
  renderChart(data: any) {
    const chartDom = document.getElementById(`chart-${data.name}`)!;
    const myChart = echarts.init(chartDom);
    // 可根据需求修改图表配置，换成柱状图、折线图等任意类型
    const option = {
      title: {
        text: `${data.name} 学员活跃情况`
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '学员状态',
          type: 'pie',
          radius: '50%',
          data: [
            { value: data.totalActive, name: '活跃' },
            { value: data.totalInActive, name: '非活跃' }
          ]
        }
      ]
    };
    myChart.setOption(option);
    // 可选：适配窗口大小变化
    window.addEventListener('resize', () => myChart.resize());
  }
}

注意事项 #

• 如果你的数据里有唯一id字段，优先用id作为图表id的后缀，避免name重复导致图表渲染错误
• 如果不需要保留数字展示，可直接删除format方法里的p标签，只保留图表容器
• 替换为其他图表库（如Chart.js）逻辑一致：format返回对应库需要的容器DOM，展开后调用对应库的渲染方法即可

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