echarts实现仪表盘

1. Chart组件无法使用问题

官方封装的Chart组件无法直接使用仪表盘，因为不支持gauge类型，所以必须自己创建一个div，然后使用echarts初始化该div。

2.使用

Vue3+Typescript

<template>
  <div id="main" style="width: 100%; height: 100px"></div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts';
  import { GaugeChart, GaugeSeriesOption } from 'echarts/charts';

  type myType = {
    rate: number;
    count: number;
    total_count: number;
  };
  const props = defineProps({
    mainMsg: {
      type: Object as PropType<myType>,
      required: true,
    },
    versionMsg: {
      type: String,
      required: true,
    },
  });
  const drawGuage = () => {
    const mydom: any = document.getElementById('main');
    const myChart = echarts.init(mydom);
    myChart.setOption({
      tooltip: {
        formatter: '{a} <br/>{b} : {c}%',
      },
      series: [
        {
          name: `V${props.versionMsg}`,
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          splitNumber: 20,
          detail: {
            formatter: '{value}',
          },
          data: [
            {
              value: props.mainMsg.rate,
              name: 'RATE',
            },
          ],
        },
      ],
    });
  };

  onMounted(() => {
    drawGuage();
  });
</script>

<style scoped lang="less">
</style>