echartsY轴设置最大最小区间

1. 拿到数组中的最大值和最小值

let setDataMinMaxVal = function (data) {
  var obj={
    "min":0,
    "max":0
  }
  var arr=[];
  for(var i=0;i<data.length;i++){
    if(data[i]!='null'&&data[i]!='undefined'){
      arr.push(data[i]);
    }
  }
  arr=arr.filter(Boolean);
  if (!arr.length) return obj;
  let minNum = parseFloat(arr[0] || 0);
  let maxNum = parseFloat(arr[0] || 0);
  for (let i = 0; i <arr.length; i++) {
    let e = parseFloat(arr[i] || 0);
    if (Object.is(e, NaN)) {
      continue;
    }
    //最小
    if (e < minNum) {
      minNum = e;
    }
    //最大
    if (e >maxNum) {
      maxNum = e;
    }
  }
  obj.min=parseFloat(minNum);
  obj.max=parseFloat(maxNum);
  return obj
}
let sws = []
//获取最大最小值
// this.seriesDate1, this.seriesDate2 是要计算的两个数组
var minMaxObj = this.$filter.setDataMinMaxVal(
    sws.concat(this.seriesDate1, this.seriesDate2)
 );

2. 拿到最小值后计算Y轴的两个值

 中间五分之四的空间来展示,上下空出,这个可以自由调节

let aMax = 0; 最大最小相减得到的值
let yMax = 0; //Y最大值
let YMin = 0; //Y最小值

aMax = parseInt((minMaxObj.max - minMaxObj.min) / 0.8); //最大最小相减得到的值
// 0.12 是顶部空出的百分比,可以调节
yMax = (minMaxObj.max + aMax * 0.12).toFixed(0); //Y最大值
// 0.08 是底部空出的百分比,可以调节
YMin = (minMaxObj.min - aMax * 0.08).toFixed(0); //Y最小值

3. 给y轴设置

yAxis: [
          {
            // 坐标轴单位
            name: "",
            type: "value",
            min: YMin,
            max: yMax,
            // 内分割线
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0E4698"
                //  type:'dashed'
              }
            },
            // 刻度
            axisTick: {
              show: false
            },
            // 坐标轴字体
            axisLabel: {
              textStyle: {
                color: "rgba(223, 238, 242, 0.80)",
                fontSize: 12
              }
            }
          },
//第二条坐标轴单独设置的
          {
            // 坐标轴单位
            name: "",
            type: "value",
            // 内分割线
            splitLine: {
              show: false
            },
            // 刻度
            axisTick: {
              show: false
            },
            // 坐标轴字体
            axisLabel: {
              textStyle: {
                color: "rgba(223, 238, 242, 0.80)",
                fontSize: 12
              }
            },
            min: function(value) {
              return Math.round(value.min - (value.min / 0.8) * 0.1);
            },
            max: function(value) {
              return Math.round(value.max + value.max * 0.12);
            }
          }
        ],

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值