1.0.5 • Published 5 years ago
t-digital-gauge 说明
安装
npm install t-digital-gauge -S
使用
import DigitalGauge from "t-digital-gauge";
let gauge = new DigitalGauge(dom, [option]);
dom 方式图标的dom元素，可以是div 等等
option 配置项
补充说明
如何使用报错，请拷贝 src 下的 digitalGauge 到项目中，通过 import 直接导入
配置项（option）
| 参数 | 说明 | 备注 |
|---|
| type | 图表类型 | vertical/ horizontal /circle/semi-circle |
| value | 值 | |
| min | 最小值 | 默认 0 |
| max | 最大值 | 默认 100 |
| tickWidthPercent | tick 的百分比 | 默认 0.3 |
| minTickWidth | tick 的最小 px | 默认 20 |
| maxTickWidth | tick 的最大 px | 默认 60 |
| lineCap | canvas 的 lineCap | 默认 butt |
| backgroundColor | 图的无值部分的颜色 | 默认 #eee |
| foreColor | 前景色 | colorType 为 fixed 生效 默认 #00ff00 |
| tickMinColor | 值为 0 的安全色 | 默认 rgba(0,255,0,1) colorType 为 gradual 有效， |
| tickMaxColor | 最大值的警告色 | 默认 rgba(255,0,0,1) colorType 为 gradual 有效， |
| colorType | 颜色方案 | fixed 固定 foreColor stepSingle 阶梯单色 stepMultiple 阶梯多色 gradual 渐变色 |
| showValue | 是否显示 value | 默认 true |
| showMinLabel | 是否显示 minLabel | 默认 true |
| showMaxLabel | 是否显示 maxLabel | 默认 true |
| minLabelColor | minLabel 的颜色 | 默认 #ddd |
| maxLabelColor | maxLabel 的颜色 | 默认 #ddd |
| stepColors | 阶梯颜色 | 默认 0.95, "#ff031b",0.9, "#ff4828",0.8, "#ff710a",0.7, "#ffad02",0.6, "#ffdb00",0.5, "#f1f502", 0.4, "#b1eb05", 0.3, "#81eb0a", 0.2, "#38d912",0.1, "#04cc17", 0, "#02b013" |
| animation | 是否开启过渡动画 | 默认 true |
| animationDuration | 过渡时间 | 默认 500 |
| unit | 单位 | 默认 '' |
| subText | value 下下方的次级标题文字,目前 subText 相关只对 circle 有效 | 默认 '' |
| subTextOffset | subText 的偏移 | 默认 0,0 |
| subTextColor | subText 的颜色 | 默认 不设置时与 value 颜色相同 |
| subTextAlign | subText 的水平对齐 | 默认 center |
| subTextBaseline | subText 的垂直对齐 | 默认 top |
以下参数在不同的 type 下有不同的默认值
| 参数 | 说明 | 备注 |
|---|
| minLabelOffset | minLabel 的偏移 | x,y |
| maxLabelOffset | mmaxLabel 的偏移 | x,y |
| padding | 图的 gauge 部分的边界 | x,y |
| valueOffset | value 的偏移 | x,y |
| valueTextAlign | value 的对齐方式 | canvas 的 textAlign |
| minLabelTextAlign | minLabel 的对齐方式 | canvas 的 textAlign0 |
| maxLabelTextAlign | maxLabel 的对齐方式 | canvas 的 textAlign |
| valueTextBaseline | value 的垂直对齐方式 | |
| minLabelTextBaseline | minLabel 的垂直对齐方式 | |
| maxLabelTextBaseline | maxLabel 的垂直对齐方式 | |
| tickRatio | tick 的宽高比 | 默认 10 |
| BlankTickRatio | tick 与空白的比 | 默认 1 |
| startArg | 起始角度 | Math.PI |
| endArg | 结束角度 | 2*Math.PI |
| centerPosition | 中心点方位 | type 为 semi-circle 有效 |
| autoArg | 自动计算 padding label 的对齐方式等 | type 为 semi-circle 有效 |
实例方法
| 方法 | 参数 | 说明 |
|---|
| setOption | option forceLoad | option 用于覆盖配置 forceLoad 为 true 会重新生成 canvas 节点 |
| setValue | value noAnimation | value 值 noAnimation 强制不适用动画 |
| resize | size | 重新计算尺寸,不传会自动根据 dom 计算,传入则应包含 w（宽） h（高） |
工具函数
| 函数 | 参数 | 说明 |
|---|
| valToColormeta | val, max, min, isA | 通过当前值的比例（比如 0.3），计算 min 和 max 中间对应比例的值 |
| getRGBA | color | 通过正则的方式取出颜色字符串中的 r,g,b,a |
demo
| 图片 | option |
|---|
 | {type:'vertical'} |
 | {type:'horizontal'} |
 | {type:'circle'} |
 | {type:'semi-circle',centerPosition: 'bottom'} |