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

2024-06-10 17:43| 来源: 网络整理| 查看: 265

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。

【本文地址】

公司简介

联系我们