echarts如何在tooltip中显示图标

Question

here's the code:

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/>';
          }
        }
}

}

what I want to do here is to display the icon in the tooltip. but I'm getting on the output. [object Object] [enter image description here] 1

Answer 1

• First method you can use svg path directly inside the formatter function of tooltip. Dont forget to add css in styles.css. It will definitely work.

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

• second is you can using image tags right inside the formatter function, you can check if it works or not. for example:

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

Please let me know if it helps you.