<template>
  <div class="index-nav-body">
    <div class="index-nav-body-title">
      劳务人员出勤率
    </div>
     <div class="chart-content">
    <my-chart ref="chart" id="navAttLaborerRateChart"  width="100%" height="100%" :render="renderChart" />
    </div>
  </div>
</template>

<script>
import MyChart from "@/components/Chart/MyChart";
export default {
  components: {
    MyChart,
  },
  data() {
    return {
      chartData:[]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    renderChart(opt) {
      let pieOption = {
        tooltip: {
          trigger: "item",
          formatter: "{b} <br/> {c} 人 ({d}%)",
          textStyle: {
            fontSize: 12,
          },
        },
        legend: {
          orient: "horizontal",
          left: "center",
          top: "10",
          data:this.chartData.map(d=>d.name),
          textStyle: {
            color: "#444",
            fontSize: 12,
          },
        },
        series: [
          {
            type: "pie",
           radius: ["30%", "60%"], // 设置为圆环图
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            data: this.chartData,
            label: {
              normal: {
                formatter: "{b}\n{c}",
                textStyle: {
                  color: "#444",
                  fontSize: 12,
                },
              },
              emphasis: {
                formatter: "{b}\n{c}",
                textStyle: {
                  color: "#444",
                  fontSize: 12,
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
              },
            },
          },
        ],
      };
      return pieOption;
    },
    init() {
      setTimeout(() => {
        this.chartData=[{
          name:"出勤人数",
          value:33
        },{
          name:"未出勤人数",
          value:22
        }]
        this.$refs.chart.reLoad();
      }, 1000);
    },
  },
};
</script>

<style></style>