uniapp写一个环形计时器，可以控制开始和暂停

在 UniApp 开发中创建一个环形计时器，你可以使用 Vue 的组件化思想结合 ECharts 或者自定义视图（Custom Element）库如 Vue-Circle-Progress 来实现。这里我提供一个简单的基于 Vue 和 ECharts 的环形进度条示例，你可以根据需求扩展为计时器功能：

首先，你需要安装 ECharts 和相关依赖：

npm install echarts@latest vue-echarts@latest

然后，在你的项目中创建一个名为 `RingTimer.vue` 的文件：

<template>
  <div class="ring-timer">
    <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
  </div>
</template>

<script setup>
import { onMounted, ref, watchEffect } from 'vue';
import ECharts from '@antv/echarts';

const progress = ref(0);
const chartRef = ref(null);

// 初始化图表
onMounted(() => {
  const chart = new ECharts({
    container: chartRef.value,
    width: '100%',
    height: '100%',
    theme: 'dark', // 如果你想用暗色主题
  });

  const option = {
    series: [
      {
        type: 'ring',
        center: ['50%', '50%'],
        radius: [80, 96],
        roseType: 'area', // 可以选择rose类型
        data: [{ value: progress.value }],
      },
    ],
  };

  chart.setOption(option);
});

function start() {
  if (!isPaused) {
    // 设置定时器或动画更新进度
    setTimeout(() => {
      progress.value += 1;
      updateChart();
    }, 1000); // 每秒增加1
  }
}

function pause() {
  isPaused = true;
  clearTimeout(timerId);
}

let isPaused = false; // 标记计时是否暂停

function updateChart() {
  // 更新图表数据
  chartRef.value.setOption({ series: [{ value: progress.value }] });
}

watchEffect(() => {
  if (isPaused) return;

  // 当进度变化时更新图表
  progress.value <= 100 ? updateChart() : stop(); // 停止条件可根据需求调整
});
</script>

<style scoped>
.ring-timer {
  position: relative;
}
</style>

在这个示例中，我们创建了一个环形进度条，当点击“开始”按钮时，每秒进度加一；点击“暂停”按钮则停止计时。你可以根据实际需求调整计时逻辑，比如添加更复杂的事件监听、循环计时等。