<template>
  <div id="pressure" v-if="loadingshow" style="width: 100%; height: 100%">
  </div>
</template>

<script setup>
import * as echarts from "echarts";

import {
  ref,
  defineProps,
  reactive,
  onMounted,
  watch,
  defineExpose,
  nextTick
} from "vue";
import { chartAdaptation } from "@/utils/tools";
const props = defineProps({
  allPerRate: {
    type: Number,
    default: 0
  },
  loadingshow: {
    type: Boolean,
    default: false
  }
});

const getPressure = () => {
  const chartDom = document.getElementById("pressure");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    // legend: {
    //     textStyle: {
    //       color: "#fff",
    //       fontWeight: 600,
    //       fontSize: 16
    //     }
    //   },
    series: [
      {
        name: '全员增长比参与率',
        type: 'gauge',
        radius: '100%',
        color: 'rgb(9,217,162)',
        progress: {
          show: true
        },
        axisTick: {
          distance: 2,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 1
          }
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}%',
          color: 'rgb(9,217,162)',
        },
        data: [
          {
            value: props.allPerRate,
          }
        ]
      }
    ]
  };
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
};

onMounted(() => {
  nextTick(() => {
    if (props.loadingshow) {
      getPressure();
    }
  });
});

</script>

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