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

<script>
export default {
  name: "SmallCRStatusPie",
  data() {
    return {
      mockdata: {
        pieNumData: [
          { value: 19, name: "課堂中" },
          { value: 20, name: "閒置中" },
          { value: 2, name: "維修中" },
          { value: 10, name: "未開機" },
        ],
      },
    };
  },
  mounted() {
    this.drawLine(this.mockdata.pieNumData);
  },
  methods: {
    drawLine(pieNumData) {
      let myChart = this.$echarts.init(
        document.getElementById("small-CRStatusPie")
      ); //绘制图表
      myChart.setOption({
        tooltip: {
          formatter: "{b}:{c} ({d}%)",
           position: [100, 50]
        },
        series: [
          {
            type: "pie",
            radius: "65%",

            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            center: ["50%", "50%"],

            color: ["#1ed3ff", "#ffab5d", "#f862bb", " rgb(175, 175, 175)"],
            data: this.mockdata.pieNumData,
          },
        ],
      });
    },
  },
};
</script>

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