随着大数据的到来可视化图表备受青睐，图表的应用自然也就必不可少了。在使用Echarts呈现图表时我们也经常会遇到些问题，今天要解决的是X轴坐标文字显示显示的问题。当图表显示的数据较多时由于图表的宽度有限，在有限的范围内显示过多的会导致X轴坐标上的文字出现重叠。
Echarts默认情况下当横轴数据较多时会自动隐藏一部分显示，所以我们看到的内容才会出现显示不全的现象。如果我们想全部显示出来可以在axisLabel对象中设置interval属性，该属性可以控制坐标轴刻度标签的显示间隔。当interval设置为时强制显示所有标签其他值为几就是跨几个显示，如果没有设置则会采用标签不重叠的方式显示标签也就是默认会将部分文字隐藏。本来就是数据较多，全部显示就更密集了严重的影响到了用户体验。interval的值可以用数值表示间隔的数据，也可以通过回调函数控制。
如果内容不是太多我们可以将坐标轴刻度标签倾斜显示，这样可以适当地避免文字重叠。Echarts为axisLabel对象提供了rotate，该属性可以用来设置坐标轴刻度标签内容的倾斜度。很显然倾斜也无法满足我们当前的需求，内容还是太过密集了。
如果你的数据不是而是坐标轴刻度标签内容过长导致重叠的话，可以使用formatter自定义数据的格式支持字符串模板和回调函数两种形式。这里params是我们X轴坐标的标签内容，里面存的是各项的属性一个一个传进去的。我们只要在formatter将内容进行处理然后再return出来，这样对于的坐标轴刻度标签内容就会安装我们指定的格式进行显示了。
还有一种方式可以避免内容挤到一起，利用横向X轴拖动给X轴添加轴承。通过Echarts提供的dataZoom组件可以实现轴承拖动的效果，该组件可以实现区域缩放从而能自由关注细节的数据信息或者概览数据整体。dataZoom 组件能够在直角坐标系grid极坐标系polar中实现，原理是通过『数据过滤』来达到『数据窗口缩放』的效果所以配置直接决定了削事效果。dataZoom组件定义了很多属性可以帮助我们快速地定义需要的外观和功能，具体的属性说明可以在Echarts官方查看。
在使用dataZoom的时候遇到个问题明明在echarts中设置dataZoom参数，但是前台就是不显示也不报错。找半天才发现我是按需加载的组件，之前没有加载dataZoom组件所以怎么也显示不出来拖动轴！
如果我们希望不管图表上有多少条数据展示，X轴只显示个坐标轴刻度标签。那么我们就可以给interval通过回调函数实时来控制间隔值。这里需要注意的是interval的回调函数不能定义在axisLabel配置中，直接定义在配置中会跟formatter一样对X轴坐标的标签内容一个一个进行传参，也就会出现反复调用导致X轴混乱。而在外面定义则相当于给interval赋值，只是每次给的值不同而已。
Echarts封装了很多属性可以方便用户个性化定制各种需求，对坐标轴控制可以改善图表的视觉效果。避免因数据太多而导致内容重叠，影响应用户体验。
