<template>
  <div id="box1" style="width:100%;height:100%;"></div>
</template>
<script>
import echarts from "echarts";

export default {
  data() {
    return {};
  },
  props: ["tindoorFillRate"],
  mounted() {
    this.$nextTick(function() {
      this.pie(this.tindoorFillRate, "#box1", ["#0091FF", "#E1F2FF"]);
    });
  },
  methods: {
    pie(pieData, box, colors) {
      const that = this;
      const myChart = echarts.init(document.querySelector(box));
      const data = pieData;
      const option = {
        grid: {
          top: 5,
          bottom: 5
        },
        color: colors,
        series: [
          {
            name: "valueOfMarket",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: "center",
                color: "#000000",
                fontSize: 20,
                lineHeight: 0,
                formatter: "{b}\n{c}%"
              }
            },
            data: [
              {
                value: data,
                label: {
                  normal: {
                    show: true
                  }
                }
              },
              {
                value: 100 - data,
                name: "",
                label: {
                  normal: {
                    show: false
                  }
                }
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>