Echarts雙Y軸刻度分割線對不齊問題

已發(fā)布Echarts社區(qū)點(diǎn)擊查看

一、問題如圖所示

image.png

為了美觀必須要去掉一個(gè)Y軸的分割線，然而去掉一條后數(shù)值跑偏對不上

image.png

二、 計(jì)算Y軸最大值，基于最大值均分

取出每一列最大值

在堆積圖表中需要取出每一個(gè)X軸對應(yīng)的多個(gè)series item的值，進(jìn)行累計(jì)得出當(dāng)前X軸最大值，最后取出所有X軸的最大值。如下圖：

image.png

var series = [{
    yAxisIndex: 0,
    name: '直接訪問',
    type: 'bar',
    stack: '總量',
    data: [2, 2, 2, 2, 2, 2, 11]
  }, {
    yAxisIndex: 0,
    name: '直接訪問2',
    type: 'bar',
    stack: '總量',
    data: [2, 2, 2, 2, 2, 2, 17]
  }, {
    name: '轉(zhuǎn)化率',
    type: 'line',
    data: [90, 60, 80, 30, 15, 68, 77],
    yAxisIndex: 1
  }]

  const Y1Series = [];
  const Y2Series = [];
  let Y2Max = 0;
  let Y1Max = 0;

  series.forEach((item) => {
    if (item.yAxisIndex === 0) {
      Y1Series.push(item.data)
    } else {
      Y2Series.push(item.data)
    }
  })
/* 
此時(shí)
Y1Series = [[2, 2, 2, 2, 2, 2, 11],[2, 2, 2, 2, 2, 2, 17]]
Y1Series = [90, 60, 80, 30, 15, 68, 77]
*/
  /*
   params { array }  [] => [[series.data],[series.data]],[series.data]]]
   return number
  */
  function getYaxisMax(seriesList) {
    var res = [];
    seriesList.forEach((item) => {
      item.forEach((i, idx) => {
        if (!res[idx]) {
          if (isNaN(i / 1)) {
            res[idx] = 0
          } else {
            res[idx] = i / 1
          }
        } else {
          if (isNaN(i / 1)) {
            res[idx] += 0
          } else {
            res[idx] += i / 1
          }
        }
      })
    });
    return Math.max.apply(null, res)
  }

Y1Max = getYaxisMax(Y1Series) // Y1軸最大值
Y2Max = getYaxisMax(Y2Series) // Y2軸最大值

如下圖所示

現(xiàn)在雖然2個(gè)Y周的刻度分割線一致了，但是新的問題有來了
2條Y軸的刻度值，和刻度間隔值。存在小數(shù)，且間隔值并不是 5，50，10，100之類的數(shù)

image.png

三、解決刻度間隔值問題

  // 刻度最大值
  function yAxisMax(maxValue) {
    if (isNaN(maxValue / 1) || maxValue / 1 < 10) {
      return 10
    }
    const max = Math.ceil(maxValue) + '';
    const itemValue = Math.ceil(max / 5) + '';
    const mins = Math.ceil((itemValue / Math.pow(10, itemValue.length - 1)))
    const item = mins * Math.pow(10, itemValue.length - 1) + '';
    // item 需要是5的整數(shù)倍
    const res = Math.ceil(item / 5) * 5 * 5;
    return res
  }

最終效果

image.png

image.png

已發(fā)布Echarts社區(qū)點(diǎn)擊查看