更新记录

1.0.3（2022-05-15）

• 增加圆环宽度字段以及起始角度字段
• 增加动画以及渐变

1.0.2（2022-05-13）

修复bug，并更新使用文档

1.0.1（2022-05-03）

修复了一些问题以及扩展可以作为环形进度条使用

平台兼容性

仪表盘

自定义仪表盘

使用canvas自定义仪表盘，通过文件引入类Gauge,实例化传参来运行

功能

• [x] 刻度线显示
• [x] 当前值显示
• [x] 固定起始终止角度
• [x] 既可当做仪表盘，也可以当做环形进度条使用
• [x] 渐变色
• [x] 动画

没有做太多的扩展性设计，可将组件下载下来自行设置以符合不同业务的需求

参数

• 仪表盘设计是顺时针旋转，暂时不支持逆时针旋转

使用案例

• 提供两个demo供参考

<template>
  <view class="gauge-container">
    <view class="title">温度类</view>
    <canvas class="canvas" canvas-id="canvas"></canvas>
    <view class="title">进度类</view>
    <canvas class="canvas" canvas-id="canvas2"></canvas>
  </view>
</template>

<script>
import Gauge from "./index.js";
export default {
  name: "gauge",
  data() {
    return {};
  },
  mounted() {
    new Gauge({
      canvasId: "canvas",
      width: 200,
      min: 16,
      max: 30,
      value: 20.5,
      unit: "℃",
      showTick: true,
    });
    new Gauge({
      canvasId: "canvas2",
      value: 80,
      lineWidth: 20,
      progressColor: ["#2196F3", "#9C27B0", "#F44336"],
      valueColor: "blue",
    });
  },
};
</script>

<style>
.gauge-container {
  padding: 20rpx 40rpx;
  text-align: left;
}
.title {
  margin-bottom: 20rpx;
  color: #000;
  font-size: 32rpx;
  font-weight: 500;
}
.canvas {
  width: 200px;
  height: 200px;
  margin: 40rpx auto;
}
</style>