js实现colorscale
动态值场景说明：根据值的大小，给定长尺度划分动态单位尺度。1.css比例尺实现比例尺由许多小块（li）和比例尺线（a）组成。在这种情况下，以100个像素和5个单元块的总长度为例。第一步：首先模拟等长单位的尺度。如果比例尺的总长度是100px，那么单位长度就是20px，一共有5个格子。刻度的第一步是通过使用伪类在刻度上添加刻度线，最后在单位刻度上添加一个值。（片段代码如下）20k15k10k5k0
.colorBarScale-container{z-index:10;右：7%；底部：4%；位置：绝对；}.colorBarScale{列表样式：无；背景图像：线性渐变（到顶部，#0c3383，#005ea3，#0a88ba，#00c199，#f2d338，#F6b132，#f28f38，#e76124，#d91e1e）；宽度：25px；高度：100px；/*显示：弹性；*/弹性方向：列；左填充：0；显示：块；}.colorBarScale>.colorBarScaleli{宽度：10px；高度：20px；位置：相对；左边距：15px；显示：块；}.colorBarScaleli:first-child::before{height:0px;}.colorBarScaleli:first-child>a{margin-top:-8px;}.colorBarScaleli:last-child::before{底部：-2px;顶部：20px；}.colorBarScale>a{margin-top:-10px;左边距：35px；显示：块；颜色：#79d0f3；文字修饰：无；}.colorBarScale>.colorBarScaleli:before{内容：“”；位置：绝对；左：0；顶部：0px；宽度：100%；高度：1px；背景色：#000；}.colorBarScale>.colorBarScaleli+.colorBarScaleli{左边框颜色：灰色；}.colorBarScale>.colorBarScaleli>a{显示：块；位置：绝对；高度：20px；行高：20px；左边距：20px；边距顶部：-10px；颜色：#79d0f3；文字修饰：无；}//等距比例尺2.比例尺单位化1.获取最近的单位长度假设现有单位选择为：5,10,15,20,30,50,100,200,300,500,1000,1500,2000,5000、10000、15000、18000、20000、22000、25000、28000、30000、30000、35000、40000、100000、100000、100000、200000、500000、1000000、2000000、5000000、5000000、10000000（自定义单位序列），根据获得最大值nearestunit最大值为5000：最近的单位为1000；最大值为45000，以5个单位为例，一个单位为9000，但实际序列如果列中没有9000，那么最近的单位应该是10000；搜索方法：第一步：unit：最大值除以预设的刻度单位（本例为4格），得到平均单位长度第二步：nearCale：将平均单位长度与预设单位长度进行比较，得到最接近的等于长度（即：网格单元）。第三步：unitCalePX：根据计算出的单位长度，计算单位长度对应的像素点（即：一个格子的长度）。第四步：插入dom2。获取最近单位长度值1000格式：1kValue1000000格式：1Mjs实现//格式化最近单位长度函数formatterUnit(value:number,unitValue:number){letunitArr=['','k','M','G','T'];让unit=Math.floor((value.toString().length-1)/3);//获取单位基数letisFormatterValue=Math.floor((unitValue.toString().length-1)/3);//用于判断是否格式化letformatterValue=isFormatterValue>0?单位>0?((value/Math.pow(1000,unit))+unitArr[unit]):(value+''):(value+'');returnformatterValue;}//获取最近的单位functiongetNearCale(value:number){constscalArr=[5,10,15,20,30,50,100,200,300,500,1000,1500,2000,5000,10000、15000、18000、20000、22000、28000、30000、35000、40000、100000、5000000、2000000、2000000、5000000、10000000]；让nearCale:number[]=[];让scalIndex:number=0;scalArr.forEach((item,index)=>{if((value/item)<1&&nearCale.length<1){nearCale.push(value);r返回;}elseif((value/item)>=1){nearCale.push(item);scalIndex=索引；}});//判断是否有更接近的单位scaleif((1-value/scalArr[scalIndex+1])<(value/scalArr[scalIndex+1]-1)){nearCale.push(scalArr[scalIndex+1]);}让len=nearCale.length;returnnearCale[len-1]}//Unitizationscale（最大值为23626）代码详细地址
