echarts legend太多且每個legend名稱太長,導致legend與圖表grid重疊問題臨時解決方案

<template>
	<ve-line
       :legend-visible="true"
       :toolbox="toolbox"
       :after-config="afterConfig"
       :data-empty="dataEmpty"
       :loading="loading" />
</template>

<script>
	const LINE_NUM_EACH_ROW = 3;  //圖例中每行顯示的線條數目;
	const DEFAULT_LINE_NUM = 6;  //採用默認grid.top值的默認線條數目;
	const DEFAULT_GRID_TOP_PECENTAGE = 18; //默認的grid.top百分比(整數部分);
	const DELTA_GRID_TOP_PECENTAGE = 9;  //超出默認線條數時的grid.top百分比增量(整數部分);
	const MAX_GRID_TOP_PECENTAGE = 50; //最大的grid.top百分比(整數部分);

	afterConfig = options => {
        let beforeLegend: any = options.legend.data;
        let afterLegend: any = this.adjustLegend(beforeLegend);
        let afterGridTop: any = this.setGridTop(afterLegend);
        options.legend.data = afterLegend;
        options.grid.top = afterGridTop;
        return options;
    }
    
/**
     * 調整圖例顯示樣式
     * @params array 需要調整的圖例
     * @return array
     */
    adjustLegend ($beforeLegend) {
        // 圖例太多時,Echarts文檔註明【特殊字符串 ''(空字符串)或者 '\n' (換行字符串)用於圖例的換行。】
        let $afterLegend = [];
        let $index = 0;
        let $len = $beforeLegend.length;
        for ( let $i = 0; $i < $len; $i ++) {
            if (($index + 1) % (LINE_NUM_EACH_ROW + 1) === 0) {
                $afterLegend[$index] = '';
                $index ++;
                $afterLegend[$index] = $beforeLegend[$i];
            } else {
                $afterLegend[$index] = $beforeLegend[$i];
            }
            $index++;
        }
        return $afterLegend;
    }
    /**
     * 設置grid.top值
     * @params array 需要調整的圖例
     * @return string
     */
    setGridTop($arrLegend) {
        let $len = $arrLegend.length;
        // 如果圖例太多,需要調整option中的grid.top值才能避免重疊
        let $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;
        }
        let $gridTop = `${$topInt}%`;

        return $gridTop;
    }
</script>

轉自:https://blog.csdn.net/doleria/article/details/52503763

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章