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

你可能感兴趣的:(其它)