<!--課堂參與人次觀察之環形圖-->
<template>
  <div id="student-source-ringpie"></div>
</template>

<script>
export default {
  name: "StudentSourceRingPie",
  data() {
    return {
      e: event,
      index: 0,
      mockdata: {
        pieNumData: [
          { value: 2435, name: "HiLearning" },
          { value: 340, name: "HiGroup" },
          { value: 200, name: "IRS" },
          { value: 200, name: "webIRS" },
        ],
      },
    };
  },
  mounted() {
    this.drawLine(this.mockdata.pieNumData);
  },
  created() {
    this.$emit("StudentSourceInfo", this.mockdata.pieNumData);
  },
  methods: {
    drawLine(pieNumData) {
      //基于准备好的dom，初始化echarts实例

      let myChart = this.$echarts.init(
        document.getElementById("student-source-ringpie")
      ); //绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        /*legend: {
          show:false,
          animation:false,
          orient: "vertical",
          icon: "circle",
          top: 40,
          textStyle: {
            color: "white",
          },

          //抓值印在標籤上
          formatter: function (name) {
            let data = pieNumData;
            let total = 0; //回傳自行運算百分比
            let target;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            let arr = ((target / total) * 100).toFixed(2) + "%";
            //console.log(arr)
            return name + " \n " + arr;
          },
          right: 0,
        },*/
        color: ["#1CC0F3", "#FA8D38", "#00F492","#ff6bcd"],

        series: [
          {
            type: "pie",
            radius: ["65%", "80%"],
            //right: 100,
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: "center",
              formatter: "{percent|{d}% }\n {b}",
              lineHeight: 20,
              rich:{
                percent:{
                   color: 'white',
                  fontSize: 20,
                }
              }
            },
            startAngle: 20,
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#454545",
              borderWidth: 2,
            },
            data: this.mockdata.pieNumData,
          },
        ],
      });

      // Set the default selected highlights
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      myChart.on("mouseover", function (e) {
        //Highlight the hovering piece
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: 0,
        });

        if (e.dataIndex == 0) {
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        }
        if (e.dataIndex != this.index) {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.index,
          });
        }
      });
      myChart.on("mouseout", function (e) {
        this.index = e.dataIndex;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: this.index,
        });
      });
      
    },
  },
};
</script>

<style>
</style>