解决方案:
  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. * 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

echarts legend 重叠 (转载)的更多相关文章

  1. echarts legend文字配置多个颜色(转)

    困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色legend: {data: [{name:‘直接访问’,icon : ‘circle’,textStyle: { ...

  2. echarts legend 图例文字闪烁显示

    最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示. 先放一张图: 客户要求:待处理字样要闪动显示. 小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案 ...

  3. echarts散点图重叠

    今天做echarts图标,使用了散点图.很快实现,发现数据不对,应该是3个的企业,页面只显示了2个,查了半天才发现原来是有两个重叠了.想办法解决了,在网上费劲九牛二虎只力终于找到了解决的方法,下面来解 ...

  4. echarts legend 限制规定显示个数,显示省略号,修改默认样式

    类似百度统计,有的时候legend的个数比较多,但是前端需要控制初始化显示的个数,以及最多显示的条数,先看效果图: 先给代码: <!DOCTYPE html> <html lang= ...

  5. d3.js 教程 模仿echarts legend功能

    上一节记录没有加上echarts的legend功能,这一小节补一下. 1. 数据 我们可以从echarts中看出,折线数据并不是我们传进入的原始数据(多数情况下我们也不会修改原始数据),而是原始数组的 ...

  6. echarts legend 的单选模式以及轮播技巧

    1.设置 legend 属性: selectedMode: 'single' 2.使用 myCharts.dispatchAction 来设置legend的聚焦 broadcast (v) { // ...

  7. Echarts - legend属性设置

    legend: { orient: 'horizontal', // 'vertical' x: 'right', // 'center' | 'left' | {number}, y: 'top', ...

  8. echarts的title和legend重合解决(各种小细节)

    一:关于title与legend重叠 1.重合样子 2.解决办法: legend:{ show: true, top:"6%",//与上方的距离 可百分比% 可像素px }, 3. ...

  9. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

随机推荐

  1. CCF系列之最优灌溉(201412-4)

    试题编号:201412-4试题名称:最优灌溉时间限制: 1.0s内存限制: 256.0MB 问题描述 雷雷承包了很多片麦田,为了灌溉这些麦田,雷雷在第一个麦田挖了一口很深的水井,所有的麦田都从这口井来 ...

  2. js设置定时器

    1,利用settimeout,语法: setTimeout(/*执行代码*/, /*毫秒*/);每过多少毫秒执行一次代码 <button id="sms">发送验证码& ...

  3. web项目各个clean

    project clean:清楚tomcat下的已编译的java类.class文件,包括js但不包括jsp server clean:clean tomcat work dictionary:清除to ...

  4. Curl是什么,原文地址:http://www.phpchina.com/portal.php?mod=view&aid=40161

    Curl是什么PHP supports libcurl, a library created by Daniel Stenberg, that allows you to connect and co ...

  5. redis通过pipeline提升吞吐量

    案例目标 简单介绍 redis pipeline 的机制,结合一段实例说明pipeline 在提升吞吐量方面发生的效用. 案例背景 应用系统在数据推送或事件处理过程中,往往出现数据流经过多个网元: 然 ...

  6. Oracle中 in、exists、not in,not exists的比较

    最基本的区别: in 对主表使用索引 exists 对子表使用索引 not in 不使用索引 not exists 对主子表都使用索引 写法: exist的where条件是: "...... ...

  7. Java基础教程1:环境配置及第一个HelloWorld.java

    本文主要介绍JDK环境配置.Sublime Text3配置及第一个HelloWorld.Java程序.运行环境为Win10系统,使用JDK1.8版本. 1. JDK下载及环境配置 1.1 JDK下载 ...

  8. JMeter基础教程2:正则表达式使用

    0. 正则表达式简介 正则表达式,又称规则表达式(Regular Expression,在代码中通常简写为regex.regexp或RE)描述了一种字符串匹配的模式(pattern),可以用来检查一个 ...

  9. 细说Django的admin

    在admin.py中只需要将地Model中某个类注册,即可在Admin中进行增删查改的功能,例如: admin.site.register(models.UserInfo) 这种方式比较简单,如果想要 ...

  10. 1.C和C++区别,以及const分析

    从本章起开始从0学习C++,本章主要内容: 1)C和C++的基本区别 2)C和C++的const区别 1.C++和C区别 1.1 C++更强调语言的实用性,所有变量都可以在需要时再定义 比如: ;i& ...