<!--Hiteach版本之環形圖-->
<template>
  <div id="hiteach-version-pie"></div>
</template>

<script>
export default {
  name: "HiteachVersionPie",
  data() {
    return {
      e: event,
      index: 0,

      mockdata: {
        pieNumData: [
          { value: 243, name: "STD" },
          { value: 340, name: "PRE" },
          { value: 230, name: "PRO" },
          { value: 220, name: "TBL" }
        ],
      },
    };
  },
  created() {
    this.$emit("HiteachInfo", this.mockdata.pieNumData);
  },
  mounted() {
    this.drawLine(this.mockdata.pieNumData);
  },
  methods: {
    drawLine(pieNumData) {
      //基于准备好的dom，初始化echarts实例

      let myChart = this.$echarts.init(
        document.getElementById("hiteach-version-pie")
      ); //绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          show: false,
          orient: "horizontal",
          icon: "circle",

          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(1) + "%";
            //console.log(arr)
            return name + " \n " + arr;
          },
          left: 20,
          bottom: 0,
        },
        color: ["#FA8D38", "#00F492", "#F862BB", "#65DCDA", "#D6B8FF"],

        series: [
          {
            type: "pie",
            radius: ["65%", "80%"],
            right: 0,
            bottom: 100,
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: "center",
              formatter: "{percent|{d}% }\n {b}",
              lineHeight: 20,

              rich: {
                percent: {
                  color: "white",
                  fontSize: 20,
                  lineHeight: 30,
                  padding: [0, 0, 0, 10],
                },
              },
            },
            startAngle: 0,
            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>