<template>
  <view style="height: 300px; width: 200px; background-color: aqua">
    <view id="lineChartRef" :style="{ width: '200px', height: '200px' }" />
  </view>
</template>

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

const option = {
  series: [
    {
      type: 'gauge',
      min: 0, // 最小刻度
      max: 12,
      radius: '35%',
      progress: {
        show: true,
        width: 18,
        roundCap: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#A65FFB'
            },
            {
              offset: 1,
              color: '#3163F5'
            }
          ])
        }
      },
      axisLine: {
        lineStyle: {
          width: 18
        },
        roundCap: true
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      pointer: {
        show: false
      },
      axisLabel: {
        show: false
      },
      anchor: {
        show: false
      },
      title: {
        offsetCenter: [0, '-30%'],
        fontSize: 20
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} 分\n正常',
        color: 'inherit'
      },
      data: [
        {
          value: 1,
          name: '累计积分'
        }
      ]
    }
  ]
};

// 在组件挂载后初始化ECharts实例并设置选项
onMounted(() => {
  // const lineChartContainer = lineChartRef.value;
  const lineChartContainer = document.getElementById('lineChartRef');
  if (lineChartContainer) {
    const myChart = echarts.init(lineChartContainer);
    myChart.setOption(option);
  }
});
</script>

<style></style>