Echarts双纵轴分隔线合并解决方案

Posted 2022-12-10 码小余の博客

Echarts 双纵轴分隔线合并解决方案

问题来源

因为右纵轴要限制最大值，所以导致了整个Echarts图的分隔线分裂开来

• 首先需要在 Echarts 中配置选项

  yAxis: [
      
          type: 'value',
          name: '当日营收',
          axisLabel: 
              formatter: 'value 元'
          ,
          max: null, // 最大订单数(null/undefined 来表示“自动计算最大值”)
          splitNumber: 6, // 刻度数(没用)
          interval: null // 限制分隔间隔
      ,
      
          type: 'value',
          name: '当日在线订单',
          axisLabel: 
              formatter: 'value 条'
          ,
          max: null, // 最大订单数(null/undefined 来表示“自动计算最大值”)
          splitNumber: 6, // 刻度数(没用)
          interval: null // 限制分隔间隔
      
  ],
  

• 然后动态渲染Echarts

  • 1、定义分隔段数
  • 2、计算列表中的最大值
  • 3、计算分隔数 = 最大值 / 分隔段数，再向上取整
  • 4、重新计算最大值 = 分隔数 * 分隔段数
  • 5、赋值渲染 Echarts

  var maxLy = 0 // 最大当日营收金额
  var maxRy = 0 // 最大订单条数
  var gap = 6 // 分隔段数
  var intervalLy = null // 当日营收金额分隔间隔数
  var intervalRy = null // 订单条数分隔间隔数
  
  res.data.forEach((item) => 
      if(maxLy < item.drys) 
          maxLy = item.drys
      
      if(maxRy < item.jxz) 
          maxRy = item.jxz
      
  )
  
  // console.log(maxLy);
  // console.log(maxRy);
  // 如果大于6条则设置为null，否则设置为6
  if(maxLy <= gap) 
      maxLy = gap
  
  
  if(maxRy <= gap) 
      maxRy = gap
  
  
  // 计算间隔数 = 当前最大值 / 分隔段数，再向上取整
  intervalLy = Math.ceil(maxLy / gap)
  intervalRy = Math.ceil(maxRy / gap)
  
  // 计算左侧为间隔倍数的最大值
  maxLy = intervalLy * gap
  // 计算右侧为间隔倍数的最大值
  maxRy = intervalRy * gap
  
  this.option.yAxis[0].interval = intervalLy // 左纵轴间隔数赋值
  this.option.yAxis[1].interval = intervalRy // 右纵轴间隔数赋值
  this.option.yAxis[0].max = maxLy // 左纵轴最大值赋值
  this.option.yAxis[1].max = maxRy
  // 渲染 Echarts
  this.myChart.setOption(this.option);
  

• 以上值缺一不可

• 最大值max是用来限制可以显示的最大值，如果不限制最大值的话，会默认设置一个最大值，这样左右两轴的分隔线就对不齐了😊

• 这里我没有限制最小值，而是让数据默认从最小的开始的，如果有需要，可以去设置最小值

• 效果图