解决echarts设置x轴、y轴刻度起始值、终止值以及步长

  • echarts的官方示例中,可以通过设置xAxis(x轴)和yAxis(y轴)min、max属性改变x、y轴刻度起始、终止值。
  • 对于坐标轴步长,官方给出两种方式,第一种是利用splitNumber,第二种是利用interval强制设置坐标轴分割间隔。
  • 因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分。

注:上述方式无法在类目轴(type:category)中使用。在时间轴(type: ‘time’)中需要传时间戳,在对数轴(type: ‘log’)中需要传指数值。

代码实现如下:

var data = [[1,1],[2,1],[3,4],[4,7],[5,2],[6,2],[7,4],[8,3],[10,1],[11,1],[12,1],[13,1],[14,4],[15,3],[16,1],[18,1],[20,2],[22,2],[23,1],[25,1],[26,1],[27,4],[29,2],[30,1],[31,1],[32,2],[34,2],[35,3],[36,5],[37,3],[38,2],[42,2],[43,1],[46,1],[47,1],[48,3],[51,1],[53,1],[56,1],[62,2],[63,2],[65,3],[66,1],[67,1],[68,2],[69,1],[70,1],[71,1],[75,1],[77,1],[83,1],[85,2],[86,1],[88,1],[91,1],[96,1],[104,1],[106,1]];

option = {
    xAxis: {
        name:'天',
        type: 'value',
        interval:5, // 步长
        min:10, // 起始
        max:50 // 终止
    },
    yAxis: {
        name:'合同个数',
        type: 'value',
        interval:1, // 步长
        min:0, // 起始
        max:5 // 终止
    },
    series: [
        {
            
            type: 'line',
            smooth: true,
            data: data
        }
    ]
};

interval会首先保证可以整分的刻度(也就是说,interval必须是整数),先按照规定步长划分。剩余刻度不再划分。例如:min=0,max=5时,如果interval=2时,刻度就为2、2、1。

猜你喜欢

转载自blog.csdn.net/xiecheng1995/article/details/106848200