关于echarts的y轴x轴刻度不等分,不等距的设置法
关于echarts的y轴x轴刻度不等分,不等距的设置法
前言
初衷是工作需要,同时用于记录一些心得(第一次写博客,写的不好请多见谅,ps:写这个是因为自己百度没找到,所有花了点时间做出来后分享给大家。)
提示:以下是本篇文章正文内容,下面案例可供参考
一、echarts
echarts图标是我们比较常用的,功能十分的强大并且便捷,当然,与自由度相对等的就是庞大的属性,这篇文章只是帮您节省一点时间。
二、关于坐标轴(y,x)不等距不等分的方法
在这里,我本人认为存在多种方法(目前认为三种),并且是具有可行性的,我会依次为各位说明(个人建议使用第三种):
1.使用MARKLINE实现Y轴刻度不等分(个人推荐)
MARKLINE是指series下的markLine属性,其本身官方的说明是"图表标线",在我看来就是自由画线,而且还有文本,就能搞起来!!,示例如下:
series: [
{
data: [0, 5,30, 2, 218, 135, 147, 260],
type: 'line',
connectNulls: true,
markLine: {
symbol: ['none', 'none'],//去掉箭头
itemStyle: {
normal: { lineStyle: { type: 'solid', color:'black'}
}
},
label:{
formatter: '{b}'
},
data: [{
name: '-20%',
yAxis: 0
},
{
name: '-10%',
yAxis: 2
},
{
name: '0%',
yAxis: 4
},
{
name: '10%',
yAxis: 8
}
]
}
}
]
};
这里要注意下,位置可以按照轴刻度索引来做,名称可以自定义,但要配套的设置label属性。
2.多Y轴叠加法(这个没具体代码)
这个我大致跟各位说一下思路,有喜欢的朋友可以自行尝试,原理就是,设置多个y轴,让他们的偏移量同样,使其叠加,然后分别负责不同距离的轴的显示,然后拉大显示间隔,稍微调整下,是可以模仿出来的,个人觉得这个最不少,模仿不如第一种,实用跟正统性不如第三种:
3.X轴Y轴回调函数设置法
这个是我最后使用的,也推荐给各位,原理也很简单,回调函数设置,无论是刻度线还是刻度文本都可以实现,缺点的话大概是就是你需要确定大致位置和对数据进行插空值吧。
option = {
xAxis: {
type: 'value',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'category',
min:0,
max:11,
axisLine:{
show:false
},
splitLine:{
show:false
},
axisTick:{
show:true,
alignWithLabel: true,
interval:(index)=>{
let b=[0,2,6]
for(let i in b){
if(index===b[i]){
return true
}
}
return false
}
},
axisLabel: {
formatter: (item,index)=>{
let a= ['0', '20', '60', '3', '4', '5', '6']
let b=[0,2,6]
for(let i in b){
if(index===b[i]){
return a[i]
}
}
return ''
}
}
},
series: [
{
data: [0,null, 5,,,,30,null,null,null,null, 2, 218, 135, 147, 260],
type: 'line',
connectNulls: true
}
]
};
重点在于y轴的刻度文本axisLabel跟刻度线axisTick的函数设置法,大概就是我将y轴分成一百份,然后只显示特定份数位置的值,相对的,隐藏掉的填充刻度地方,相对应的也要在series的data数据中填上对应的空值。
2021年12月23日修改:经过测试,第三种并不好用,在高度过低情况下会自动进行刻度缩减,所以在无法保证高度情况下,请使用第一种。
结尾
感谢各位的阅读,如果这篇文章能为各位提供思路并且节省些时间是我的荣幸。
同时也希望各位可以收藏点个赞,毕竟打字不易啊。
若您要转载给其他朋友分享,也请标注一下出处,感谢大家!