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; //采用默认值的默认线条数目；
const DEFAULT_GRID_TOP_PECENTAGE = 18; //默认的百分比（整数部分）；
const DELTA_GRID_TOP_PECENTAGE = 9; //超出默认线条数时的百分比增量（整数部分）；
const MAX_GRID_TOP_PECENTAGE = 50; //最大的百分比（整数部分）；
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;
}
/**
* 设置值
* @params array 需要调整的图例
* @return string
*/
setGridTop($arrLegend) {
let $len = $arrLegend.length;
// 如果图例太多，需要调整option中的值才能避免重叠
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>