序论

　　以前有个网友问我了一个颇有价格的成绩, 相闭达成数据可视化的成绩, 然则这个可视化成绩不是寻常的柱状图, 折现图之类的,而是不端正刻度的数据可视化.于是笔者思量了一下断定己方达成一个静态刻度可视化组件的计划, 来治理这一类的需要.

　　

　　 注释

　　最初的需要是如许的:

　　

　　咱们只要要输入笔墨, 数值比例, 就能天生如上图所示的刻度图.然则行动一位有寻觅的法式员, 需求对成绩形象化, 构成通用的治理计划,于是咱们入手下手重组需要:

　　

　　由上图咱们能够拆解为一下几个需要点:

　　 接济数值自界说 数值单元自界说 接济刻度组件宽度自界说 接济刻度线数目自界说 接济刻度蜕变幅度自界说 传入已有进度比例,即激活区规模 接济刻度款式自界说 接济数值款式自界说 接济自界说注明文本以及注明文本自界说

　　以上便是笔者开采的通用需要,固然有其余需要也能够渐进的增众.

　　确认了以上需要以后,咱们入手下手选拔技艺选型, 笔者以前常用的技艺栈是vue和react,于是接上去咱们开端确认该组件采取如下技艺计划:

　　 react + typescript + umi-library

　　倘使大众善于运用vue, 也能够, 笔者以前也写过怎样搭筑vue的组件库闭系的作品,感趣味能够练习领会一下, 其实质怀念是同等的.

　　接上去咱们入手下手达成静态刻度可视化组件. 倘使对umi不熟习的,能够参考笔者以前写的作品从0到1教你搭筑前端团队的组件编制(高等进阶必备).

　　 1. 界说根本属性范例

　　由以上需要分解咱们能够界说如下的属性范例:

　　

exportinterfaceTickerProps{width:number;maxHeight:number;percent:number;text:string;value:number;showValue:boolean;unit:string;lineNum:number;defaultColor:string;activeColor:string;textStyle:object;valueStyle:object;}

2. 组件团体组织

constTicker:React.FC<TickerProps>=function(props:TickerProps){const{width=100,maxHeight=10,percent=50,value,text=刹时能睹度,showValue=true,unit=M,lineNum=12,defaultColor=#06c,activeColor=red,valueStyle,textStyle}=propsreturn(<divclassName="ticker">{showValue&&<divclassName="value"style={valueStyle}>{value

文章推荐：

回放今天cba篮球视频

13日什么台直播欧洲杯

怎么直播欧洲杯

cba授狐体育