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 = $('<div class="legend-simulate-box"></div>').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 = $('<span></span>').css({
					display: 'inline-block',
					padding: '0 '+icongap+'px',
					'box-sizing': 'content-box',
					'width': itemWidth+'px',
					'height': itemHeight+'px'
				});
				var $item = $('<div></div>').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.

    原文作者:月桦剑士
    原文地址: https://blog.csdn.net/qq_26909801/article/details/100091094
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞