快捷導(dǎo)航

echarts折線圖legend太多與圖重疊處理辦法

更新時(shí)間：2024年02月20日 09:46:02 作者：liaoxiuqing

ECharts折線圖的Legend（圖例）用于展示每條折線所對(duì)應(yīng)的數(shù)據(jù)系列名稱,下面這篇文章主要給大家介紹了關(guān)于echarts折線圖legend太多與圖重疊的處理辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

getGridTop(legendData) {
    varDEFAULT_LINE_NUM = 10; // 采用默認(rèn)grid.top值的默認(rèn)線條數(shù)目；
    var DEFAULT_GRID_TOP_PECENTAGE = 18; // 默認(rèn)的grid.top百分比（整數(shù)部分）；
    var DELTA_GRID_TOP_PECENTAGE = 5; // 超出默認(rèn)線條數(shù)時(shí)的grid.top百分比增量（整數(shù)部分）；
    var MAX_GRID_TOP_PECENTAGE = 20; // 最大的grid.top百分比（整數(shù)部分）；
    var topInt;
    var gridTop;
    var len = legendData.length;
    // 如果圖例太多，需要調(diào)整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 過(guò)多，一行顯示個(gè)數(shù)控制
if(this.lincData.length>0){
    this.lincData.forEach((el,index) => {
        let data= Object.values(el)
        let name = data.shift()
        //一行顯示個(gè)數(shù)控制
        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',
        // 第三步：處理鼠標(biāo)放在圖片內(nèi)容因?yàn)檫^(guò)多顯示不全
        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
     },
	 ....
}

處理前：