echarts标题高度计算-暂不支持富文本-类似于图例

1.简介

本文和我的另外一篇文章计算echarts图例高度的十分类似，也是对echarts组件的分析，在不考虑富文本的情况下，标题高度的计算比图例要简单的多。这里我同样用DOM元素完成对title组件的模拟。

2.代码

//代码比较简单，就不解释了。
注意：代码中的var chart = globalTools.data.echartContainer;和var chartDOM = globalTools.data.echartDOM需要替换为对应的echarts实例和承载的DOM元素。顺便一提，echarts实例就是echarts.init()返回的对象，对应的DOM元素就是传给echarts.init()的第一个参数。

var dc = {
	//计算标题占用高度(不考虑富文本的情况) //1ms
		getTitleHeight: function(index){
			var height = 0;
			var chart = globalTools.data.echartsContainer;
			var option = chart.getOption();
			var titles = option.title;
			if(!titles||titles.length<=0) return 0;
			index = parseInt(index);
			if(isNaN(index)||index<0||index>=title.length) index=0;
			var title = titles[index];
			if(!title||!title.show) return 0;
			//标题字号
			var fontSize = title.textStyle.fontSize || 18;
			var fontWeight = title.textStyle.fontWeight || 'normal';
			//标题文字
			var text = title.text;
			//title的padding
			var padding = title.padding || 0;
			if($.isArray(padding)) padding = padding.join('px ')+'px';
			else padding+='px';
			var $div = $('
').html(text).css({
				'white-space': 'pre',
				'box-sizing': 'content-box',
				'font-size': fontSize+'px',
				'font-weight': fontWeight,
				'line-height': '1',
				padding: padding,
				'position': 'absolute',
				'z-index': '-1',
				'opacity': '0',
				'filter': 'alpha(opacity=0)',
				'-ms-filter': 'alpha(opacity=0)'
			}).appendTo('body');
			height = $div.innerHeight();
			$div.remove();
			return height;
		}
}
//使用方法就是dc.getLegendHeight();这里就不示范了。

3.总结

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