实现echarts图提示框自定义样式,最重要的是给tooltip加一个自定义class,下面是我写的例子:
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
},
className: "custom-tooltip-box",
formatter: function (params) {
return `<div class='custom-tooltip-style'>
<span>${params[0].name}年</span></br>
<div class="span">
<span>缺材飞机数量:</span>
<span>${params[0].value}</span>
</div>
</div>`;
},
}
::v-deep .custom-tooltip-box {
padding: 0 !important;
border: none !important;
background-color: transparent !important;
// 给子盒子自定义样式
.custom-tooltip-style {
width: 25rem;
min-height: 12rem;
background: url("../../../../assets/images/tooltipBg.webp") no-repeat center
center;
background-size: 100% 100%;
color: #fff;
display: flex;
flex-direction: column;
padding: 1rem 2rem;
font-size: 1.6rem;
.span {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
:last-child {
font-weight: 600;
font-size: 1.8rem;
}
}
}
}
该实例提示框背景是切的图片,内容通过formatter进行配置,样式上通过赋予className并在style标签中编写,实现如下效果:
(该tooltip自定义样式适用于所有的echarts图,如折线图、柱状图、饼图)