Canvas-credit-score
面向现代主流浏览器实现的 Canvas 绘制的一个类似支付宝信用分的组件
- 支持高清绘制(走像素比,然后缩放)
- 文字等分的传入
- 虚线等分的传入
- 线条大小,颜色
- 文字的色彩及大小
默认分数段是 450-850,角度 42 等分,文字 5 等分。。。
没那么严谨的各种判断,只是为了满足业务需求写的,有兴趣完善的可以提交 PR
安装
// yarn add canvas-credit-score
npm install --save canvas-credit-score
用法
// 引入; // 初始化let cs = el: ''/*options*/; cs; // 执行绘制 // 也可以调用init函数来设置配置,再执行绘制let cs2 = el;cs2;cs2; // 执行绘制
选项
- 参数(直接拿
typescript
的描述了哈)
interface defaultParams x: number; // 圆心的x坐标 y: number; // 圆心的y坐标 startAngle: number; // 开始的角度 endAngle: number; // 结束的角度 currentAngle: number; // 当前的角度 scoreStart: number; // 起步分 scoreTarget: number; // 目标分 scoreMin: number; // 最低分 scoreMax: number; // 最高分 scoreEvaDate: string; // 评估日期 segAngle: number; // 总角度分成几等分 outerTextSeg: number; // 外围文本分成几份 style: styleParams; // 样式 interface styleParams line?: initColor?: string // 初始化颜色 activeColor?: string // 高亮的颜色 width?: number // 线条的粗细 ; dashLine?: initColor?: string // 初始化颜色 activeColor?: string // 高亮的颜色 width?: number // 线条的粗细 ; outerText?: // 外环文本 fontSize?: number color?: string ; innerText?: score?: fontSize?: number color?: string level?: fontSize?: number color?: string date?: fontSize?: number color?: string fontWeight?: string ;
- 方法
instance.drawBaseMap()
- 读取配置后绘制图形instance.init()
- 配置参数,可选。也可以在构造函数传入instance.refresh(delay,callback)
- 延迟多少秒后再次渲染,支持回调函数的传入
License
The MIT License (MIT). Please see License File for more information.