<template>
  <div class="pie-chart-progress">
    <div ref="chart" class="chart-container"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    data: {
      type: Object,
      //   required: true,
    },
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      console.log(this.data);
      const chartContainer = this.$refs.chart;
      const chart = echarts.init(chartContainer);
      const options = {
        title: {
          text: `各阶段统计`,
          //   left: "-0.3%",
          textStyle: {
            color: "#272727",
            fontSize: 18,
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //   top: "5%",
        //   left: "center",
        // },
        series: [
          {
            name: "各阶段统计",
            type: "pie",
            center: ["50%", "58%"],
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              //   { value: 1048, name: "Search Engine" },
              //   { value: 735, name: "Direct" },
              //   { value: 580, name: "Email" },
              //   { value: 484, name: "Union Ads" },
              //   { value: 300, name: "Video Ads" },
              {
                value: this.data["phase0"],
                name: "房票发放",
                itemStyle: {
                  normal: {
                    color: "#186DF5",
                  },
                },
              },
              {
                value: this.data["phase1"],
                name: "商品房选购",
                itemStyle: {
                  normal: {
                    color: "#8A7EFF",
                  },
                },
              },
              {
                value: this.data["phase2"],
                name: "贷款审查",
                itemStyle: {
                  normal: {
                    color: "#FF8A4A",
                  },
                },
              },
              {
                value: this.data["phase25"],
                name: "开发商审核",
                itemStyle: {
                  normal: {
                    color: "#48D1CC",
                  },
                },
              },
              {
                value: this.data["phase3"],
                name: "签订协议",
                itemStyle: {
                  normal: {
                    color: "#75B6FF",
                  },
                },
              },
              
              {
                value: this.data["phase4"],
                name: "登记备案",
                itemStyle: {
                  normal: {
                    color: "#FF78B1",
                  },
                },
              },
              {
                value: this.data["phase5"],
                name: "结算确认",
                itemStyle: {
                  normal: {
                    color: "#32DBB7",
                  },
                },
              },
              // {
              //   value: this.data["phase55"],
              //   name: "管理员审核",
              //   itemStyle: {
              //     normal: {
              //       color: "#102b6a",
              //     },
              //   },
              // },
              {
                value: this.data["phase6"],
                name: "还款",
                itemStyle: {
                  normal: {
                    color: "#FFC368",
                  },
                },
              },
              {
                value: this.data["phase7"],
                name: "完结",
                itemStyle: {
                  normal: {
                    color: "#22aa51",
                  },
                },
              },
              
            ],
          },
        ],
      };
      chart.setOption(options);
    },
  },
  watch: {
    data: {
      deep: true,
      handler: function () {
        this.createChart();
      },
    },
  },
};
</script>
<style scoped>
.chart-container {
  width: 250px;
  height: 250px;
}
</style>
