echarts图表如何自定义鼠标悬浮样式

 样式调整

//   formatter: '{a}: {b}<br />{c}: {d}: {e}'
formatter: function (params) {
  // <i style="display:inline-block;border-radius:50%;width:4px;height:4px;background-color: #0ECB81;"></i>
  // ${console.log(params[0])}
  return `<div style="min-width:208px">
        <p>${params[0].name}</p>
        <p style="padding:2px 0;display: flex;justify-content: space-between;align-items: center;">
        <span style="display: flex;align-items: center;"><i style="display:inline-block;border-radius:50%;width:4px;height:4px;background-color: #0ECB81;margin-right:6px;"></i>
          当日收益率:</span>
        <span style='${
          params[0].data.value >= 0 ? 'color:#0ECB81' : 'color:#E35561'
        }'>
        ${params[0].data.value > 0 ? '+' : ''}
        ${params[0].data.value} USDT
        </span>
        </p>
    </div>`;
}

要自定义鼠标悬浮样式，可以使用 echarts 的 tooltip 组件和 formatter 函数来实现。具体步骤如下：

1.在图表的 option 中添加 tooltip 组件，并设置 trigger 为 'item' 或者 'axis'。

option = {
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      // 返回自定义的 tooltip 格式
    }
  },
  // 其他配置项
}

2.在 formatter 函数中，获取到鼠标悬浮时的数据信息，然后根据需要自定义 tooltip 的内容和样式。

formatter: function(params) {
  var tooltipHtml = '<div class="tooltip">' + params.seriesName + '</div>';
  tooltipHtml += '<div class="tooltip-label">' + params.name + '</div>';
  tooltipHtml += '<div class="tooltip-value">' + params.value + '</div>';
  return tooltipHtml;
}

3.在自定义的样式文件中，添加相应的 CSS 样式。

.tooltip {
  background-color: #FFF;
  border: 1px solid #CCC;
  padding: 10px;
  font-size: 14px;
}

.tooltip-label {
  font-weight: bold;
  margin-bottom: 5px;
}

.tooltip-value {
  color: #666;
}

这样就可以自定义鼠标悬浮样式了。