ECharts图表组件中级入门（Axis-axisLabel）：图表坐标刻度过多如何设置刻度间隔（interval）以及配置说明

作者：  echarts | 时间：2014-5-5 12:59:42 | [  小    大] | 来源：ECharts入门 |   阅读：3461 |       评论： 0 |      收藏

ECharts，图表，组件，中级，入门，Axis，axisLabel，坐标，刻度，间隔，interval  

[  摘要]： ECharts图表组件当我们xAxis的data数据过多的情况下你会发现原本连续的坐标刻度出现了断层（间隔）的现象，为什么呢？其实这种现象是很正常的，它是怎么产生的呢？ 原来ECharts图表组件内部有一个机制，用于统计xAxis坐标刻度的个数和图表宽度，从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是：interval。 {string | number}interval 'auto' 类目型 标签显示挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） |{number}（用户指定选择间隔） ...

ECharts图表组件当我们xAxis的data数据过多的情况下你会发现原本连续的坐标刻度出现了断层（间隔）的现象，为什么呢？其实这种现象是很正常的，它是怎么产生的呢？

原来ECharts图表组件内部有一个机制，用于统计xAxis坐标刻度的个数和图表宽度，从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是：interval。

{string | number}interval

'auto'

类目型

标签显示挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） |{number}（用户指定选择间隔）

默认情况下此属性值为”auto“，会自动根据刻度个数进行调整。

如果你想要设置所有刻度均显示出来，则只需要设置当前属性值为0即可，示例代码形如：

xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日'],
            axisLabel:{
                 //X轴刻度配置
                 interval:0 //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
            }
        }
    ],

想要间隔多少个这里就可以配置多少的数值即可，根据个人需要作出相应配置。

完整示例代码如下所示：

option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日'],
            axisLabel:{
                 //X轴刻度配置
                 interval:3 //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210]
        }
    ]
};

效果如下所示：

图1：刻度间隔为3的效果图

图2：刻度间隔为0的效果图

ECharts，图表，组件，中级，入门，Axis，axisLabel，坐标，刻度，间隔，interval  

 本文为原创型文章转载请尊重他人劳动成果并注明出处：  http://www.stepday.com/topic/?883