<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