echart 柱狀圖 兩個縱軸坐標 刻度不一樣


在使用echart的過程中, 有的時候柱狀圖會使用兩個縱坐標, 如果兩個縱坐標的最大值是一樣的還好,這樣刻度也會一樣. 但是多數情況下最大值是不一樣的, 這樣就造成了,刻度線很亂,顯示不均勻.

解決辦法:

使用max , splitNumber, interval 三個屬性配合

{
            type: "value",
            name: "訂單量",
            position: "left",
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              onZero: true,
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel: {
              formatter: "{value}"
            },
            splitLine: { show: true },
            min: 0,
            max: 1,
            splitNumber: 5
            interval: "",
          },

  賦值最大值, 分割刻度:

        let max0 = data.max_count;
        if(data.max_count < 1){
          this.orderOption.yAxis[0].max = 1
        }else{
          for(let i=0; i<10; i++){
              if( max0/Math.pow(10, i) <10){
                    this.orderOption.yAxis[0].max = Math.ceil(max0/Math.pow(10, i)) * Math.pow(10, i)
                    this.orderOption.yAxis[0].interval = (Math.ceil(max0/Math.pow(10, i)) * Math.pow(10, i))/5
                    break;
                }
          }
        }

  這里的for循環可以用遞歸的, 但是遞歸不太會寫所以就用for循環代替, 不知道有沒有大神出來指導一下的


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM