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

Question

这里是代码：

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

Answer 1

• 第一种方法，您可以直接在工具提示的格式化程序功能内使用svg路径。不要忘记在styles.css中添加CSS。绝对可以。

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;
  }
},

请让我知道是否对您有帮助。