这是代码:
list.component.html
<ng-template #uploadIcon>
<i nz-icon nzType="upload" nzTheme="outline"></i>
</ng-template>
list.component.ts
@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/>';
}
}
}
}
我想在这里做的是在工具提示中显示图标。 但我得到了输出。 [对象对象] [在此处输入图片描述] 1
答案 0 :(得分:0)
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985"
}
},
formatter: function(param: any) {
let res = param[0].name + "<br/>";
for (let x = 0; x < param.length; x++) {
res += `<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M15.475,6.692l-4.084-4.083C11.32,2.538,11.223,2.5,11.125,2.5h-6c-0.413,0-0.75,0.337-0.75,0.75v13.5c0,0.412,0.337,0.75,0.75,0.75h9.75c0.412,0,0.75-0.338,0.75-0.75V6.94C15.609,6.839,15.554,6.771,15.475,6.692 M11.5,3.779l2.843,2.846H11.5V3.779z M14.875,16.75h-9.75V3.25h5.625V7c0,0.206,0.168,0.375,0.375,0.375h3.75V16.75z"></path>
</svg>` + ' ' + param[x].seriesName + ': ' + Math.abs(param[x].data) + '<br/>'
}
return res;
}
},
/* Add this css into styles.css */
.svg-icon {
width: 1em;
height: 1em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #fff;
}
.svg-icon circle {
stroke: #fff;
stroke-width: 2;
}
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985"
}
},
formatter: function(param: any) {
let res = param[0].name + "<br/>";
for (let x = 0; x < param.length; x++) {
res += `<img src="your image source here" />` + ' ' + param[x].seriesName + ': ' + Math.abs(param[x].data) + '<br/>'
}
return res;
}
},
请告诉我它是否对您有帮助。