如何在vue3实现一个简单的仪表盘

以下是一个在 Vue 3 中带有数据且指针能动态转动的仪表盘示例：

<template>

  <div class="dashboard">

    <svg width="200" height="200">

      <circle cx="100" cy="100" r="90" stroke="gray" stroke-width="4" fill="none" />

      <line

        :x1="100"

        :y1="100"

        :x2="pointerX"

        :y2="pointerY"

        stroke="red"

        stroke-width="4"

      />

    </svg>

    <p>当前数值：{{currentValue}}</p>

  </div>

</template>

<script setup>

import { ref, onMounted } from 'vue';

 

const currentValue = ref(0);

const maxValue = 100;

const radius = 90;

const centerX = 100;

const centerY = 100;

let intervalId;

 

const updatePointer = (value) => {

  const angle = ((value / maxValue) * 2 * Math.PI);

  const pointerX = centerX + Math.sin(angle) * radius;

  const pointerY = centerY - Math.cos(angle) * radius;

  return { pointerX, pointerY };

};

 

onMounted(() => {

  intervalId = setInterval(() => {

    currentValue.value++;

    if (currentValue.value > maxValue) {

      currentValue.value = 0;

    }

    const { pointerX, pointerY } = updatePointer(currentValue.value);

    pointerX.value = pointerX;

    pointerY.value = pointerY;

  }, 100);

});

</script>

 

<style>

.dashboard {

  display: flex;

  justify-content: center;

  align-items: center;

}

</style>

在这个例子中，设置了一个从 0 到 100 的数值，通过定时器不断增加这个数值，然后根据数值计算指针的位置，使指针动态转动。你可以根据实际需求调整最大值、转动速度等参数。

当然也可以用echart来实现

使用 Echarts 可以实现仪表盘。以下是一个使用 Vue 3 和 Echarts 实现仪表盘的示例：

<template>

  <div id="dashboard" style="width: 400px;height:400px;"></div>

</template>

<script setup>

import * as echarts from 'echarts';

const initDashboard = () => {

  const dashboard = echarts.init(document.getElementById('dashboard'));

  const option = {

    series: [

      {

        type: 'gauge',

        startAngle: 180,

        endAngle: 0,

        min: 0,

        max: 100,

        splitNumber: 10,

        axisLine: {

          lineStyle: {

            width: 10,

          },

        },

        pointer: {

          width: 5,

        },

        axisTick: {

          distance: -15,

          length: 2,

          lineStyle: {

            color: 'auto',

          },

        },

        splitLine: {

          distance: -25,

          length: 5,

          lineStyle: {

            color: 'auto',

          },

        },

        title: {

          offsetCenter: [0, '-40%'],

          fontSize: 15,

        },

        detail: {

          offsetCenter: [0, '-25%'],

          fontSize: 15,

          formatter: '{value}%',

        },

        data: [

          {

            value: 50, // 初始值，可以根据实际情况调整

            name: '仪表盘',

          },

        ],

      },

    ],

  };

  dashboard.setOption(option);

};

initDashboard();

</script>

 在上述代码中，使用 Echarts 创建了一个仪表盘图表，你可以通过修改  data  中的  value  值来更新仪表盘的显示数据。同时，你可以根据实际需求调整仪表盘的各种参数，如最大值、最小值、颜色等。