zoukankan      html  css  js  c++  java
  • 使用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 },

      

  • 相关阅读:
    [codeforces] 97B Superset || 平面分治
    [hdu] 5696 区间的价值 || 序列分治
    [zoj] 1937 [poj] 2248 Addition Chains || ID-DFS
    [poj] 2286 The Rotation Game || ID-DFS
    [codeforces] 25E Test || hash
    luogu P1196 银河英雄传说
    luogu P1357 花园
    luogu P1156 垃圾陷阱
    luogu P1127 词链
    luogu P1131 时态同步
  • 原文地址:https://www.cnblogs.com/kdiekdio/p/12167161.html
Copyright © 2011-2022 走看看