echart的tooltip自定义换行

自定义换行,内容很长的时候

tooltip : {
    trigger: 'axis',
    axisPointer : {            // 坐标轴指示器,坐标轴触发有效
        type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
    },
    textStyle:{
    	align:'left'
    },
    formatter:function (params) {
        var newParamsName ='';
        var title = '';
        var titleLength = params[0].name.length;
        var rowCount = 20;
        var rowNumber = Math.ceil(titleLength / rowCount);
        if(titleLength>rowCount){
          for (var i = 0; i < rowNumber; i++) {
               var tempStr = "";
               var start = i * rowCount;
               var end = start + rowCount;
               if (i == rowNumber - 1) {
                   tempStr = params[0].name.substring(start, titleLength);
               } else {
                   tempStr = params[0].name.substring(start, end) + "</br>";
               }
               newParamsName += tempStr;
            }
      }else {
        newParamsName = params[0].name;
      }
      //返回小圆圈和后面的数量       return (newParamsName+"</br>"             +"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:"+params[0]['color']+"'></span>"+             "汇总:"+params[0]['value']); },

 效果:

猜你喜欢

转载自www.cnblogs.com/wgl0126/p/9188406.html