在ECharts Tooltip中使用Angular ng-container的问题求助

你遇到的核心问题有两个：

1. ECharts 会自动将 tooltip formatter 返回的 HTML 属性名转为小写，导致 Angular 指令（如*ngIf、*ngTemplateOutlet）的大小写格式被破坏，Angular 无法识别这些指令。
2. 更关键的是：ECharts 渲染的 tooltip 是纯静态 HTML，Angular 不会对这段动态生成的字符串做模板编译，所以即使大小写正确，Angular 的指令、组件也无法生效。

另外你代码里还有一个小问题：直接拼接${paramData}会把对象转成[object Object]，这也会导致数据传递失败，但这不是核心问题。

放弃让 ECharts 渲染 tooltip，改用 Angular 完全接管 tooltip 的内容和位置控制，步骤如下：

1. 配置ECharts关闭默认Tooltip触发 #

在图表配置中关闭默认的 tooltip 触发逻辑，同时监听鼠标事件来控制自定义 tooltip：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import * as echarts from 'echarts';
import { ChartBarComponent } from './chart-bar/chart-bar.component';

@Component({
  selector: 'app-your-chart',
  templateUrl: './your-chart.component.html',
  styleUrls: ['./your-chart.component.css']
})
export class YourChartComponent implements OnInit {
  @ViewChild('chartContainer') chartContainer!: ElementRef;
  @ViewChild('templateHistogram') templateHistogram!: any;
  @ViewChild('customTooltip') customTooltip!: ElementRef;
  private chartInstance!: echarts.ECharts;
  currentHistogramData!: any[]; // 用于传递给tooltip模板的数据

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

  private initChart(): void {
    this.chartInstance = echarts.init(this.chartContainer.nativeElement);
    const option = {
      // 你的其他图表配置（如series、xAxis等）
      tooltip: {
        triggerOn: 'none' // 关闭ECharts默认的tooltip触发
      }
    };
    this.chartInstance.setOption(option);

    // 监听鼠标移入图表元素事件
    this.chartInstance.on('mouseover', (params: any) => {
      this.showCustomTooltip(params);
    });

    // 监听鼠标移出事件
    this.chartInstance.on('mouseout', () => {
      this.hideCustomTooltip();
    });
  }

  private showCustomTooltip(params: any): void {
    // 把ECharts的params转换成直方图需要的格式（你的转换逻辑）
    this.currentHistogramData = this.transformParams(params);
    
    // 计算tooltip应该出现的位置（转换ECharts坐标系到页面坐标系）
    const tooltipPos = this.chartInstance.convertToPixel(
      { seriesIndex: params.seriesIndex }, 
      params.data
    );
    
    // 设置自定义tooltip的位置和显示状态
    const tooltipEl = this.customTooltip.nativeElement;
    tooltipEl.style.left = `${tooltipPos[0] + 15}px`;
    tooltipEl.style.top = `${tooltipPos[1] + 15}px`;
    tooltipEl.style.display = 'block';
  }

  private hideCustomTooltip(): void {
    this.customTooltip.nativeElement.style.display = 'none';
  }

  private transformParams(params: any): any[] {
    // 这里写你的参数转换逻辑，比如从params中提取需要的字段
    return params.data;
  }
}

2. 在组件HTML中定义自定义Tooltip和模板 #

<!-- ECharts容器 -->
<div #chartContainer style="width: 100%; height: 400px;"></div>

<!-- 自定义Tooltip容器：默认隐藏，绝对定位 -->
<div #customTooltip 
     style="position: absolute; display: none; background: #fff; border: 1px solid #ddd; padding: 8px; border-radius: 4px; z-index: 9999;">
  <ng-container *ngTemplateOutlet="templateHistogram; context: {paramData: currentHistogramData}"></ng-container>
</div>

<!-- 预定义的直方图模板 -->
<ng-template #templateHistogram let-myData="paramData">
  <app-chart-bar [histogramData]="myData"></app-chart-bar>
</ng-template>

如果一定要用 formatter 返回 HTML，可通过动态创建组件并提取其HTML字符串实现，但这种方式会丢失Angular的事件绑定和变更检测，仅适合纯展示场景：

// 组件构造函数注入依赖
constructor(
  private cfr: ComponentFactoryResolver,
  private injector: Injector
) {}

// 在ECharts配置中使用
tooltip: {
  formatter: async (params: any) => {
    const paramData = this.transformParams(params);
    // 创建组件工厂
    const factory = this.cfr.resolveComponentFactory(ChartBarComponent);
    // 实例化组件
    const componentRef = factory.create(this.injector);
    // 传入数据
    componentRef.instance.histogramData = paramData;
    // 触发变更检测
    componentRef.changeDetectorRef.detectChanges();
    // 获取组件的HTML字符串
    const html = componentRef.location.nativeElement.outerHTML;
    // 销毁组件避免内存泄漏
    componentRef.destroy();
    return html;
  }
}

注意：需要在模块的entryComponents中声明ChartBarComponent（Angular 9+可省略，但建议加上）。

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