echarts 在使用tooltip显示自定义html时,会出现阴影,这时候我们需要去掉阴影效果。这里的阴影是用shadowColor来进行控制的。
关键代码
shadowColor: 'rgba(0, 0, 0, 0)', // 设置阴影颜色为透明
shadowBlur: 0, // 设置阴影模糊度为0,即无阴影
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, 0)', // 设置 tooltip 背景色为透明
borderColor: 'rgba(0, 0, 0, 0)',
opacity: 1,
shadowColor: 'rgba(0, 0, 0, 0)', // 设置阴影颜色为透明
shadowBlur: 0, // 设置阴影模糊度为0,即无阴影
// 使用自定义的 formatter 函数
formatter: function (params) {
// params 是一个包含了当前鼠标悬浮点的所有数据的对象
return `
<div class="tooltipWin">
<h4 class="tooltipTitle">${that.title}次数</h4>
<div class="tooltipDesc">
<div class="line"></div>
<span>${params.name}</span>
<p>${params.value}</p>
</div>
</div>
`;
}
},