echarts legend 重叠 (转载)

2018-06-22 07:27:27来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  

解决方案:
  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 plain copy
 
  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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:MVC架构介绍-框架分层

下一篇:test