<template>
    <div class="basicinfo-piechart">
        <div class="qnum-text">有效參與人數：<span class='qnum'>{{335+310+234}} / {{335+310+234+10}}</span>人</div>
    <PieChart :option="option" />
    <!--{{"getDataTest:"+this.$data.option.series[0].data[0].value+","}}
    {{this.$data.option.series[0].data[1].value}}-->
  </div>
</template>

<script>
import { PieChart } from "dr-vue-echarts";
export default {
    name:"BasicInfoPieChart",
    components: {
    [PieChart.name]: PieChart,
  },
     data() {
    return {
      option: {
        label: {
          position: "inside",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
          padding: [4, 12],
          backgroundColor: "white",
          textStyle: {
            color: "black",
            fontFamily: "Ariel",
            fontWeight: "bolder",
          },
        },
        legend: {
          bottom: "10px",

          data: [
            "一年級",
            "二年級",
            "三年級"],
          
          textStyle: {
            color: "black",
          },
        },

        series: [
          {
            type: "pie",
            radius: "70%",
            top: "10%",
            bottom: "20%",
            center: ["50%", "60%"],
            itemStyle: {
              shadowColor: "rgba(0, 0, 0, 0.5)",
              shadowBlur: 10,
              shadowOffsetY: 3,
            },
            data: [
              {
                value: 335,
                name: '一年級',
                itemStyle: { color: "#00AD6C" },
                label: {
                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
                  formatter: "{b}: {d}%",
                  fontWeight: "bold",
                  color: "black",
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 310,
                name: '二年級',
                itemStyle: { color: "#006841" },
                label: {
                  show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
                  formatter: "{b}: {d}%",
                  fontWeight: "bold",
                  color: "black",
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 234,
                name: '三年級',
                itemStyle: { color: "#003E27" },
                label: {
                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
                  formatter: "{b}: {d}%",
                  fontWeight: "bold",
                  color: "black",
                },
                labelLine: {
                  show: false,
                },
              },
             
            ],
            emphasis: {
              label: {
                show: true,
                formatter: "{b}: {d}%",
                fontWeight: "bold",
                color: "black",
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: "#FA6400",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },

}
</script>

<style scoped>
.basicinfo-piechart{
  width: 100%;
    margin:auto;
  max-width: 500px;
  padding: 15px 40px 0px 40px;
  margin-bottom: 50px;
  height: 320px;
  color: rgba(0, 0, 0, 0.726);
  position: relative;
}
.qnum-text{
  position: absolute;
  font-weight: bolder;
  right: 20px;
  
}
.qnum {
  font-size: 20px;
}
</style>