美文网首页
echarts多Y轴刻度保持一致

echarts多Y轴刻度保持一致

作者: 码老二 | 来源:发表于2020-01-11 16:01 被阅读0次

先展示效果图如下:


效果图

实现方法是通过官网提供的配置项


splitNumber
interval

实现的思路为:
算出每组数据的最大值,将每组数据分割为相同的段数,为了每段刻度数据展示优雅,我将每组的数据的最大值向上取整到整十整百等等,根据实际的数据来定,源代码针对项目对echarts做了二次封装,以下展示部分主要代码

// 处理每组数据的类方法
class ChartDataHandle {

  constructor (arr) {
    this.arr = arr
  }

  clacMax () {
    const newArr = this.arr
    newArr.sort((a, b) => a - b)
    return newArr[newArr.length-1]
  }

  interval (count) {
    const theMax = this.clacMax()
    const thisMaxStr = theMax + ''
    const start = Number(thisMaxStr.substr(0, 1))
    if (start < 9) {
      return (start+1)*Math.pow(10, thisMaxStr.length-1)/count
    }
    return Math.pow(10, thisMaxStr.length)/count
  }
}

export default ChartDataHandle


...

// 应用
if (props.isMultipleYAxes) {
    for (let i=1, len=data.chartData.length; i<len; i++) {
      const j = i-1;
      const chartDataHandle = new ChartDataHandle(data.chartData[i])

      yAxis.push({
        "type": "value", 
        "name": data.chartData[i][0], 
        "position": i%2 === 0 ? 'right' : 'left',
        "offset": Math.floor((i-1)/2)*60,
        "axisLine": {
          "lineStyle": {
            "color": BAR_COLOR[j]
          }
        },
        "splitNumber": 5,
        "interval": chartDataHandle.interval(5)
      });
    }
  }

相关文章

网友评论

      本文标题:echarts多Y轴刻度保持一致

      本文链接:https://www.haomeiwen.com/subject/zixbactx.html