vue3之仪表盘

vue3之仪表盘

效果：

版本

"echarts": "^5.5.1"

核心代码：

<!--
 * @Description: 圆环组件封装
 * @Version: 1.0
 * @Autor: qh
-->

<template>
  <div ref="chartRef" class="circle"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  percent: {
    type: Number,
    default: 0,
  },
});

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

const rich = {
  bule: {
    fontSize: 22,
    fontFamily: 'DINPro',
    color: '#fff',
    padding: [6, 0, 0, 0],
  },
  white: {
    fontSize: 12,
    color: '#fff',
    padding: [10, 0, 0, 0],
  },
};

const topChartOptions = (value: number) => {
  return {
    tooltip: {
      show: false,
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    series: [
      {
        name: 'S',
        z: 3,
        type: 'gauge', // 仪表盘
        center: ['49.5%', '58%'],
        radius: '95%',
        detail: {
          formatter: (value: any) => {
            return '{bule|' + value + '}{white|%}';
          },
          rich,
          offsetCenter: ['0%', '0%'],
        },
        title: {
          show: false,
        },
        data: [
          {
            value,
            name: 'Percent',
          },
        ],
        axisLine: {
          show: true,
          lineStyle: {
            roundCap: true,
            width: 7,
            color: [
              [
                value / 100,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 231, 0.5)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0, 255, 231, 0.8)', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 231, 0.5)', // 100% 处的颜色
                  },
                ]),
              ],
              [1, 'rgba(4, 211, 251, 0)'],
            ],
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        pointer: {
          length: '14%',
          width: 2,
          icon: 'rect',
          offsetCenter: [0, '-87%'],
          itemStyle: {
            color: 'rgba(0, 255, 231, 1)',
          },
        },
      },
      {
        name: 'T',
        z: 2,
        type: 'gauge', // 仪表盘
        center: ['49.5%', '58%'],
        radius: '96%',
        detail: {
          show: false,
        },
        title: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: 'Percent',
          },
        ],
        axisLine: {
          show: true,
          lineStyle: {
            roundCap: true,
            width: 8,
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgba(150, 179, 180, 1)',
                  },
                  {
                    offset: value / 100,
                    color: 'rgba(150, 179, 180, 0.5)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(150, 179, 180, 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(props.percent));
};

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

onBeforeUnmount(() => {
  if (chart) {
    chart.clear();
    chart.dispose();
    chart = null;
  }
});
</script>

<style scoped lang="scss">
.circle {
  width: 132px;
  height: 113px;
  // 根据实际情况加背景图
  background: url('@/assets/img/inspection/overview-bg.png') no-repeat;
}
</style>