echarts中的提示框组件tooltip自定义icon图片

代码环境

“echarts”: “^5.4.3”,
“vue”: “2.x”,

想要的效果

三. 实现代码

父组件Option = {}

Option = {
 tooltip: {
            trigger: "axis",
            borderWidth: "0", //边框宽度设置1
            borderColor: "none", //设置边框颜色
            padding: 16,
            textStyle: {
              fontSize: 12,
              color: "rgba(209, 212, 220, 1)", //设置文字颜色
            },
            tooltip: {
              show: true,
            },
            extraCssText: "background:rgba(61, 63, 71, 1);",
            className: "custom-tooltip-box",
            formatter: (params) => {
              let bybitIcon = `<div class='custom-tooltip-style'></div>`;
              let binanceIcon = `<div class='bbb'></div>`; //要加的图片设置不同class类名
 
              let aaa = this.kmb(params[0].data);
              let bbb = this.kmb(params[1].data);
 
              return `
                <div>
                  <div style="border-bottom: 1px solid rgba(151, 151, 151, 0.2); padding-bottom: 8px; margin-bottom: 8px">
                   $${params[0].name}
                  </div>
                  <div style="border-bottom: 1px solid rgba(151, 151, 151, 0.2);padding-bottom: 8px; margin-bottom: 8px；height:100%">
                    <div style="display: flex;flex-direction: row;"><span style="width: 93px;display: flex;flex-direction: row;">${bybitIcon} ${params[0].seriesName}:</span> ${aaa}</div>
                    <div style="display: flex;flex-direction: row;"><span style="width: 93px;;display: flex;flex-direction: row;">${binanceIcon} ${params[1].seriesName}:</span> ${bbb}</div>
                    <div style="display: flex;flex-direction: row;"><span style="width: 93px;display: flex;flex-direction: row;">${bybitIcon} ${params[0].seriesName}:</span> ${aaa}</div>
                    <div style="display: flex;flex-direction: row; "><span style="width: 93px;;display: flex;flex-direction: row;">${binanceIcon} ${params[1].seriesName}:</span> ${bbb}</div>
                  </div>
                  <div >
                  <div style="margin-top: 8px;display: flex;flex-direction: row; "><span style="width: 93px;;display: flex;flex-direction: row;">总计:</span> ${aaa}</div>
                  </div>
                </div>
              `;
            },
          },
  }
          
<style lang="scss" >
//给父盒子清除默认已有样式
.custom-tooltip-box {
  .custom-tooltip-style {
    width: 16px;
    height: 16px;
    background: url("~@/assets/images/icons/apple-safari.png");
    background-size: cover;
  }
  .bbb{
    background: url(".....");
    background-size: cover;
  }
  //不同类名这边各自图片路径
  .ccc{
    
  }
}
</style>复制