1.简介
echarts是百度发起的一个开源项目，在开源中国和github上都可以找到对应的文档和源代码。如果你对使用echarts图表绘制的要求并不高那么其实只要去看看echarts的教程再照着官方实例写几个例子就应该足够了，不过，如果你需要对echarts做很多自定义设置，那么就需要对echarts足够熟悉才行。
本文echarts版本4.2.7。
1.1补充介绍
本文属于echarts的进阶内容，对echarts还不熟悉的人员可以止步了。不过这里我还是简单把我了解到的东西简单介绍一下：
图例，legend，是echarts的一个组件，主要由图表中各个系列的系列名和图标(icon)组成。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内部图例占用高度(不考虑富文本的情况) //5msgetLegendHeight: 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的paddingvar 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 itemvar 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.总结
其实没什么好总结的，但是专研的精神和回顾总结的理念很重要。学不可已，进无止境。本文写于0827.
