熟悉echarts的同学应该知道，echarts中的直角系图表当坐标轴为类目型（常为x轴）而且数据又特别多时，默认会隐藏掉一部分x轴文字。效果就类似于这样：
然而，echarts自带的计算有时候是过于苛刻的，即使文字实际上不存在遮挡问题，当文字与文字间的间隔小于一定值时同样会触发隐藏机制，例如上面那张图，如果设置{xAxis:{axisLabel:{interval:0}}}显示出所有的横坐标文字，实际上文字也不会产生遮挡。
另外，有时候即使文字产生遮挡了，我们通过将文字旋转一定的角度也能使文字完全显示，不过遗憾的是，echarts本身并不提供这个功能。先上一张效果图。
还有一种情况，当数据个数较多或文字较长的时候，此时旋转文字已经于事无补，这里我们的解决方案是将图表进行转置，即柱形图变为条形图，同时对左边文字进行预换行处理，而后根据UI提供的柱子宽度和间隔对承载echarts的DOM元素做增高处理。效果是这样的。
（下面的效果图在DOM元素外又包了一层用于实现展开收起动画，并且默认显示所有label）
已展开（缩放可能有些模糊）
首先声明，本文并不是一篇多实用的教程，因为功能比较复杂，设计的知识点比较多，而且代码和页面结构具有一定的耦合性，所以看了本文的人不一定就写的出本文的效果，仅供大家参考，也是为我自己做一些记录，万一以后有类似的需求就可以快速部署。不懂原理只会复制粘贴的人可以止步了，复制过去也会有很多错误。
另外，代码中所涉及的页面结构如下：
注：本文所有的函数一般有附带有其还原操作或函数，例如showAllLabel（显示所有label）和hideAllLabel(隐藏所有label)两个函数相对应。
另外，对坐标轴文字进行换行的操作用到了我之前写的另外一篇文章里的函数，dc.getWrapString();//文章链接如下：
以下对xAxis的计算全部基于上述设置（即文本预换行和强制显示首尾项）
//注，代码中的短标识符d等同于长标识符globalTools，而dc则是另外一个标识符。两者都是一个对象，对象中定义了某些函数或常变量。
首先，判断x轴文字是否产生遮挡问题并进行适应的函数名称为rotateXAxisIfNeed，取名含义就是字面上的意思。要完成这个算法要求用到一些辅助函数，其中有一些我已经提到过，例如计算一行字符占用宽度的js函数(d.getStringWidth()或globalTools.getStringWidth())。链接：
1.先计算出当前图表可用的宽度大小，即chartDOM的宽度-grid占用-y轴占用宽度 之后剩下的宽度就是实际绘图的可用宽度。
2.区别对待x轴为类目轴（category）和数值轴（value）的情况，主要处理类目轴。
3.假设所有坐标文字都有进行显示，取坐标文字中占用宽度最大的一项的宽度作为平均宽度，估算坐标文字的宽度累加值是否超过绘图可用宽度。若没超过则直接显示所有坐标文字，结束函数，否则继续判断。
4.假定旋转角度为45度，先记录正弦值和余弦值用来等下判断两端溢出。然后取坐标文字中行数最多的一项的行数乘以字体大小作为旋转后的占用宽度，判断宽度累加值是否超过绘图可用宽度，若没超过，则对文字进行旋转，结束函数，否则继续。
5.当旋转后还是无法显示所有坐标文字时，则进行图表转置，转置的代码定义在d.chartReverse中。
图表的转置其实是非常简单的，但是这里由于项目需要的关系，我在转置中还调用了一些其他函数，例如d.chartSizeFix()用来对图表进行自动增高或还原等。
同时代码还结合在另外两篇文章里提到的计算图例高度和标题高度来对图片进行适应性设置（d.getTitleHeight和d.getLegendHeight）。链接：
我估计下面的代码应该很多人会有疑问的，仅供参考，也给我自己做一下记录.
//计算echarts内部图例占用高度(不考虑富文本的情况) //5ms //主算法，将legend中的设置渲染为DOM元素，用dom元素的宽高来模拟legend组件在echarts内部的高度 //计算legend组件的可用宽度 //每个legend item之间的间隙（包括水平和垂直） //创建一个不可见的模拟盒子 //计算标题占用高度(不考虑富文本的情况) //1ms
//交换每个系列的xAxisIndex和yAxisIndex。并且当数组为数组时，则数组前两位代表x和y，也需要交换 //尺寸自适应暂时只针对于条形图 //只支持formatter为函数的情况，不支持模板字符串，不然算法就写的太长了 * echarts的绘图基于一个固定宽高的容器，将容器中的canvas画板分为九宫格区域去绘图， //获取所有y轴占用的宽度(无论左右)(不考虑富文本的情况)
// 0.3s /*echarts的y轴占用宽度是比较难算的，因为官方并没有提供接口供外部查看适应性计算的结果： 为了尽量的精确，我的思路是这样的： 1.左右轴分开算。取分别求出左右轴中offset最大的轴的占用宽度，然后两个宽度加上两个offset作为y轴组件占用的总宽度 2.不计offset的话，一条y轴占用的宽度是margin加上axisLabel中最长的一项占用的宽度。
3.axisLabel最长的一项其实一般是获取不到的，echarts并没有提供axisLabel的查询入口，但是也不是完全没有办法，我的解决方案如下： 3.2中策，当yAxis中存在max,min,interval的定义的时候，手动计算出可能出现的axisLabel，取最长的一项当做估算值，
否则计算出series.data中y轴维度的最大值和最小值，再计算最小近似值。取近似值中较长的一项做估算值。 3.3下策，取yAxis中的平均offset，即一条y轴的最大值来当做计算值，如50. //第1步，分别找出左右轴中offset最大的 //第3步还原图表设置 arr = d.data.xAxisLabel;//如果有缓存则取缓存，如果图表数据是动态的则需要去掉本段代码 //重置x轴
//需要转置时，执行时间约为0.3s 或 6ms（取决于lazy） //当数值非小数时至多保留2位小数 //直角系类目轴刻度标签矫正函数，需要时通过控制文字旋转来尽量多的展示文字(不考虑富文本的情况) //获取图表现行option的副本 //x轴数据的默认间隔 //判断x轴是否为有效的类目轴 //x轴数据的间隔是相等的，所以计算遮挡时要取x轴数据中最长的那个
//走到这里则尝试对横坐标文字进行旋转，再计算文字遮挡 //此函数大概话费1~2s }else{//走到这里说明旋转之后放得下 }else{//走到这里说明，即使把横坐标文字全部显示也不会造成遮挡,设置interval为0确保横坐标全部显示
本文写于，仓促总结，有待完善。
