Echart设置tooltip: formatter格式

最新推荐文章于 2024-12-14 14:09:04 发布

原创最新推荐文章于 2024-12-14 14:09:04 发布 · 7.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

图表专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在 ECharts 中自定义 tooltip 的显示样式，包括动态改变背景颜色和文字内容，以匹配不同的数据系列，提升图表的可读性和美观度。

修改前

代码：

tooltip: {
  trigger: 'axis',
  formatter: function (params) {
    //console.log(params.length);
    let returnData = "";
    for (let i=0;i<params.length;i++){
      if (params[i].seriesName!=""){
        let indexColor = params[i].color;
        returnData += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:'+ indexColor +'"></span>';
        returnData += params[i].seriesName +":" + params[i].value + "</br>";
      }
    }
    return returnData;
  }
},