<template>
  <div class="event-pie-chart">
    <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: "EventPieChart",
  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: this.$t('studentWeb.eventPieChart.partType'),
          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: this.$t('studentWeb.eventPieChart.partType[0]'),
                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: this.$t('studentWeb.eventPieChart.partType[1]'),
                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: this.$t('studentWeb.eventPieChart.partType[2]'),
                itemStyle: { color: "#003E27" },
                label: {
                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
                  formatter: "{b}: {d}%",
                  fontWeight: "bold",
                  color: "black",
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 135,
                name: this.$t('studentWeb.eventPieChart.partType[3]'),
                itemStyle: { color: "#94DBC1" },
                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>
</style>