echarts图例高度计算-横向图例-legend组件高度模拟计算-冷知识

1.简介

echarts是百度发起的一个开源项目，在开源中国和github上都可以找到对应的文档和源代码。如果你对使用echarts图表绘制的要求并不高那么其实只要去看看echarts的教程再照着官方实例写几个例子就应该足够了，不过，如果你需要对echarts做很多自定义设置，那么就需要对echarts足够熟悉才行。
本文echarts版本4.2.7。

1.1补充介绍

本文属于echarts的进阶内容，对echarts还不熟悉的人员可以止步了。不过这里我还是简单把我了解到的东西简单介绍一下：

1. 图例，legend，是echarts的一个组件，主要由图表中各个系列的系列名和图标(icon)组成。
2. legend组件的渲染类似于DOM元素的渲染，在echarts的配置项中，legend可以设置边框（border）、内边距（padding）和宽高等。但是echarts中边框渲染出来之后是不占组件宽度的，并且echarts在渲染某些组件时会尽量让奇数值取上偶。例如设置legend的itemHeight为5和itemHeight为6渲染出来的效果是一样的。

1.2简单分析

讲道理，echarts本身是没有提供获取某个组件的实际宽高的功能的，所以当我们需要知道某个组件的宽高时，第一件要做的事就是对组件行为进行分析。本文中所分析的legend是最常见的不加过多设置的legend组件。我的分析方法时，对legend组件进行不同的设置后，对电脑屏幕进行截图，然后用切片工具进行分析。
分析之后就是模拟，这里用DOM元素来模拟legend组件的绘制。

2.代码

//这个代码其实也没什么好讲的，懂得人自然会懂，不懂的人我一时半会也解释不出来，时间比较仓促，大家根据代码反推一下吧，hhh
注意：代码中的var chart = globalTools.data.echartContainer;和var chartDOM = globalTools.data.echartDOM需要替换为对应的echarts实例和承载的DOM元素。顺便一提，echarts实例就是echarts.init()返回的对象，对应的DOM元素就是传给echarts.init()的第一个参数。

var dc = {
	//计算echarts内部图例占用高度(不考虑富文本的情况) //5ms
		getLegendHeight: function(index){
			var height =0;
			var charDOM = globalTools.data.echartsDOM;
			var chart = globalTools.data.echartsContainer;
			var option = chart.getOption();
			var legends = option.legend;
			if(!legends||legends.length<=0) return 0;
			index = parseInt(index);
			if(isNaN(index)||index<0||index>=legend.length) index = 0;
			var legend = legends[index];
			if(!legend||!legend.show||!legend.data||legend.data.length<=0) return 0;
			//主算法，将legend中的设置渲染为DOM元素，用dom元素的宽高来模拟legend组件在echarts内部的高度
			var icongap = 5;//legend图形左右两边各有5个px的间隔
			var left = d.formatNum(legend.left),right = d.formatNum(legend.right);
			//计算legend组件的可用宽度
			var chartWidth = legend.width||$(charDOM).width()-left-right;
			//legend的padding
			var padding = legend.padding || 0;
			if($.isArray(padding)) padding = padding.join('px ')+'px';
			else padding+='px';
			//每个legend item之间的间隙（包括水平和垂直）
			var itemGap = legend.itemGap;
			//创建一个不可见的模拟盒子
			var $legendbox = $('
').css({
				width: (chartWidth+itemGap) +'px',
				padding: padding,
				'line-height': '1',
				'box-sizing': 'border-box',
				overflow: 'hidden',
				'position': 'absolute',
				'z-index': '-1',
				'opacity': '0',
				'filter': 'alpha(opacity=0)',
				'-ms-filter': 'alpha(opacity=0)'
			}).appendTo('body');
			//模拟绘制单个legend item
			var itemHeight = d.formatNum(legend.itemHeight),itemWidth = d.formatNum(legend.itemWidth);
			if(itemHeight%2!=0) itemHeight++;
			if(itemWidth%2!=0) itemWidth++;
			var fontSize = legend.textStyle.fontSize || 12;
			var fontWeight = legend.textStyle.fontWeight || 'normal';
			$.each(legend.data,function(i,name){
				var $icon = $('').css({
					display: 'inline-block',
					padding: '0 '+icongap+'px',
					'box-sizing': 'content-box',
					'width': itemWidth+'px',
					'height': itemHeight+'px'
				});
				var $item = $('
').css({
					'display': 'inline-block',
					'float': 'left',
					'margin-right': itemGap+'px',
					'margin-bottom': itemGap+'px',
					'font-size': fontSize+'px',
					'font-weight': fontWeight
				}).append($icon).append(name).appendTo($legendbox);
			});
			//得到模拟高度
			height = $legendbox.innerHeight()-itemGap;
			//善后工作
			$legendbox.remove();
			return height;
		}
}
//使用方法就是dc.getLegendHeight();这里就不示范了。

3.总结

其实没什么好总结的，但是专研的精神和回顾总结的理念很重要。学不可已，进无止境。本文写于20190827.