<template>
  <div id="small-CRTypePie"></div>
</template>

<script>
export default {
  name: "SmallCRTypePie",
  data() {
    return {
      mockdata: {
        pieNumData: [
           { value: 5, name: "議課教室" },
          { value: 66, name: "智慧教室" },
          { value: 88, name: "一般教室" },
        ],
      },
    };
  },
  mounted() {
    this.drawLine(this.mockdata.pieNumData);
  },
  methods: {
    drawLine(pieNumData) {
      let myChart = this.$echarts.init(
        document.getElementById("small-CRTypePie")
      ); //绘制图表
      myChart.setOption({
         tooltip: {
          formatter: "{b}:{c} ({d}%)",
            position: [100, 50]
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            center: ["50%", "50%"],
            left:35,
            color: [ "#00F492", "#1CC0F3","#fff"],
            data: this.mockdata.pieNumData,
          },
        ],
      });
    },
  },
};
</script>

<style>
#small-CRTypePie {
  height: 100px;
  width: 100%;
}
</style>