echart修改自定义内容

最新推荐文章于 2025-02-06 10:15:59 发布

原创最新推荐文章于 2025-02-06 10:15:59 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echart自定义提示框 #echarts提示信息

本文介绍了如何在ECharts中使用formatter函数来自定义提示框的内容，特别是当trigger设置为axis时，如何处理回调中的多个对象信息。

1.自定义提示内容

tooltip提示框中有formatter内容格式器：{string}（Template） | {Function}，支持异步回调，因trigger设置为axis所以回调有多个对象

tooltip : {
          trigger: 'axis',
          formatter: function (params){   //自定义提示框
            var startTime = params[0].name;
            var endTime = null;
            var time = parseInt(params[0].name.split(':')[0]);
            if(time == 23){
              endTime = '00:00';
            } else {
              time = time + 1;
              endTime = time > 9? `${time}:00` : `0${time}:00`;
            }
            var htmlStr ='<div>';
            htmlStr += startTime + '~' + endTime + '<br/>';//x轴的名称
          
            // //为了保证和原来的效果一样，这里自己实现了一个点的效果
            for (var i = 0; i < params.length; i++){
              htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+params[i].color+';"></span>' + params[i].seriesName + '：'+params[i].value + '<br/>';
            }
            htmlStr += '</div>';
            
            return htmlStr;
          }
        },