如何设置ECharts中x轴刻度间隔为特定值的两种方法？

本文共计1041个文字，预计阅读时间需要5分钟。

目录 + 背景 + 解决方法 + 方法一：使用x轴的标签属性axisLabel，利用interval设置间隔 + 方法二：为axisLabel添加formatters回调函数改变标签文字 + 附加：Echarts柱状图中x轴间隔显示（显示不全） + 总结 + 背景

目录

• 背景
• 解决方法
• 方法一: x轴的标签属性axisLabel下利用interval设置间隔
• 方法二： 为axisLabel. formatters添加回调函数改变标签文字
• 附：Echarts柱状图x轴间隔显示（显示不全）
• 总结

背景

最近在写一个echarts数据看板，要在一个页面中展示多张图表，所以留给每张图表的尺寸就很小。这也就使得图表x轴的刻度文字全部挤到一起了，废话不多说，直接上图看效果。

右边的图标就是x轴刻度标签文字被挤到一起了，左边是该过之后的效果。

解决方法

想要达到上面图片中左边的效果方法不止一种。

最笨的方法 如果空间够的话直接将echart所在的div层尺寸设置得大一些，grid对象也同理，只要展示的空间足够宽，刻度标签自然就不会挤到一起。