Echarts图例legend过多，采用翻页处理

最新推荐文章于 2024-06-04 10:35:52 发布
最新推荐文章于 2024-06-04 10:35:52 发布
阅读量1.9w 收藏 31
点赞数 8
分类专栏： echart 文章标签： echart图例分页 Echart图例过多 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/danhuan/article/details/72831245
版权

问题：
图例可以跟地图有联动效果，用来当列表使用，与地图有联动效果，简直太棒了，但是echarts图例太多，实在太占用空间，遮挡图表，又无法移动legend层。当屏幕小，满屏幕都是图例呀。。。如下图，头疼。
image.png

翻阅echarts相关文档，百度，Q群等途径寻找解决方法，都没有得到想要答案。于是鼓起勇气尝试修改源码。
开始的想法是：右边一列，不换行显示，出现滚动条，可以向下滚动。后来研究了echarts源码，觉得在canvas上加滚动条有点困难，所以选择了 向下翻页 的方式。

效果图：

image.png

原理

echarts创建legend层是先创建每一条图例，再计算位置，全部渲染出来。发现echarts里一段主要代码，就是这里实现了**“图例换行”**。

// Wrap when width exceeds maxHeight or meet a `newline` group
if (nextY > maxHeight || child.newline) {
	x += currentLineMaxSize + gap;
	y = 0;
	nextY = moveY;
	currentLineMaxSize = rect.width;
}
else {
	currentLineMaxSize = Math.max(currentLineMaxSize, rect.width);
}

那么，是不是可以把 ”换行“ 变成 “换页”！ .oh，good idea，get ! 于是这么干！

步骤如下：

为了避免 改动 会引起其他问题。通过自定义新的字段参数控制。
主要需要改动以下几个地方：

1.html页面中改动

我在初始化echarts的div标签下面添加<div class="js-eclegend-tool" style="position: absolute;right: 20px;top: 40%"></div>，用于存放上下翻页按钮，下面会用到。我写在echarts容器下面，css样式决定它的位置，代码如下：

<div class="ibox">
        <!--初始化echarts实例的容器-->
	<div id="eBaiduMap" class="ibox-size" style="width: 100%;"></div>
        <!--用于存放上下翻页按钮.js-eclegend-tool容器，页面中的修改只需增加下面这一句-->
	<div class="js-eclegend-tool" style="position: absolute;right: 20px;top: 40%"></div>
</div>

2.修改option配置

实例化echarts时，修改option配置，即添加pagemode: true,留意注释为//注意的地方

//modify by danhuan
legend: {
    orient: 'vertical', //注意
    right:0,
    top: 0, //注意
    //bottom:0,
    //left:0,
    //width:200,
    pagemode: true, //注意,自定义的字段，开启图例分页模式，只有orient: 'vertical'时才有效
    height:"100%",
    data: legendData,
    itemHeight:18,
    itemWidth: 18,
    textStyle: {
        fontWeight: 'bolder',
        fontSize: 12,
        color:'#fff'
    },
    inactiveColor:'#aaa',
    //padding: [20, 15],
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 5,
    zlevel: 100
},

3.修改echarts源码，总共两处修改

第一处修改，在源码中找到以下代码：

image.png
为了你们方便复制查找，我把该截图的代码粘贴出来，即：

layout: function (group, componentModel, api) {
	            var rect = layout.getLayoutRect(componentModel.getBoxLayoutParams(), {
	                width: api.getWidth(),
	                height: api.getHeight()
	            }, componentModel.get('padding'));
	            layout.box(
	                componentModel.get('orient'),
	                group,
	                componentModel.get('itemGap'),
	                rect.width,
	                rect.height
	            );

	            positionGroup(group, componentModel, api);
	        },

找到这几行代码，修改为以下代码：

layout: function (group, componentModel, api) {
	var rect = layout.getLayoutRect(componentModel.getBoxLayoutParams(), {
		width: api.getWidth(),
		height: api.getHeight()
	}, componentModel.get('padding'));

	/*modify by danhuan 为了避免影响到其他模块，传参数判断修改 legend 是否要分页  s*/
	if(componentModel.get('pagemode')){//如果 legend 启用分页 modify by danhuan
		layout.box(
			componentModel.get('orient'),
			group,
			componentModel.get('itemGap'),
			rect.width,
			rect.height,
			componentModel.get('pagemode') //modify by danhuan
		);
	}
	if(!componentModel.get('pagemode')){
		layout.box(
			componentModel.get('orient'),
			group,
			componentModel.get('itemGap'),
			rect.width,
			rect.height
		);
	}
	/*modify by danhuan 传参数判断修改 legend 是否要分页  e*/

	positionGroup(group, componentModel, api);
},

这样做的目的是为了将步骤2的自定义参数 pagemode: true 传进echarts ,为了避免有其他方法调用layout方法导致其他图表错误，所以用了判断if(componentModel.get(‘pagemode’)){…}，有参数 pagemode: true 时，才会进入改动的代码。

第二处修改：

找到以下代码function boxLayout(orient, group, gap, maxWidth, maxHeight)…截图如下：
image.png

将该函数修改为：

function boxLayout(orient, group, gap, maxWidth, maxHeight,pagemode) {
	//console.log(group);
	var x = 0;
	var y = 0;
	if (maxWidth == null) {
		maxWidth = Infinity;
	}
	if (maxHeight == null) {
		maxHeight = Infinity;
	}
	var currentLineMaxSize = 0;
	group.eachChild(function (child, idx) {
		//console.log(child, idx);

		var position = child.position;
		var rect = child.getBoundingRect();
		var nextChild = group.childAt(idx + 1);
		var nextChildRect = nextChild && nextChild.getBoundingRect();
		var nextX;
		var nextY;
		if (orient === 'horizontal') {
			var moveX = rect.width + (nextChildRect ? (-nextChildRect.x + rect.x) : 0);
			nextX = x + moveX;
			// Wrap when width exceeds maxWidth or meet a `newline` group
			if (nextX > maxWidth || child.newline) {
				x = 0;
				nextX = moveX;
				y += currentLineMaxSize + gap;
				currentLineMaxSize = rect.height;
			}
			else {
				currentLineMaxSize = Math.max(currentLineMaxSize, rect.height);
			}
		}
		else {
			var moveY = rect.height + (nextChildRect ? (-nextChildRect.y + rect.y) : 0);

			nextY = y + moveY;

			/*by danhuan s*/
					if(pagemode){

						//console.log(pagemode);
						if (nextY > maxHeight || child.newline) {
							var html = '<div class="js-prePage"> <img style="width: 32px;height: 32px;cursor: no-drop" src="/mapout-web-visual/img/up-disable.png"  title="已经是第一页"/></div>';
							html +=	'<div class="js-nextPage"> <img  style="width: 32px;height: 32px;cursor: pointer" src="/mapout-web-visual/img/down-icon.png" title="下一页"/></div>';
							$('.js-eclegend-tool').html(html);
						}
						else {
							currentLineMaxSize = Math.max(currentLineMaxSize, rect.width);
						}
					}else{
						//console.log(pagemode);
						// Wrap when width exceeds maxHeight or meet a `newline` group
						if (nextY > maxHeight || child.newline) {
							x += currentLineMaxSize + gap;
							y = 0;
							nextY = moveY;
							currentLineMaxSize = rect.width;
						}
						else {
							currentLineMaxSize = Math.max(currentLineMaxSize, rect.width);
						}
					}
					/*by danhuan e*/
		}

		if (child.newline) {
			return;
		}

		position[0] = x;
		position[1] = y;

		orient === 'horizontal'
			? (x = nextX + gap)
			: (y = nextY + gap);
	});
}

修改的代码意思：在图例总高度大于legend容器高度，需要换行时, 不让其换行，而是一直向下画图例， 同时向 步骤1 建的容器$(’.js-eclegend-tool’)里面添加 ‘上一页’、‘下一页’ 按钮。

4.添加按钮事件

给”上一页“， ”下一页“按钮添加事件，通过echarts的setOption改变legend层的top，实现其翻页

/*=====legend 的分页控制 事件=s===*/
        var PageEvent = function (i) {
            var percent = -i * 98 + '%';
            myChart.setOption({
                legend: {
                    top: percent
                }
            });
        };

        if (option.legend.pagemode) {
            $('body').on('click', '.js-prePage', function () {

                if (clickCount > 0) {
                    clickCount = clickCount - 1;
                    PageEvent(clickCount);
                    //console.log(clickCount+'上一页');
                    $('.js-prePage img').attr({'src': '/mapout-web-visual/img/up-icon.png', 'title': '上一页'});
                    $('.js-prePage img').css('cursor','pointer');
                    //$('.js-nextPage img').attr('src','/mapout-web-visual/img/down-icon.png');
                    if(clickCount==0){
                        $('.js-prePage img').attr({'src': '/mapout-web-visual/img/up-disable.png', 'title': '已经是第一页'});
                        $('.js-prePage img').css('cursor','no-drop');
                    }
                } else {
                    //console.log(clickCount+'已经是第一页');
                    $('.js-prePage img').attr({'src': '/mapout-web-visual/img/up-disable.png', 'title': '已经是第一页'});
                    $('.js-prePage img').css('cursor','no-drop');
                }
            });
            $('body').on('click', '.js-nextPage', function () {
                clickCount = clickCount + 1;
                //console.log(clickCount);
                PageEvent(clickCount);
                $('.js-prePage img').attr({'src': '/mapout-web-visual/img/up-icon.png', 'title': '上一页'});
                $('.js-prePage img').css('cursor','pointer');
            });
        }
        /*=====legend 的分页控制 事件=e===*/

按钮图标：
up-icon.png

up-disable.png

down-icon.png

down-disable.png

以上仅个人想法，请多多指教！希望能得到您更多宝贵的想法,多多留言。

已修改的echarts ：https://github.com/danhuan/echarts-changed-legend

本文简书地址：http://www.jianshu.com/p/869853a7c8ce

洪丹焕 创建于 2017.05.24

吖蛋黄
关注
专栏目录
echarts legend过多问题解决
dyl0313的博客
03-13 2万+
在使用echarts 2.0的过程中发现legend过多没有分页的情况    经百度各种查没有查到想要的效果  因此自己动手扩展了一个效果，现在发布出效果  如果有问题可以问我 在调试echarts源码过程中发现有判断legend到底部放不下然后另起一排的逻辑效果，因此我就延续用了此逻辑 ，在此逻辑的基础上，判断我自己的出现分页的属性是否为true，如果是true就调用自己的方法进行分页
echarts饼图legend纵向分页
最新发布
no_one_but_you的博客
09-27 285
echarts饼图legend纵向分页
对echarts压缩包进行修改当legend过多时可以进行翻页
08-10
对echarts压缩包进行修改，当legend过多时，可以进行翻页
echarts数据量过大时会造成legend很多的解决方法
qq_54818343的博客
06-04 960
设置后可以让legend设置为一行显示，通过箭头进行上下页切换。
echars 图例太多， legend 翻页显示，图例过多处理，格式化图例显示
weixin_42634398的博客
04-21 5002
echars legend过多 翻页显示，格式化图例 最终效果展示 代码参考 legend: { type: 'scroll', // 显示分页 orient: 'vertical', right: 10, ...
echarts曲线图：legend过多问题
Yiyixiaojian的博客
08-17 1万+
echarts的官网地址 上面的例子只能满足一些简单的需求，复杂的设计的话，仔细研究它的每个属性 在公司实习，突然要修改一个图例太多的显示问题，如下图： 原来以为又什么属性可以直接设置，后来研究了好一会好像并没有； 最后我的解决方案就是：放一个大一点的div装这个chart，然后dataZoom、legend等的位置慢慢调整，比如设置bottom、top的大小。 不过这样的坏处就是，...
饼图的legend文字太长和数量太多处理
青烟小生的博客
08-21 3160
在我们使用图表饼图的时候会发现因为数据太多导致页面的布局发现重叠或者不好看，比如label的文字太长了，legend的数量太多了等一些问题，所以今天我们就来聊聊遇到这些问题的是可以通过那些设置来进行改进。legend的数量太多需要进行分页处理的方法，就是给legend的添加一个。分页信息的文字样式的修改，就是正常的css样式属性，只是记得要用驼峰命名。下面是处理文字太长的行数，这里设置的是超过8个字就进行换行。分页图标箭头的设置，可以修改，可以用原本的箭头模式。的属性，就可以实现分页的效果。
echarts饼图显示引导线，图例过多翻页
铁血猪刚鬣的博客
05-19 1430
实现效果 父组件 <echartsPie echartsNo="two" :echartsPieData="echartsPieRecorder" /> 子组件 <template> <div :id="'mainPie' + echartsNo" class="mainPie"></div> </template> <script&gt
echarts饼图，自定义legend，解决legend字数太多和太长的问题，翻页处理
weixin_43899935的博客
07-07 8046
{ tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { type: "scroll", orient: "vertical", right: 20, top: obj.legendTop, bottom:
echarts图例legend样式修改
08-25
在ECharts中，可以通过配置选项来修改echarts图例legend的样式。具体样式的修改包括设置图例的位置、大小、间距、对齐方式、文本样式、背景色等。以下是一些常见的配置选项和样式修改实例： 1. 设置图例位置：可以...
echarts属性：图例legend、底部缩放条dataZoom
qq_45684708的博客
11-12 3115
1、图例 // 图例配置 legend: { data: [ '出货量', '进货量', '售出量', '测试一', '测试二', '测试三', '测试四', '测试五', '测试六', '测试七', '测试八', '测试九', '测试十', '复试一', '复试二', '复试三', '复试四', '复试五', '复试六', '复试七', '复试八', '复试九', '复试十', '补位一', '补位二', '补位三', '补位四', '补位五', '补
echarts 图例过多问题 解决方案
龚箭的博客
01-23 1万+
legend: { type: 'scroll', //分页类型 bottom: 10, data: (function (){ var list = []; for (var i = 1; i <=2000; i++) { list.push(i + 2000 ...
Echarts中legend翻页效果
Sunshine_Jian的博客
12-27 2447
效果图： 关键代码： legend: { width:600, type:'scroll', top:'5%', // itemWidth: 10, data: a.data.data.map(item=>{ return item.name }) },
echarts图例过多显示问题
weixin_38912662的博客
12-29 4968
echarts图例过多时分页处理
Echarts图表如何解决legend数量过大导致遮挡图表
热门推荐
weixin_42274805的博客
08-11 1万+
开发Echarts图标时，经常遇到数据量过多引起的图例错乱，这个时候我们应该如何处理？ 设置属性type: scroll legend: { type: 'scroll', orient: 'horizontal' // vertical } 效果如下: horizontal效果： vertical效果： ...
Echarts饼图,柱状图,折线图图例太多，默认选中前5个，图例太多设置翻页滚动效果
weixin_41346436的博客
03-24 4329
代码和预览效果 <template> <div :class="[tips == 0 ? 'container-main-container-aside1-div' : 'container-main-container-aside1-div01']" @dblclick="doubleClick"> <div v-if="tips == 0" class="container-main-container-aside1-div5-div1"></d
【echarts】legend长度过长，内容过多导致换行怎么办？
hzxOnlineOk的博客
09-12 2246
通过设置翻页即可解决该问题。
图表库ECharts分页
11-01
根据提供的引用内容，ECharts是一个图表库，可以用于数据可视化。它支持多种图表类型，包括折线图、饼图、柱形图等。除了静态数据的使用，ECharts还可以用于动态数据的展示。例如，在页面中每隔2秒钟发送一个请求到servlet，然后从servlet返回一个json数据，最后在页面中展示动态数据的变化。在使用ECharts时，需要引入相应的JS文件，并按照文档中的说明进行配置和使用。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值