<template>
  <div style="width: 100%; height: 100%">
    <div class="commontitle">
      <div class="left">
        <span>课堂行为人数分析</span>
        <img src="/static/screen/img/titleIcon.png" alt="" />
      </div>
      <div class="right"></div>
    </div>
    <div style="width: 100%; height: 450px; margin-top: 40px">
      <div ref="chart1" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
let chart1 = ref(null);
const props = defineProps({
  screenData: {}
});
const statisti = ref({});
onMounted(() => {
  init();
});
const init = () => {
  statisti.value = props.screenData.statisti;
  getCharts1();
};
const getCharts1 = () => {
  const chart = echarts.init(chart1.value);
  let data = statisti.value.labale.map((e, i) => {
    return {
      name: e,
      value: statisti.value.value[i]
    };
  });
  data.push({
    name: "正常听讲",
    value: props.screenData.normalClass
  });
  let option = {
    color: ["#14C9C9", "#165DFF", "#CBE0FF", "#9FDB1D", "#C42ED1", "#F7BA1E"],
    legend: {
      show: true,
      itemGap: 20,
      textStyle: {
        color: "#2E84E5",
        fontSize: 12
      }
    },
    tooltip: {
      trigger: "item"
    },
    animation: true,
    title: {
      text: props.screenData.studentList.length,
      subtext: "班级总人数",
      left: "center",
      top: "52%",

      textStyle: {
        color: "#78DFFF",
        fontSize: 24,
        fontWeight: "600"
      },
      subtextStyle: {
        color: "#2E84E5",
        fontSize: 14
      }
    },

    series: [
      {
        tooltip: { show: false },
        type: "pie",
        radius: ["0", "38%"],
        padAngle: 0,
        color: ["#182665"],
        data: [
          {
            name: "",
            value: 1
          }
        ],
        top: 80,
        label: {
          show: false
        }
      },
      {
        type: "pie",
        radius: ["70%", "90%"],
        padAngle: 5,
        data,
        top: 80,
        label: {
          color: "#FFF",
          formatter: "{b0}: {c}({d}%)"
        }
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
};
defineExpose({
  init
});
</script>
<style lang="scss" scoped>
</style>