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

转载 2016年11月23日 16:16:42
作者: 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

echarts遇到的一些问题。

1、折线图和后台交互的问题,在js中用ajax去后台调取数据,并根据返回的数据去设置xAxis和series的值。 2、放大缩小的问题。dataZoom:[ { type: 'inside...
  • plok61
  • plok61
  • 2016年06月29日 11:34
  • 4193

echarts中横坐标值显示不全(自动隐藏)解决方案

echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整。 如下图,当横轴时间为13天时,echarts会自动隔天显示 如果我们想显示...

echarts-X轴不从0刻度开始

1、问题背景     统一一周内植树的数量,利用柱状图来实现2、实现源码(1)X轴从零刻度开始 echarts-X轴不从0刻度开始 body,html{ ...

echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

echarts x轴文字显示不全(xAxis文字倾斜),使用axisLable:{rotate:40,interval:0},就可以解决...
  • kebi007
  • kebi007
  • 2017年03月30日 16:05
  • 20961

Echarts时间坐标轴刻度的改进和优化

Echarts时间轴刻度的计算主要存在以下三个问题 (1)不同时间格式下,计算出来的刻度不符合预期; (2)数据的最小值容易与坐标轴重叠,最大值容易显示在图表之外; (3)计算出来的刻度个数偏少,数据...

echarts x轴坐标文字显示不全

在echarts中应用柱状图或者折线图时,当数据量过多的时候,X轴的坐标就会显示不全(如下图图一),在ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻...
  • wu920604
  • wu920604
  • 2016年11月25日 11:28
  • 28837

Echarts去掉柱状图后的分割线和格式化y轴的数值

xAxis : [ { type : 'category', splitLine:{ show:false }, data: categories } ], yAxis : [ { type : 'v...

Vue使用echarts数据动态更新,Y轴刻度固定或者自适应

前几天在Vue项目中使用到了echarts,所以写个简单的小Demo想要实现的效果 数据动态生成(实时改变) 时间点1 时间点2 代码 改文件(Echarts.vue) ...

EChar中的柱状图如何设置柱子的最大宽度和刻度的最小间隔

现在在开发一个Echar的柱状图。遇到了几个问题,搜索了半天才弄好,写下来供后来人参考: 问题1:柱子的颜色要各种颜色,而不是同一种颜色; 问题2:在柱子数量少的时候,剩下的柱子不要太粗,否则不好...
  • zpf0901
  • zpf0901
  • 2017年04月14日 09:35
  • 3539

ECharts修改坐标轴,坐标轴字体,坐标轴网格样式以及控制坐标轴是否显示

将一个图表显示在前端页面上:var myChart = echarts.init(document.getElementById('testDIV')); //初始化echarts页面显示的空...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ECharts图表组件中级入门(Axis-axisLabel):图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明
举报原因:
原因补充:

(最多只允许输入30个字)