t-digital-gauge

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'}