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的類，其中與調整圖例相關的部分如下，僅供參考：

1. <?php  
2.   
3. /** 
4.  * Created by PhpStorm. 
5.  * User: liuyuning 
6.  * Date: 2016/8/9 
7.  * Time: 18:59 
8.  */  
9. class Ep_CustomizeEcharts {  
10.   
11.     const LINE_NUM_EACH_ROW              = 3;  //圖例中每行顯示的線條數目；  
12.     const DEFAULT_LINE_NUM               = 6;  //採用預設grid.top值的預設線條數目；  
13.     const DEFAULT_GRID_TOP_PECENTAGE     = 18; //預設的grid.top百分比（整數部分）；  
14.     const DELTA_GRID_TOP_PECENTAGE       = 9;  //超出預設線條數時的grid.top百分比增量（整數部分）；  
15.     const MAX_GRID_TOP_PECENTAGE         = 50; //最大的grid.top百分比（整數部分）；  
16.   
17.   
18.     /** 
19.      * 調整圖例顯示樣式 
20.      * @params array 需要調整的圖例 
21.      * @return array 
22.      */  
23.     public function adjustLegend ($beforeLegend) {  
24.         // 圖例太多時，Echarts文檔註明【特殊字元串 ''（空字元串）或者 '\n' (換行字元串)用於圖例的換行。】  
25.         $afterLegend = array();  
26.         $index = 0;  
27.         $len = count($beforeLegend);  
28.         for ( $i = 0; $i < $len; $i++) {  
29.             if (($index+1)%(self::LINE_NUM_EACH_ROW + 1) === 0) {  
30.                 $afterLegend[$index] = '';  
31.                 $index++;  
32.                 $afterLegend[$index] = $beforeLegend[$i];  
33.             } else {  
34.                 $afterLegend[$index] = $beforeLegend[$i];  
35.             }  
36.             $index++;  
37.         }  
38.   
39.         return $afterLegend;  
40.     }  
41.   
42.     /** 
43.      * 設置grid.top值 
44.      * @params array 需要調整的圖例 
45.      * @return string 
46.      */  
47.     public function setGridTop($arrLegend) {  
48.   
49.         $len = count($arrLegend);  
50.   
51.         // 如果圖例太多，需要調整option中的grid.top值才能避免重疊  
52.         $topInt = $len > self::DEFAULT_LINE_NUM ?  
53.             self::DEFAULT_GRID_TOP_PECENTAGE + self::DELTA_GRID_TOP_PECENTAGE  
54.             * (Ceil(($len - self::DEFAULT_LINE_NUM)/self::LINE_NUM_EACH_ROW))  
55.             : self::DEFAULT_GRID_TOP_PECENTAGE;  
56.         if ($topInt >= self::MAX_GRID_TOP_PECENTAGE) {  
57.             $topInt = self::MAX_GRID_TOP_PECENTAGE;  
58.         }  
59.         $gridTop = "$topInt%";  
60.   
61.         return $gridTop;  
62.     }  
63.   
64. }  

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

github地址：Data Visualization