echarts 双y轴 刻度线出现重复的解决方法 可自定义数据

由于左右数据量或者计数方式不一致 导致左右刻度线不统一
直接写个案例

// data 1 2 3 4 为左边的数据 5是右边的数据
     let data1 = [0, 7686, 11603],
     data2 = [9513, 0, 5550],
     data3 = [0, 0, 0],
     data4 = [];
     data5 = [12023, 10312, 200111.4, 21333, 1312, 10023, 5];
     
    let Min1 = this.calMin([data1, data2, data3, data4,]),
       	 Min2 = this.calMin([data5]),
    	 Max1 = this.addMax([data1, data2, data3, data4]),
    	 Max2 = this.calMax([data5]);

 // 计算最大值
  calMax = (arr: any) => {
    let max = 0;
	    arr.forEach((el: any) => {
	      if (!(el === undefined || el === '' || el.length === 0)) {
	       	 el.forEach((el1: any) => {
	          if (!(el1 === undefined || el1 === '' || el.length === 0)) {
	            if (max < el1) {
	              max = el1;
	            }
	          }
	        });
	      }
	    });
	    let maxint = Math.ceil(max / 9.5); // 不让最高的值超过最上面的刻度
	    let maxval = maxint * 10; // 让显示的刻度是整数
	    return maxval;
	  };


  //计算最小值
  calMin = (arr: any) => {
	    let min = 0;
	    arr.forEach((el: any) => {
	      if (!(el === undefined || el === '' || el.length === 0)) {
	        el.forEach((el1: any) => {
	          if (!(el1 === undefined || el1 === '' || el.length === 0)) {
	            if (min > el1) {
	              min = el1;
	            }
	          }
	        });
	      }
	    });
	    let minint = Math.floor(min / 10);
	    let minval = minint * 10; // 让显示的刻度是整数
	    return minval;
  };

  // 最大值相加
  addMax = (arr: any) => {
	    let max = 0;
	    arr.forEach((el: any) => {
	      if (el.length !== 0) {
	        max += Math.max(...el);
	      }
	    });
	    let maxint = Math.floor(max / 10);
	    let maxval = maxint * 10; // 让显示的刻度是整数
	    return maxval;
  	};

 然后在  
	yAxis: [
			{ min: Min1,
	          max: Max1,
	          splitNumber: 5,
	          interval: (Max1 - Min1) / 5,
	        },
		    {
		      min: Min2,
		      max: Max2,
		      splitNumber: 5,
		      interval: (Max2 - Min2) / 5 || 1,
		    }
          ] 
      里写  因为是双y轴数组里肯定是俩对象,默认是第一个左边 第二个右边。
      这样加进去最后展示的刻度线就一致了
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值