ECharts折线图图例过多导致重叠的解决方案

作者：阿沐

时间：2026-11-01

本文介绍ECharts折线图中图例过多导致与图表区域重叠的解决方法。通过动态计算并调整Grid的Top值，以及控制图例每行显示数量，有效避免视觉遮挡。包含相关代码实现与前后对比效果。

文章目录

问题现象与解决思路

getGridTop(legendData) {
    varDEFAULT_LINE_NUM = 10; // 采用默认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) / 10))
        : DEFAULT_GRID_TOP_PECENTAGE;
    if (topInt >= MAX_GRID_TOP_PECENTAGE) {
        topInt = MAX_GRID_TOP_PECENTAGE;
    }
    gridTop = topInt + "%";
    return gridTop;
},

代码实现与效果对比

echarts 代码
//第一步：处理 legend 过多，一行显示个数控制
if(this.lincData.length>0){
    this.lincData.forEach((el,index) => {
        let data= Object.values(el)
        let name = data.shift()
        //一行显示个数控制
        if(index%10==0){
            legendname.push("") //分行
        }
        legendname.push(name)

        series.push(
            {
                name: name,
                type: 'line',
                stack: 'Total',
                data: data
            }
        )
    });
}

let gridtop = this.getGridTop(legendname)
let option = {
	......
	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: legendname
	 },
	 //第二步：处理legendname与图重叠
	 grid: {
         top:gridtop,
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
     },
	 ....
}

处理前的图表状态如图[[a0]]所示。

问题现象与解决思路