echarts tooltip不要显示阴影

echarts yekong

echarts 在使用tooltip显示自定义html时,会出现阴影,这时候我们需要去掉阴影效果。这里的阴影是用shadowColor来进行控制的。

echarts tooltip不要显示阴影

关键代码

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>
`;
  }
},
喜欢