在配置echarts的时候,需要自定义悬浮框的样式,可以在formatter里面直接返回一段html代码
tooltip:{
show:true,
backgroundColor: "transparent",
borderColor: "transparent",
confine: true,
// showContent:false,
formatter: (resp)=>{
//插入html片段
let frame = `
<div class="MapDialog position-abs background-fill"
style="width: 339px;height: 208px;background-image: url('${DialogBack}');transform: translate(-45%,-120%)"
>
<div class="md-content" style="width: 100%;height: 195px">
<div class="md-title flexr-mbt" style="height: 37px;padding: 0 10px 0 16px;">
<p class="md-title-text font-16" style="width: 14em;font-weight: blod;text-overflow: ellipsis;color: #fff">
${resp.name}
</p>
<div
class="md-close background-fill"
style="background-image: url('${CloseIcon}');width: 16px;height: 16px;cursor: pointer;"
></div>
</div>
<div class="md-container flexr-cm"
style="height: 195px;transform: translateY(-20%)"
>
<div class="md-icon-line flexr-cm"
style=" width: 50px;height: 27px;"
>
<div class="md-icon position-abs background-fill"
style="background-image: url('${ContentIcon}');width: 28px;height: 27px;"
></div>
<div class="md-line position-abs"
style="width: 50px;height: 17px;border-right: 1px solid #95bae3;"
></div>
</div>
<div class="md-desc"
style="margin-left: 15px;"
>
<div class="md-desc-text font-14"
style="color: #00ccff;"
>
商品数量:
</div>
<div class="md-desc-number font-38 font-dines"
style="font-style: italic;color: #fff;margin-top: 10px"
>
${resp.value[2]}
</div>
</div>
</div>
</div>
</div>`
return frame
}
}