echarts legend 重叠 (转载)
解决方案:
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
echarts legend 重叠 (转载)的更多相关文章
- echarts legend文字配置多个颜色(转)
困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色legend: {data: [{name:‘直接访问’,icon : ‘circle’,textStyle: { ...
- echarts legend 图例文字闪烁显示
最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示. 先放一张图: 客户要求:待处理字样要闪动显示. 小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案 ...
- echarts散点图重叠
今天做echarts图标,使用了散点图.很快实现,发现数据不对,应该是3个的企业,页面只显示了2个,查了半天才发现原来是有两个重叠了.想办法解决了,在网上费劲九牛二虎只力终于找到了解决的方法,下面来解 ...
- echarts legend 限制规定显示个数,显示省略号,修改默认样式
类似百度统计,有的时候legend的个数比较多,但是前端需要控制初始化显示的个数,以及最多显示的条数,先看效果图: 先给代码: <!DOCTYPE html> <html lang= ...
- d3.js 教程 模仿echarts legend功能
上一节记录没有加上echarts的legend功能,这一小节补一下. 1. 数据 我们可以从echarts中看出,折线数据并不是我们传进入的原始数据(多数情况下我们也不会修改原始数据),而是原始数组的 ...
- echarts legend 的单选模式以及轮播技巧
1.设置 legend 属性: selectedMode: 'single' 2.使用 myCharts.dispatchAction 来设置legend的聚焦 broadcast (v) { // ...
- Echarts - legend属性设置
legend: { orient: 'horizontal', // 'vertical' x: 'right', // 'center' | 'left' | {number}, y: 'top', ...
- echarts的title和legend重合解决(各种小细节)
一:关于title与legend重叠 1.重合样子 2.解决办法: legend:{ show: true, top:"6%",//与上方的距离 可百分比% 可像素px }, 3. ...
- CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
随机推荐
- CCF系列之最优灌溉(201412-4)
试题编号:201412-4试题名称:最优灌溉时间限制: 1.0s内存限制: 256.0MB 问题描述 雷雷承包了很多片麦田,为了灌溉这些麦田,雷雷在第一个麦田挖了一口很深的水井,所有的麦田都从这口井来 ...
- js设置定时器
1,利用settimeout,语法: setTimeout(/*执行代码*/, /*毫秒*/);每过多少毫秒执行一次代码 <button id="sms">发送验证码& ...
- web项目各个clean
project clean:清楚tomcat下的已编译的java类.class文件,包括js但不包括jsp server clean:clean tomcat work dictionary:清除to ...
- 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 ...
- redis通过pipeline提升吞吐量
案例目标 简单介绍 redis pipeline 的机制,结合一段实例说明pipeline 在提升吞吐量方面发生的效用. 案例背景 应用系统在数据推送或事件处理过程中,往往出现数据流经过多个网元: 然 ...
- Oracle中 in、exists、not in,not exists的比较
最基本的区别: in 对主表使用索引 exists 对子表使用索引 not in 不使用索引 not exists 对主子表都使用索引 写法: exist的where条件是: "...... ...
- Java基础教程1:环境配置及第一个HelloWorld.java
本文主要介绍JDK环境配置.Sublime Text3配置及第一个HelloWorld.Java程序.运行环境为Win10系统,使用JDK1.8版本. 1. JDK下载及环境配置 1.1 JDK下载 ...
- JMeter基础教程2:正则表达式使用
0. 正则表达式简介 正则表达式,又称规则表达式(Regular Expression,在代码中通常简写为regex.regexp或RE)描述了一种字符串匹配的模式(pattern),可以用来检查一个 ...
- 细说Django的admin
在admin.py中只需要将地Model中某个类注册,即可在Admin中进行增删查改的功能,例如: admin.site.register(models.UserInfo) 这种方式比较简单,如果想要 ...
- 1.C和C++区别,以及const分析
从本章起开始从0学习C++,本章主要内容: 1)C和C++的基本区别 2)C和C++的const区别 1.C++和C区别 1.1 C++更强调语言的实用性,所有变量都可以在需要时再定义 比如: ;i& ...