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

<script>
import * as echarts from 'echarts';

export default {
  props: {
    rate: {
      type: Number,
    },
  },
  data() {
    return {
      chartPie: null,
      data: [],
    };
  },
  watch: {
    rate(value) {
      this.data = [
        {
          value: value,
        },
      ];
      setTimeout(() => {
        this.drawCharts();
      }, 500);
    },
  },

  mounted: function () {},
  methods: {
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById('clockIn'));
      this.chartPie.setOption({
        title: {
          left: 'center',
          text: '考勤打卡',
        },
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 25,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d'],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: 'auto',
              },
            },
            axisTick: {
              distance: -20,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 1,
              },
            },
            splitLine: {
              distance: -20,
              length: 20,
              lineStyle: {
                color: '#fff',
                width: 4,
              },
            },
            axisLabel: {
              color: 'inherit',
              distance: 30,
              fontSize: 14,
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} %',
              color: 'inherit',
              fontsize: 24,
            },
            data: this.data,
          },
        ],
      });
    },
    drawCharts() {
      this.drawPieChart();
    },
  },
};
</script>

<style scoped></style>
