echart修改自定义内容

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;
          }
        },

猜你喜欢

转载自blog.csdn.net/lilongwei4321/article/details/81947121