echarts legend 重叠 (转载)
2018-06-24 00:08:00来源:未知 阅读 ()
解决方案:
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
- /**
- * Created by PhpStorm.
- * User: liuyuning
- * Date: 2016/8/9
- * Time: 18:59
- */
- class Ep_CustomizeEcharts {
- const LINE_NUM_EACH_ROW = 3; //图例中每行显示的线条数目;
- const DEFAULT_LINE_NUM = 6; //采用默认grid.top值的默认线条数目;
- const DEFAULT_GRID_TOP_PECENTAGE = 18; //默认的grid.top百分比(整数部分);
- const DELTA_GRID_TOP_PECENTAGE = 9; //超出默认线条数时的grid.top百分比增量(整数部分);
- const MAX_GRID_TOP_PECENTAGE = 50; //最大的grid.top百分比(整数部分);
- /**
- * 调整图例显示样式
- * @params array 需要调整的图例
- * @return array
- */
- public function adjustLegend ($beforeLegend) {
- // 图例太多时,Echarts文档注明【特殊字符串 ''(空字符串)或者 '\n' (换行字符串)用于图例的换行。】
- $afterLegend = array();
- $index = 0;
- $len = count($beforeLegend);
- for ( $i = 0; $i < $len; $i++) {
- if (($index+1)%(self::LINE_NUM_EACH_ROW + 1) === 0) {
- $afterLegend[$index] = '';
- $index++;
- $afterLegend[$index] = $beforeLegend[$i];
- } else {
- $afterLegend[$index] = $beforeLegend[$i];
- }
- $index++;
- }
- return $afterLegend;
- }
- /**
- * 设置grid.top值
- * @params array 需要调整的图例
- * @return string
- */
- public function setGridTop($arrLegend) {
- $len = count($arrLegend);
- // 如果图例太多,需要调整option中的grid.top值才能避免重叠
- $topInt = $len > self::DEFAULT_LINE_NUM ?
- self::DEFAULT_GRID_TOP_PECENTAGE + self::DELTA_GRID_TOP_PECENTAGE
- * (Ceil(($len - self::DEFAULT_LINE_NUM)/self::LINE_NUM_EACH_ROW))
- : self::DEFAULT_GRID_TOP_PECENTAGE;
- if ($topInt >= self::MAX_GRID_TOP_PECENTAGE) {
- $topInt = self::MAX_GRID_TOP_PECENTAGE;
- }
- $gridTop = "$topInt%";
- return $gridTop;
- }
- }
调整好的效果如下图所示:
github地址:Data Visualization
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:小菜读书--《大话设计模式》
- ECharts安装与使用 2020-05-26
- ECharts介绍 2020-05-26
- 解决微信小程序引用echarts视图模糊的问题 2020-04-24
- Echarts快速入门 2020-04-09
- CSS实现重叠线效果的方法 2019-10-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash