ieplus-app/src/pagesStudy/pages/simulation-analysis/components/rate-chart.vue

<template>
  <view class="w-full h-[164px]">
    <ie-echart :option="options" />
  </view>
</template>
<script lang="ts" setup>
import ieEchart from '@/pagesStudy/components/ie-echart/ie-echart.vue';
const props = defineProps({
  value: {
    type: Number,
    default: 0
  }
});
const options = computed(() => {
  return {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        radius: '130%',
        center: ['50%', '82%'],
        z: 0,
        progress: {
          show: false
        },
        axisLine: {
          show: true,
          roundCap: true,
          lineStyle: {
            width: 12,
            color: [[1, '#EBF9FF']]
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        data: []
      },
      {
        name: 'Pressure',
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        radius: '135%',
        center: ['50%', '82%'],
        z: 1,
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#70C8FD' },
                { offset: 1, color: '#31A0FC' }
              ]
            }
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            width: 22
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: props.value,
            name: '正确率'
          }
        ]
      },
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        radius: '130%',
        center: ['50%', '82%'],
        z: 2,
        progress: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: [[1, '#FFFFFF']],
            width: 1,
            shadowColor: 'rgba(0, 0, 0, 0.08)',
            shadowBlur: 4,
            shadowOffsetY: -20,
            shadowOffsetX: 0
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: true,
          icon: 'circle',
          length: '190%',
          width: 20,
          itemStyle: {
            color: '#31A0FC',
            borderWidth: 6,
            borderColor: '#FFFFFF'
          }
        },
        title: {
          color: '#B3B3B3',
          fontSize: 14,
          offsetCenter: [0, -46]
        },
        detail: {
          formatter: '{value}%',
          fontSize: 32,
          fontWeight: 'bold',
          offsetCenter: [0, -10],
          textBorderColor: '#333333',
          textBorderWidth: 4,
        },
        data: [
          {
            value: props.value,
            name: '正确率'
          }
        ]
      }
    ]
  };

});
</script>
<style lang="scss" scoped></style>