echarts自定义tooltip显示内容

最新推荐文章于 2024-05-23 14:49:48 发布

XMINGX

最新推荐文章于 2024-05-23 14:49:48 发布

阅读量906

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/u013095204/article/details/125087888

版权

默认展示效果
在这里插入图片描述
修改后的展示效果

tooltip: {
    show: true, //是否展示
    trigger: 'axis', //触发类型，坐标轴触发
    // 自定义修改悬浮内容
    formatter: function (params) {
      var result = params[0].name;
      params.forEach(function (item) {
        result += '<br/>';
        result +=
        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
        item.color +
        '"></span>';
        if (item.seriesIndex == 0) {
          result += '红色人数：' + '<b>' + item.value + '</b>';
        } else {
          result += '蓝色人数：' + '<b>' + item.value + '</b>';
        }
      });
      return result;
    }
  },