使用echarts强制将y轴分段,y轴显示的值小于1024,自动计算单位


    (1)将y轴强制分为五段,效果图:

    

    实现方法:在yAxis:{}中配置最大值和最小值还有分段的值,核心代码如下:

            min: 0,
            max: this.unit.max,
            interval: this.unit.max/5,

    因为这里需要设计的是实时备份流量,所以这里的max是一个变化的值,所以就先设计了一个变量,每当数据请求一次,max也会跟着变化

 

    (2)将y轴展示的值转化成小于1024的值:效果图在上方进行了展示,由于后端传递给前端的数值的单位是字节类型的,数据量特别大,所以在展示的时候需要对数据进行转化,转变成小于1024的值

    实现方法:在yAxis中的 axisLabel 属性 进行配置 。 实现想法是:在数据进行显示前进行拦截,拦截到了数据,然后在进行修改,修改完了在进行显示,核心代码如下:

    

    axisLabel: {
              formatter: (value) => {  //formatter拦截数据展示的方法
                let max = this.unit.data.reduce((a,b)=>a>b?a:b);
                if(max == 0){
                  return value
                }else{
                  value = this.y_axis_data_display(max,value); //该方法是将展示的值转化成小于1024的数据
                  return value
                }
              }
            }
-------------------------------分割线--------------------------------------
    /*
      实现方式:获取到传递过来的最大值和需要转变的值,
      先确定最大值是属于哪一个数量级的,然后在将这个
      数量级转化保存下来,然后在通过这个数量级将需要
      转变的值转化成同一个数量级的值
    */
    y_axis_data_display(max,value){
if (max <= 0) { value = '0'; } else{ let k = 1024; let c = Math.floor(Math.log(max) / Math.log(k)); if(c == -1){ c=0 } value = (value / Math.pow(k, c)).toFixed(1); } return value },

 

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM