关于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日修改：经过测试，第三种并不好用，在高度过低情况下会自动进行刻度缩减，所以在无法保证高度情况下，请使用第一种。

结尾

感谢各位的阅读，如果这篇文章能为各位提供思路并且节省些时间是我的荣幸。
同时也希望各位可以收藏点个赞，毕竟打字不易啊。
若您要转载给其他朋友分享，也请标注一下出处，感谢大家！