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]view plaincopy

1. <?php
3. /**
4. *CreatedbyPhpStorm.
5. *User:liuyuning
6. *Date:2016/8/9
7. *Time:18:59
8. */
9. classEp_CustomizeEcharts{
11. constLINE_NUM_EACH_ROW=3;//图例中每行显示的线条数目；
12. constDEFAULT_LINE_NUM=6;//采用默认grid.top值的默认线条数目；
13. constDEFAULT_GRID_TOP_PECENTAGE=18;//默认的grid.top百分比（整数部分）；
14. constDELTA_GRID_TOP_PECENTAGE=9;//超出默认线条数时的grid.top百分比增量（整数部分）；
15. constMAX_GRID_TOP_PECENTAGE=50;//最大的grid.top百分比（整数部分）；
18. /**
19. *调整图例显示样式
20. *@paramsarray需要调整的图例
21. *@returnarray
22. */
23. publicfunctionadjustLegend($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. }
39. return$afterLegend;
40. }
42. /**
43. *设置grid.top值
44. *@paramsarray需要调整的图例
45. *@returnstring
46. */
47. publicfunctionsetGridTop($arrLegend){
49. $len=count($arrLegend);
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%";
61. return$gridTop;
62. }
64. }

调整好的效果如下图所示：

github地址：Data Visualization