<template>
  <div id="classroomtype-pie"></div>
</template>

<script>
export default {
  name: "ClassroomTypePie",
  data() {
    return {
      mockdata: {
        pieNumData: [
          { value: 34, name: "智慧教室" },
          { value: 20, name: "議課教室" },
          { value: 133, name: "一般教室" },
        ],
      },
    };
  },
  mounted() {
    this.drawLine(this.mockdata.pieNumData);
  },
  methods: {
    drawLine(pieNumData) {
      let myChart = this.$echarts.init(
        document.getElementById("classroomtype-pie")
      ); //绘制图表
      myChart.setOption({
        label: {
          formatter: '{title|{b}}\n{percent|{d}}{percentiIcon|%}\n{num|{c}間}',
          rich: {
            title: {
              color: "#fff",
              fontSize: "13",
              padding:[0,0,0,7],
              align: "left",
            },
            percent:{
                color:'#fff',
                padding:5,
                fontSize: "32",
                align: "left",
            },
            percentiIcon:{
                 color:'#fff',
                  padding:[0,0,8,0],
                fontSize: "20",
            },
            num:{
                fontSize: "16",
                 padding:[0,0,3,7],
                 align: "left",
            }
          },
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            color: ["#1CC0F3", "#00F492", "#FA8D38"],
            data: this.mockdata.pieNumData,
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>