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]
        }
    ]
};


效果如下所示:

刻度间隔为3的效果示意图

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

刻度间隔为0的效果图

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

ECharts,图表,组件,中级,入门,Axis,axisLabel,坐标,刻度,间隔,interval    本文为原创型文章转载请尊重他人劳动成果并注明出处: http://www.stepday.com/topic/?883
阅读更多
个人分类: js 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭