echarts legend 重疊 （轉載）

  

解決方案：
  1. 調整option中的grid.top值才能避免重疊；（能夠設置定製，也能夠定義了一個計算公式）

 2. 文檔註明【特殊字符串 ''（空字符串）或者 '\n' (換行字符串)用於圖例的換行。】

 

轉載來源：http://blog.csdn.net/doleria/article/details/52503763

內容以下：

github地址：Data Visualization

---------------------------------------------------------------------------------------------------------------------------------------

當Echarts報表表頭過多時，雖然Echarts會作自適應，可是因爲圖例文字可能過長等，圖例與圖表線條不免會重疊顯示。以下圖所示：

    參考這篇文章，以及Echarts的官方文檔，得出如下解決方案：

    1. 文檔註明【特殊字符串 ''（空字符串）或者 '\n' (換行字符串)用於圖例的換行。】
    2. 換行後動態調整option中的grid.top值才能避免重疊；（定義了一個計算公式）

 

    在解決這個問題時，用PHP寫了個定製Echarts的類，其中與調整圖例相關的部分以下，僅供參考：

 

<?php

/**
 * Created by PhpStorm.
 * User: liuyuning
 * Date: 2016/8/9
 * Time: 18:59
 */
class Ep_CustomizeEcharts {

    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百分比（整數部分）；


    /**
     * 調整圖例顯示樣式
     * @params array 須要調整的圖例
     * @return array
     */
    public function adjustLegend ($beforeLegend) {
        // 圖例太多時，Echarts文檔註明【特殊字符串 ''（空字符串）或者 '\n' (換行字符串)用於圖例的換行。】
        $afterLegend = array();
        $index = 0;
        $len = count($beforeLegend);
        for ( $i = 0; $i < $len; $i++) {
            if (($index+1)%(self::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
     */
    public function setGridTop($arrLegend) {

        $len = count($arrLegend);

        // 若是圖例太多，須要調整option中的grid.top值才能避免重疊
        $topInt = $len > self::DEFAULT_LINE_NUM ?
            self::DEFAULT_GRID_TOP_PECENTAGE + self::DELTA_GRID_TOP_PECENTAGE
            * (Ceil(($len - self::DEFAULT_LINE_NUM)/self::LINE_NUM_EACH_ROW))
            : self::DEFAULT_GRID_TOP_PECENTAGE;
        if ($topInt >= self::MAX_GRID_TOP_PECENTAGE) {
            $topInt = self::MAX_GRID_TOP_PECENTAGE;
        }
        $gridTop = "$topInt%";

        return $gridTop;
    }

}

 

調整好的效果以下圖所示：

github地址：Data Visualization