项目中echarts的罗盘

<script setup lang='ts'>
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
// 接收父组件传递的数据
let props: any = defineProps({
    // Y轴的数据
    value: {
        type: Number,
        default:0
    },
    ids:{
        type:String,
        default:'main39'
    }
})
// 初始化的数据
let myCharts: any = ref('')

// 使用watch来处理异步的数据,点击的内容发生改变,拿到新的数据渲染页面
watch(() => props, (val: any) => {
    getOption(val)
}, {
    deep: true,
})
// 自定义方法获取echarts数据
let getOption = (objs: any) => {
    let option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50%', '75%'],
      radius: '100%', //仪表盘大小
      min: 0,
      max: 1,
      splitNumber: 8, //等份
      axisLine: {
        //颜色样式
        show: true,
        lineStyle: {
          width: 16, //线条大小
          color: [
            //等份的颜色
            [
              1,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //渐变设置偏移量
                {
                  offset: 0.2,
                  color: '#0ABF9B'
                },
                {
                  offset: 0.4,
                  color: '#0ABF9B'
                },
                {
                  offset: 0.6,
                  color: '#C8635E'
                },
                {
                  offset: 0.8,
                  color: '#EA5454'
                }
              ])
            ]
          ]
        }
      },
      pointer: {
        //指针样式配置
         icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
        width: 14,
        length:150,
        itemStyle: {
          color: '#EA5454'
        }
      },
      axisTick: {
        length: 0
      },
      splitLine: {
        //距离
        length: 10,
        lineStyle: {
          color: 'auto'
        }
      },
      axisLabel: {
        //配置数据和标题
        color: 'auto',
        fontSize: 16, 
        distance: -56,
        formatter: function (value:any) {
          if (value === 0.875) {
            return '80%';
          } else if (value === 0.625) {
            return '60%';
          } else if (value === 0.375) {
            return '40%';
          } else if (value === 0.125) {
            return '20%';
          }
          return '';
        }
      },

      detail: {
        show: true,
        fontSize: 20, //仪表盘内部字体尺寸
        offsetCenter: [0, '-35%'],
        valueAnimation: true,
        formatter: function (value:any) {
          return Math.round(value * 100) + '%';
        },
        color: '#EA5454'
      },
      data: [
        {
          value: objs.value
        }
      ]
    }
  ]
};
    myCharts.value.setOption(option); //调用数据
}


onMounted(() => {
    let dom = document.getElementById(props.ids) //获取到id
    if (dom) {
        myCharts.value = echarts.init(dom) //初始化echarts
        getOption(props) //进来页面显示的数据
    }
})

</script>

<template>
    <div :id="props.ids" style="width:100%;height:100%;"></div>
</template>