echarts折线图过多，legend堆叠，提示框显示不完全（自定义提示框）

文中使用的关于echart的配置具体用法可以查看文档https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-jqyw2elc.html
文中的测试是基于echart官方网站进行修改的https://echarts.apache.org/examples/zh/editor.html?c=line-stack

使用echart可视化折线图时，当数据过多时出现一下两个问题：

1. legengd显示位置不美观，堆叠在一起
   
2. 鼠标触发提示框（tooltip)的显示太长被遮挡
   

• 对于第一个问题（legengd重叠在一起），将legend分行显示，每行显示一定的条目。
  echart中使legend分行需要在分行位置的字符为""或者为\n
  每行显示6条数据，代码修改如下

var da =[];
for(var i=0;i<30;i++){
    if (i%6==0) {
        da.push("")
    }
    da.push("a"+i);
}

显示修过如下：
注意到，legend与图片位置重叠了，于是需要修改legend位置，使用到了一下函数。

// echart 修改grid.top值
function getGridTop(legendData) {

    var DEFAULT_LINE_NUM = 6; // 采用默认grid.top值的默认线条数目；
    var DEFAULT_GRID_TOP_PECENTAGE = 18; // 默认的grid.top百分比（整数部分）；
    var DELTA_GRID_TOP_PECENTAGE = 5; // 超出默认线条数时的grid.top百分比增量（整数部分）；
    var MAX_GRID_TOP_PECENTAGE = 20; // 最大的grid.top百分比（整数部分）；

    var topInt;
    var gridTop;
    var len = legendData.length;

    // 如果图例太多，需要调整option中的grid.top值才能避免重叠
    topInt = len > DEFAULT_LINE_NUM
        ? DEFAULT_GRID_TOP_PECENTAGE
        + DELTA_GRID_TOP_PECENTAGE * (Math.ceil((len - DEFAULT_LINE_NUM) / LINE_NUM_EACH_ROW))
        : DEFAULT_GRID_TOP_PECENTAGE;

    if (topInt >= MAX_GRID_TOP_PECENTAGE) {
        topInt = MAX_GRID_TOP_PECENTAGE;
    }

    gridTop = topInt + "%";

    return gridTop;
}

效果如下

• 对于第二个问题,修改每行显示多个数据，tooltip代码修改代码如下

tooltip: {
     trigger: 'axis',
     formatter:function(params){
         let res = params[0].axisValueLabel;

         function getHtml(param){
             let str = '<div style="float: left"><span style="background: '+param.color+'; width: 11px; height: 11px; border-radius: 11px;float: left; margin: 5px 3px;"></span>'+
             param.seriesName+':'+param.data+'&emsp;&emsp;</div>';
             return str;
         }

         let flag=false;
         res += '<div style="clear: both">';
         for (let i = 0; i < params.length; i++) {
             res += getHtml(params[i]);
             if (params.length>11 && i%2==1){
                 res += '</div><div style="clear: both">';
             }
             if (params.length <=11){
                 res += '</div><div style="clear: both">';
             }
         }
         res += "</div>";
         return res;
     }
 },

效果如下

完整代码如下：

var LINE_NUM_EACH_ROW = 6; // 图例中每行显示的线条数目；
// echart 调整图例显示样式 {图例太多时，Echarts文档注明: 特殊字符串 ''（空字符串）或者 '\n' (换行字符串)用于图例的换行。}
function  adjustLegendData(legendData) {
    processLegend=[];
    // 调整图例显示样式 {图例太多时，Echarts文档注明: 特殊字符串 ''（空字符串）或者 '\n' (换行字符串)用于图例的换行。}
    for (let i = 0,j=0; i < legendData.length; i++,j++) {
        // 设置一行显示6个图标
        if (i%LINE_NUM_EACH_ROW==0){
            processLegend.push("");
        }
        processLegend.push(legendData[i]);
    }
    return processLegend;
}

// echart 修改grid.top值
function getGridTop(legendData) {

    var DEFAULT_LINE_NUM = 6; // 采用默认grid.top值的默认线条数目；
    var DEFAULT_GRID_TOP_PECENTAGE = 18; // 默认的grid.top百分比（整数部分）；
    var DELTA_GRID_TOP_PECENTAGE = 5; // 超出默认线条数时的grid.top百分比增量（整数部分）；
    var MAX_GRID_TOP_PECENTAGE = 20; // 最大的grid.top百分比（整数部分）；

    var topInt;
    var gridTop;
    var len = legendData.length;

    // 如果图例太多，需要调整option中的grid.top值才能避免重叠
    topInt = len > DEFAULT_LINE_NUM
        ? DEFAULT_GRID_TOP_PECENTAGE
        + DELTA_GRID_TOP_PECENTAGE * (Math.ceil((len - DEFAULT_LINE_NUM) / LINE_NUM_EACH_ROW))
        : DEFAULT_GRID_TOP_PECENTAGE;

    if (topInt >= MAX_GRID_TOP_PECENTAGE) {
        topInt = MAX_GRID_TOP_PECENTAGE;
    }

    gridTop = topInt + "%";

    return gridTop;
}

// 生成legend数据
var datalegend =[];
for(var i=0;i<30;i++){
    datalegend.push("a"+i);
}

//生成series数据
var dataseries = [];
for(var i=0;i<30;i++){
    dataseries.push({
        name: 'a'+i,
        type: 'line',
        stack: '总量',
        data: [120, 132, 101, 134, 90, 230, 210]
    });
}

// 修改grid.top的值
var gridtop = getGridTop(datalegend)

//使数据分行显示
datalegend = adjustLegendData(datalegend);

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis',
        formatter:function(params){
            let res = params[0].axisValueLabel;

            function getHtml(param){
                let str = '<div style="float: left"><span style="background: '+param.color+'; width: 11px; height: 11px; border-radius: 11px;float: left; margin: 5px 3px;"></span>'+
                param.seriesName+':'+param.data+'&emsp;&emsp;</div>';
                return str;
            }

            let flag=false;
            res += '<div style="clear: both">';
            for (let i = 0; i < params.length; i++) {
                res += getHtml(params[i]);
                if (params.length>11 && i%2==1){
                    res += '</div><div style="clear: both">';
                }
                if (params.length <=11){
                    res += '</div><div style="clear: both">';
                }
            }
            res += "</div>";
            return res;
        }
    },
    legend: {
        data: datalegend
    },
    grid: {
        top:gridtop,
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series:dataseries
};