vue3之echarts仪表盘

原创已于 2025-03-04 09:44:21 修改 · 356 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2025-03-03 16:29:57 首次发布

vue3之echarts仪表盘

效果如下：
在这里插入图片描述
版本
"echarts": "^5.5.1"

核心代码：

<template>
  <div ref="chartRef" class="circle"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeMount } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
const percent = ref(23);
let chart: any = null;

const topChartOptions = (value: number) => {
  return {
    series: [
      {
        name: 'S',
        z: 3,
        type: 'gauge', // 仪表盘
        center: ['50%', '82%'],
        radius: '135%',
        detail: {
          show: false,
        },
        title: {
          show: false,
        },
        data: [
          {
            value,
            name: 'Percent',
          },
        ],
        startAngle: '178', // 仪表盘起始角度
        endAngle: '2', // 仪表盘结束角度
        min: 0,
        max: 100,
        axisLine: {
          show: true,
          lineStyle: {
            roundCap: true,
            width: 8,
            color: [
              [
                value / 100,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgba(11, 163, 250, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(227, 250, 255, 1)', // 100% 处的颜色
                  },
                ]),
              ],
              [1, 'rgba(4, 211, 251, 0)'],
            ],
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        pointer: {
          length: '22%',
          width: 4,
          icon: 'rect',
          offsetCenter: [0, '-87%'],
          itemStyle: {
            color: 'RGBA(191, 255, 238, 1)',
          },
        },
      },
      {
        name: 'T',
        z: 2,
        type: 'gauge', // 仪表盘
        center: ['50%', '82%'],
        radius: '135%',
        detail: {
          show: false,
        },
        title: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: 'Percent',
          },
        ],
        startAngle: '178', // 仪表盘起始角度
        endAngle: '2', // 仪表盘结束角度
        min: 0,
        max: 100,
        axisLine: {
          show: true,
          lineStyle: {
            roundCap: true,
            width: 10,
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'transparent',
                  },
                  {
                    offset: value / 100,
                    color: 'rgba(255, 192, 1, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 242, 204, 1)', // 100% 处的颜色
                  },
                ]),
              ],
              [1, 'rgba(255, 192, 1, 0)'],
            ],
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        pointer: {
          show: false,
        },
      },
    ],
  };
};

const initChart = () => {
  if (!chart) chart = echarts.init(chartRef.value);
  chart.setOption(topChartOptions(percent.value));
};

onMounted(() => {
  initChart();
});

const destroyChart = () => {
  if (!chart) {
    return;
  }
  chart.dispose();
  chart = null;
};

onBeforeMount(() => {
  destroyChart();
});
</script>
<style lang="scss" scoped>
.circle {
  width: 314px;
  height: 191px;
}
</style>