Javascript 如何在工具提示中显示图标

代码如下：

list.component.html

列表.组件.ts

@ViewChild（'uploadIcon'）uploadIcon:TemplateRef

第一种方法可以直接在tooltip的formatter函数中使用svg路径。别忘了在styles.css中添加css。这肯定会奏效的


工具提示：{
触发器：“轴”，
轴指针：{
类型：“交叉”，
标签：{
背景颜色：“6a7985”
}
},
格式化程序：函数（参数：任意）{
设res=param[0]。name+“
”；
for（设x=0；x
}
返回res；
}
}，
/*将此css添加到styles.css中*/
.svg图标{
宽度：1米；
高度：1米；
}
.svg图标路径，
.svg图标多边形，
.svg图标矩形{
填充：#fff；
}
.svg图标圈{
冲程：#fff；
笔画宽度：2；
}
你能为此创建一个stackblitz吗？我在ngZone图标方面遇到了一些问题，所以我使用了标准的环形材质图标。我正在添加我的代码。当我运行代码时，您的代码出现错误。您能在stackblitz上创建吗？似乎上述方法不起作用。我正在用2个策略更新我的代码。请使用这个stackblitz：你是如何调整图标大小的，因为当我在我的项目中应用它时，它太大了
<ng-template #uploadIcon>
  <i nz-icon nzType="upload" nzTheme="outline"></i>
</ng-template>

 @ViewChild('uploadIcon') uploadIcon: TemplateRef<any>;
lineChart() {

    const _this = this;
    tooltip: {
        trigger: 'axis',
        axisPointer: {
          animation: false
        },
        backgroundColor: 'rgba(245, 245, 245, 0.8)',
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
          color: '#000'
        },
        extraCssText: 'width: 250px',
        formatter: function (param: any) {
          let res = param[0].name + '<br/>';
          for (let x = 0; x < param.length; x++) {
            res += _this.uploadIcon + ' ' + param[x].seriesName + ': ' + Math.abs(param[x].data) + ' Mbit/s<br/>';
          }
        }
}

}