当前位置:

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

本文最后更新于2021-10-21,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共1130个字,读完预计3分钟。

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。
————————————————
版权声明:本文为CSDN博主「酷酷的橙007」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xiecheng1995/article/details/106848200

本文链接:,转发请注明来源!
评论已关闭。