echarts legend 重叠 （转载）

解决方案：
  1. 调整option中的grid.top值才能避免重叠；（可以设置定制，也可以定义了一个计算公式）

2. 文档注明【特殊字符串 ''（空字符串）或者 '\n' (换行字符串)用于图例的换行。】

转载来源：http://blog.****.net/doleria/article/details/52503763

内容如下：

github地址：Data Visualization

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

当Echarts报表表头过多时，虽然Echarts会做自适应，但是由于图例文字可能过长等，图例与图表线条难免会重叠显示。如下图所示：

参考这篇文章，以及Echarts的官方文档，得出以下解决方案：

1. 文档注明【特殊字符串 ''（空字符串）或者 '\n' (换行字符串)用于图例的换行。】
    2. 换行后动态调整option中的grid.top值才能避免重叠；（定义了一个计算公式）

在解决这个问题时，用PHP写了个定制Echarts的类，其中与调整图例相关的部分如下，仅供参考：

1. <?php
2. /**
3. * Created by PhpStorm.
4. * User: liuyuning
5. * Date: 2016/8/9
6. * Time: 18:59
7. */
8. class Ep_CustomizeEcharts {
9. const LINE_NUM_EACH_ROW              = 3;  //图例中每行显示的线条数目；
10. const DEFAULT_LINE_NUM               = 6;  //采用默认grid.top值的默认线条数目；
11. const DEFAULT_GRID_TOP_PECENTAGE     = 18; //默认的grid.top百分比（整数部分）；
12. const DELTA_GRID_TOP_PECENTAGE       = 9;  //超出默认线条数时的grid.top百分比增量（整数部分）；
13. const MAX_GRID_TOP_PECENTAGE         = 50; //最大的grid.top百分比（整数部分）；
14. /**
15. * 调整图例显示样式
16. * @params array 需要调整的图例
17. * @return array
18. */
19. public function adjustLegend ($beforeLegend) {
20. // 图例太多时，Echarts文档注明【特殊字符串 ''（空字符串）或者 '\n' (换行字符串)用于图例的换行。】
21. $afterLegend = array();
22. $index = 0;
23. $len = count($beforeLegend);
24. for ( $i = 0; $i < $len; $i++) {
25. if (($index+1)%(self::LINE_NUM_EACH_ROW + 1) === 0) {
26. $afterLegend[$index] = '';
27. $index++;
28. $afterLegend[$index] = $beforeLegend[$i];
29. } else {
30. $afterLegend[$index] = $beforeLegend[$i];
31. }
32. $index++;
33. }
34. return $afterLegend;
35. }
36. /**
37. * 设置grid.top值
38. * @params array 需要调整的图例
39. * @return string
40. */
41. public function setGridTop($arrLegend) {
42. $len = count($arrLegend);
43. // 如果图例太多，需要调整option中的grid.top值才能避免重叠
44. $topInt = $len > self::DEFAULT_LINE_NUM ?
45. self::DEFAULT_GRID_TOP_PECENTAGE + self::DELTA_GRID_TOP_PECENTAGE
46. * (Ceil(($len - self::DEFAULT_LINE_NUM)/self::LINE_NUM_EACH_ROW))
47. : self::DEFAULT_GRID_TOP_PECENTAGE;
48. if ($topInt >= self::MAX_GRID_TOP_PECENTAGE) {
49. $topInt = self::MAX_GRID_TOP_PECENTAGE;
50. }
51. $gridTop = "$topInt%";
52. return $gridTop;
53. }
54. }

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

github地址：Data Visualization