<template>
  <div ref="chart" class="echart" style="width: 100%;height: 100%;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name:'PieChartComponent',
  props: ["alldata", "alltest"],
  data() {
    return {
      chart: null,
      progress: 0
    };
  },
  watch: {
    alldata: {
      handler(val) {
        if (Object.keys(val).length) {
          this.startCom(val);
        }
      },
      deep: true,
      immediate: true // 组件创建时立即执行
    }
  },
  // mounted(){
  //   this.startCom(this.alldata)
  // },
  methods: {
    startCom(val) {
      let data = JSON.parse(JSON.stringify(val));

      if(!data.is || !this.alltest.value){
        this.progress = 0;
      }else{
        this.progress = (data.is / this.alltest.value).toFixed(2) * 100;
      }

      this.initChart();
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "进度",
            type: "pie",
            radius: ["50%", "70%"], // 内外半径
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },

            startAngle: 90,
            data: [
              { value: this.progress, name: "完成" },
              { value: 100 - this.progress, name: "未完成" }
            ],
            color: ["#4caf50", "#e0e0e0"], // 颜色设置
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            }
          }
        ],
        graphic: [
          {
            type: "text",
            left: "center",
            top: '43%', // 向下偏移，避免重叠
            style: {
              text: `${(this.alldata.is / this.alltest.value).toFixed(2) *
                100}%`,
              fill: "#3169D2", // 这里可以设置不同的颜色
              font: "bold 30px Arial", // 这里可以设置不同的字体大小
              textAlign: "center",
            },
            silent: true
          },
          {
            type: "text",
            left: "center",
            top: '52%', // 向下偏移，避免重叠
            style: {
              text: "流程完成度",
              fill: "#6F6869", // 设置另一部分的颜色
              font: "20px Arial", // 设置另一部分的字体大小
              textAlign: "center"
            },
            silent: true,
          }
        ]
      };

      this.chart.setOption(option);
      window.addEventListener("resize", this.chart.resize);

    },
    handleResize() {
      this.chart && this.chart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    this.chart && this.chart.dispose();
  }
};
</script>

<style scoped></style>
