记录贴——echarts图表动态刻度尺的简单实现

项目场景:

如下图表:

效果图


问题描述:

后端传来的数据单位为bps,需要前端根据数据动态换算到对应的单位

换算关系为

1024 bps => 1kbps

1024 kbps => 1Mbps

1024 Mbps => 1Gbps

此处换算较为简单,只需一个简单函数实现

// 动态计算流量单位
export function calcUnit(value){
  // 初始单位bps
  let unit_arry = ['bps', 'kbps', 'Mbps', 'Gbps'], unit_index = 0, res = +value;
  while(res >= 1024&&unit_index<3){
    res = res/1024;
    unit_index++;
  }
  // 此处返回值保留一位小数
  return [Math.round(res*10)/10,unit_arry[unit_index]];
}

然后配置到图表对应的formatter即可

在对yAxis上的刻度formatter配置了换算函数后,出现了下面的效果

y轴上刻度并没有像之前的echarts图表那样以10 100 等整数刻度显示,而是出现了小数


原因分析:

出现这种情况的原因是:echarts用来动态计算刻度的数据并没有因为自定义的显示格式化而改变,echarts是根据十进制来计算的,而由于字节单位的计算是以1024进行单位换算的,就会造成这种现象。


解决方案:

根据返回数据中的最大值,设计算法获取大于并接近其的大整数,使该整数位刻度的最大值

如:

最大值    返回值

88  =》  90

888  =》  900

8888 =》  9000

算法简单实现如下

function getMaxLine(num){
    let pow = 0;
    // 现将数据处理至能达到的最大单位(Gbps为上限)
    while(num >= 1024 && pow < 3){
        num = num/1024;
        pow++;
    }
    // 数据向上取整
    num = Math.ceil(num);
    // 计算达到最近数据的差
    let pad = Math.pow(10,calcWei(num)) - (''+num).substring(1);
    return (num + pad)*Math.pow(1024,pow);
}

// 以10为倍数计算最大值的位数(-1)
function calcWei(value){
    let res = 0;
    while(value >= 10){
        value = value/10;
        res++;
    }
    return res;
}

实现效果:

注意:

echarts图表只设置yAxis的max值时并不会自动平均间隔,需要设置splitNumber,interval将其强制分割

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页