t-digital-gauge2

t-digital-gauge 说明

• 个人作品，纯 js 编写 canvas 实现
• 已经修复不可正常使用的问题
• 如果好用，点个赞哟

 t-digital-gauge2对上一个版本进行了完全重写
 上一代版本是临时版本，建议废弃
 绘制的重原理上进行了重新实现
 支持更多参数

安装

npm install t-digital-gauge2 -S

使用

      import { Knob, Swtich, DigitalGauge } from 't-digital-gauge2'
      let knobBOX = document.getElementById('knob')
      let swtichBOX = document.getElementById('swtich')
      let digitalgaigeBOX = document.getElementById('digitalgaige')

      let options={}    //option 是可选参数，内容为下面的配置项

      let knob = new Knob(knobBOX,options)
      let swtich = new Swtich(swtichBOX,options)
      let digitalgaige = new DigitalGauge(digitalgaigeBOX,options)

      setInterval(() => {
        digitalgaige.value = Math.random() * 100
      }, 2000)

SSR(服务端渲染)

  由于库使用到了document进行节点创建，故在服务端渲染的情况下，如下使用  下面为nextjs，nuxt中使用类似
  // import { DigitalGauge } from 't-digital-gauge2'
  function getDigitalGauge() {
    return process.browser ? require('t-digital-gauge2').DigitalGauge : function () { }
  }
  export default () => {
    useEffect(() => {
      const DigitalGauge = getDigitalGauge()
      const div = document.getElementById('digitalgauge')
      new DigitalGauge(div, { value: 50 })
    }, [])
    return <>
      <h1>这是demo</h1>
      <div id='digitalgauge' style={{ width: 200, height: 200, backgroundColor: "pink" }}></div>
    </>
  }

补充

        三个组件均提供 resize   destroy  方法，用于重新计算尺寸以及卸载组件

        组件没有使用双向绑定，但是通过setter对部分属性进行拦截
        比如 DigitalGauge
              value errorMsg  maxValue minValue time unitTitle title valueSuffix
            Swtich
              value errorMsg
            Knob
              value errorMsg
        上面经过拦截的属性，修改会即时生效

dist

  删除对moment  dayjs的依赖

配置项（option）

knob

参数	说明	备注
minValue	最小值
maxValue	最大值
title	标题
bgColor	背景色
tickCellArg	线条单位角度
value	指示的值
onChange	控制变化回调函数
decimals	精度
errorMsg	提示问题

swtich

参数	说明	备注
showOnOffLabels	最小值
onChange	控制变化回调函数
errorMsg	提示问题

digital-gauge

参数	说明	备注
minValue	最小值
maxValue	最大值
title	标题
time	时间
unitTitle	单位标题	不显示时间时有效
value	展示的数值
valueSuffix	数值的后缀
showMinMax	是否展示极值	donut 无效
showTitle	是否展示标题
showTimestamp	是否展示时间
showUnitTitle	是否展示单位标题	展示时间时强制不展示
gaugeType	gauge 的类型	horizontalBar：水平 verticalBar：竖直 donut 圆 arc：半圆
gaugeWidthScale	canvas 笔画相对大小	1 为宽或高的 1/3
titleFont	标题样式
labelFont	label 样式
valueFont	value 样式
minMaxFont	极值样式
levelColors	梯度色值
animation	动画
animationDuration	动画持续时间
roundedLineCap	canvas 笔帽
stripBasic	基本间隔	2px 或 2°
dashThickness	条形间隔
gaugeColor	背景色
defaultColor	不设置 levelColors 时的默认颜色

demo