YZProjectCloud/yanzhu-ui-vue3/src/views/indexCompents/navAttLaborerRate.vue

<template>
  <div class="index-nav-body">
    <div class="index-nav-body-title">劳务人员出勤率</div>
    <div class="chart-content" v-if="sum > 0">
      <my-chart ref="chart" id="navAttLaborerRateChart" width="100%" height="100%" :render="renderChart" />
    </div>
    <div class="no-data" v-if="sum == 0">
      <svg-icon icon-class="nodata" />
      <div>暂无数据</div>
    </div>
  </div>
</template>

<script>
import MyChart from "@/components/Chart/MyChart";
export default {
  components: {
    MyChart,
  },
  props: {
    attInfo: {
      type: Object,
      default: () => {
        return null;
      },
    },
  },
  data() {
    return {
      chartData: [],
      sum:0
    };
  },
  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(() => {
        let total = this.attInfo ? this.attInfo.job.worker : 0;
        let totalAtt = this.attInfo ? this.attInfo.att.worker : 0;
        this.sum=totalAtt+total;
        this.chartData = [
          {
            name: "出勤人数",
            value: totalAtt,
          },
          {
            name: "未出勤人数",
            value: total - totalAtt,
          },
        ];
        if (this.$refs.chart) {
          this.$refs.chart.reLoad();
        }
      }, 400);
    },
  },
};
</script>

<style></style>