关于javascript:js实现动态数值的colorscale

场景形容：依据数值大小，给定长刻度尺划分动静单位刻度。

 刻度由很多个小块（li）、刻度线（a）组成。本次案例中以总长 100 个像素，五个单位块为例。

第一步：首先模仿等长单位的刻度。
设刻度尺总长度为 100px，那么单位长度为 20px，总共 5 个格子。通过应用伪类的形式给刻度尺增加刻度线，最初给单位刻度增加数值就实现了第一步刻度尺。
（片段代码如下）

<div class="colorBarScale-container">
    <ul class="colorBarScale">
        <li class="colorBarScaleli">
            <a class=""href="javascript:void()"></a>
        </li>
        <li class="colorBarScaleli">
            <a class=""href="javascript:void()">20k</a>
        </li>
        <li class="colorBarScaleli">
            <a class=""href="javascript:void()">15k</a>
        </li>
        <li class="colorBarScaleli">
            <a class=""href="javascript:void()">10k</a>
        </li>
        <li class="colorBarScaleli">
            <a class=""href="javascript:void()">5k</a>
        </li>
        <a class=""href="javascript:void()">0</a>
    </ul>
</div>

     .colorBarScale-container{
        z-index: 10;
        right: 7%;
        bottom: 4%;
        position: absolute;
    }
    .colorBarScale {
        list-style: none;
        background-image: linear-gradient(to top, #0c3383,#005ea3, #0a88ba, #00c199, #f2d338, #F6b132, #f28f38, #e76124, #d91e1e);
        width: 25px;
        height: 100px;
        /* display: flex; */
        flex-direction: column;
        padding-left: 0;
        display: block;
    }

    .colorBarScale >.colorBarScaleli {
        width: 10px;
        height: 20px;
        position: relative;
        margin-left: 15px;
        display: block;
    }
    .colorBarScale li:first-child::before {height: 0px;}
    .colorBarScale li:first-child> a{margin-top: -8px;}
    .colorBarScale li:last-child::before{
        bottom: -2px;
        top: 20px;
    }

    .colorBarScale > a{
        margin-top: -10px;
        margin-left: 35px;
        display: block;
        color: #79d0f3;
        text-decoration: none;
    }

    .colorBarScale>.colorBarScaleli:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0px;
        width: 100%;
        height: 1px;
        background-color: #000;
    }

    .colorBarScale>.colorBarScaleli+.colorBarScaleli {border-left-color: gray;}

    .colorBarScale > .colorBarScaleli > a {
        display: block;
        position: absolute;
        height: 20px;
        line-height: 20px;
        margin-left: 20px;
        margin-top: -10px;
        color: #79d0f3;
        text-decoration: none;
    }

// 等长刻度

假如现有单位抉择为：5, 10, 15, 20, 30, 50, 100, 200, 300, 500, 1000, 1500, 2000, 5000, 10000, 15000, 18000, 20000, 22000, 25000, 28000, 30000, 35000, 40000, 50000, 100000, 200000, 500000, 1000000, 2000000, 5000000, 10000000（自定义单位序列）
依据最大数值获取最邻近单位
```
  最大值为 5000：最邻近单位为 1000；最大值为 45000，以 5 个单位为例，一个单位为 9000，但理论序列里没有 9000，那么最邻近的单位则应该为 10000；
```
查找办法：
第一步：unit：用最大值除以预设刻度尺单位（本次案例中为 4 个格子）取得均匀单位长度。
第二步：nearCale：用均匀单位长度与预设单位长度比拟获取最邻近的等长（即：一个格子的单位）。
第三步：unitCalePX：依据计算所得的单位长度，计算出单位长度对应的像素（即：一个格子的长度）。
第四步：插入 dom

    数值 1000 格式化：1k
    数值 1000000 格式化：1M

js 实现

// 将最近单位格式化
function formatterUnit(value:number, unitValue: number){let unitArr = ['','k','M','G','T'];
  let unit = Math.floor((value.toString().length - 1) / 3);   // 获取单位进制
  let isFormatterValue = Math.floor((unitValue.toString().length - 1) / 3);   // 用于判断是否格式化
  let formatterValue = isFormatterValue > 0 ? unit > 0 ? ((value / Math.pow(1000,unit)) + unitArr[unit] ) : (value + ''):(value +'');
  return formatterValue;
}
// 获取最近单位
function getNearCale(value: number){const scalArr = [5, 10, 15, 20, 30, 50, 100, 200, 300, 500, 1000, 1500, 2000, 5000, 10000, 15000, 18000, 20000, 22000, 25000, 28000, 30000, 35000, 40000, 50000, 100000, 200000, 500000, 1000000, 2000000, 5000000, 10000000];
  let nearCale: number[] = [];
  let scalIndex:number = 0;
  scalArr.forEach((item, index)=>{if( (value / item) < 1 && nearCale.length < 1){nearCale.push( value);
      return;
    }else if((value / item) >= 1){nearCale.push(item);
      scalIndex = index;
    } });
    // 判断是否有更靠近的单位刻度
  if((1 - value / scalArr[scalIndex + 1]) < (value / scalArr[scalIndex + 1] - 1) ){nearCale.push(scalArr[scalIndex + 1]);
  }
  let len = nearCale.length;
  return nearCale[len - 1]
}

// 单位化刻度（最大值为 23626）

代码具体地址

关于javascript:js实现动态数值的colorscale

1. css 刻度实现

2. 刻度单位化

1. 获取最近单位长度

2. 获取最近单位长度