Echarts legend overlaps, echartslegend

Echarts legend overlap (reprinted), echartslegend

Solution:
1. Adjust the grid. top value in option to avoid overlap. (You can set custom values or define a calculation formula)

2. The document specifies the special string ''(Null String) or '\ n' (line feed string) used for line feed of the legend .]

 

Source: http://blog.csdn.net/doleria/article/details/52503763

The content is as follows:

Github address: Data Visualization

Certificate ---------------------------------------------------------------------------------------------------------------------------------------

When there are too many Echarts report headers, although Echarts will be adaptive, the legend text may be too long, and the legends and chart lines will inevitably overlap. As shown in:

Refer to this article and the official Echarts documentation to come up with the following solutions:

1. The document specifies the special string ''(Null String) or '\ n' (line feed string) used for line feed of the legend .]
2. After wrapping, the grid. top value in option can be dynamically adjusted to avoid overlap. (A formula is defined)

 

To solve this problem, I used PHP to write a class for customizing Echarts. The following section is related to the legend adjustment, which is for reference only:

 

[Php]View plain copy

1. <? Php
3. /**
4. * Created by PhpStorm.
5. * User: liuyuning
6. * Date: 2016/8/9
7. * Time: 18: 59
8. */
9. Class Ep_CustomizeEcharts {
11. Const LINE_NUM_EACH_ROW = 3; // number of lines displayed in each line in the legend;
12. Const DEFAULT_LINE_NUM = 6; // use the default number of lines with the default grid. top value;
13. Const DEFAULT_GRID_TOP_PECENTAGE = 18; // default grid. top percentage (integer );
14. Const DELTA_GRID_TOP_PECENTAGE = 9; // grid. top percentage increment when the default number of lines is exceeded (integer );
15. Const MAX_GRID_TOP_PECENTAGE = 50; // maximum grid. top percentage (integer );
18. /**
19. * Adjust the legend display style
20. * @ Params the legend to be adjusted in array
21. * @ Return array
22. */
23. Public function adjustLegend ($ beforeLegend ){
24. // When there are too many legends, the Echarts document specifies the special string ''(Null String) or '\ n' (line feed string) for the line feed of the legend .]
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. * Set the grid. top value.
44. * @ Params the legend to be adjusted in array
45. * @ Return string
46. */
47. Public function setGridTop ($ arrLegend ){
49. $ Len = count ($ arrLegend );
51. // If there are too many legends, you must adjust the grid. top value in option to avoid overlap.
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. }

 

Shows the adjusted effect:

Github address: Data Visualization