如何在有角度的echart标题下添加图标？

Question

如何在echart标题下添加图标？这是我尝试过但无法渲染图标

component.ts 文件代码

 constructor(private sanitizer: DomSanitizer) {}
  
 ngOnInit(){
 this.iconHtml = this.sanitizer.bypassSecurityTrustHtml('<i class="fa fa-chart-bar"></i>');
  this.costByTypeChart();
   }

costByTypeChart(){
   this.typeoptions = {
      title: {
        text: `<div [innerHTML]="iconHtml"></div>`,
        subtext: "Data not loaded yet",
        left: "center",
        top: "center",
        subtextStyle: {
          fontSize: 20,

        }
      },
      yAxis: [],
      series: []
    }
};
}

组件.html

<p-card header="Cost By Type">
<div echarts [options]="typeoptions" [ngStyle]="{width: '100%',height:'100%'}"></div>
</p-card>

o/p 我正在得到

Answer 1

  ngOnInit() {
    this.iconHtml = this.sanitizer.bypassSecurityTrustHtml(
      '<i class="fa fa-chart-bar">test</i>'
    );
    this.costByTypeChart();
  }

  costByTypeChart() {
    this.typeoptions = {
      title: {
        // Add the variable that holds inner HTML
        iconHtml: this.iconHtml,

        // This won't work..
        text: `<div [innerHTML]="iconHtml"></div>`,
        subtext: 'Data not loaded yet',
        left: 'center',
        top: 'center',
        subtextStyle: {
          fontSize: 20,
        },
      },
      yAxis: [],
      series: [],
    };
  }
}

  <!-- What you are trying to do in a child component  -->
  {{ typeoptions.title.text }}

  <!-- What you need to do in a child component -->
  <div [innerHTML]="typeoptions.title.iconHtml">test</div>