uniapp 体重计仪表盘

以下是一个基于UniApp的体重计仪表盘的示例：

<template>
  <view class="weight-gauge">
    <canvas canvas-id="gauge" class="gauge"></canvas>
    <view class="weight">{{ weight }} kg</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weight: 0,
      canvasWidth: 300,
      canvasHeight: 300
    };
  },
  mounted() {
    this.drawGauge();
  },
  methods: {
    drawGauge() {
      const ctx = uni.createCanvasContext('gauge', this);
      const centerX = this.canvasWidth / 2;
      const centerY = this.canvasHeight / 2;
      const radius = this.canvasWidth / 2 - 10; // 调整仪表盘大小

      // 绘制背景圆
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.setStrokeStyle('#eee');
      ctx.setLineWidth(10);
      ctx.stroke();

      // 绘制刻度线和数字
      for (let angle = -120; angle <= 120; angle += 10) {
        const startX = centerX + (radius - 20) * Math.cos(angle * Math.PI / 180);
        const startY = centerY + (radius - 20) * Math.sin(angle * Math.PI / 180);
        const endX = centerX + radius * Math.cos(angle * Math.PI / 180);
        const endY = centerY + radius * Math.sin(angle * Math.PI / 180);

        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
        ctx.setStrokeStyle('#eee');
        ctx.setLineWidth(5);
        ctx.stroke();

        if (angle % 20 === 0) {
          const textX = centerX + (radius - 40) * Math.cos(angle * Math.PI / 180);
          const textY = centerY + (radius - 40) * Math.sin(angle * Math.PI / 180);
          ctx.setFontSize(16);
          ctx.setFillStyle('#333');
          ctx.setTextAlign('center');
          ctx.fillText((angle + 120) / 2, textX, textY);
        }
      }

      // 绘制指针
      ctx.beginPath();
      ctx.moveTo(centerX - 5, centerY - 10);
      ctx.lineTo(centerX, centerY - radius + 30);
      ctx.lineTo(centerX + 5, centerY - 10);
      ctx.setFillStyle('red');
      ctx.fill();

      ctx.draw();
    }
  }
};
</script>

<style>
.weight-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge {
  width: 300rpx;
  height: 300rpx;
}

.weight {
  margin-top: 20rpx;
  font-size: 28rpx;
}
</style>

在上述代码中，我们使用`canvas`绘制了一个体重计仪表盘。在`data`中定义了`weight`属性用于显示体重，`canvasWidth`和`canvasHeight`属性用于设置画布的宽度和高度。

在`mounted`生命周期钩子函数中，我们调用`drawGauge`方法来绘制仪表盘。首先获取画布的上下文对象，然后依次绘制背景圆、刻度线和数字、指针。

你可以将上述代码保存到一个Vue文件中，然后在您的UniApp应用程序中使用该组件来显示体重计仪表盘。希望这对你有帮助！如果您有其他问题，请随时向我提问。