<template>
  <!-- <div>
    <div class="quipmentManager1"> -->
      <div id="maintenanceStatisticsEcharts"></div>
    <!-- </div>
  </div> -->
</template>

<script>
export default {
  name: "maintenanceStatisticsEcharts",
  props: {
  maintenanceStatisticsEchartsData: {
    //   default: () => false,
    //         type: [Array, Boolean],
    //         required: true
      type: Object,	 // 类型
    required: true,// 必要性
    default: 'cess'// 默认值
    },

  },
  data() {
    return {};
  },
   watch:{
    maintenanceStatisticsEchartsData:{
      handler:function(newV){
         this.getLoadEcharts()
      }
    }
  },
  mounted() {
    this.getLoadEcharts()
    console.log("maintenanceStatisticsEchartsData",this.maintenanceStatisticsEchartsData)
  },
  methods: {
    getLoadEcharts() {
  var myChart = this.$echarts.init(
        document.getElementById("maintenanceStatisticsEcharts")
      );
      var option = {
        title: [
          {
            text: this.maintenanceStatisticsEchartsData,
            left: "center",
            top: "center",
            textStyle: {
              fontSize: 25,
              color: "rgb(0,228,231)",
              foontWeight: "200",
              // background: 'rgba(9,119,150,0.3)',
            },
          },
        ],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        },
        tooltip: {
          show: false,
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        color: ["rgb(0,228,231)"],
        series: [
          {
            type: "pie",
            radius: ["58%", "45%"],
            silent: true,
            clockwise: true,
            startAngle: 90,
            // endAngle: 10000,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",
              },
            },
            // axisTick: {
            //   length: 10,
            //   splitNumber: 9,
            //   lineStyle: {
            //     color: "#ffffff",
            //     width: 1,
            //   },
            // },
            data: [
              {
                value: 100,
                name: "",
                itemStyle: {
                  normal: {
                    color: "#ACD735",
                  },
                },
              },
              {
                value: 50,
                name: "",
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#ffffff",
                  },
                },
              },
            ],
          },

          {
            name: "",
            type: "gauge",
            radius: "60%",
            center: ["50%", "50%"],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 70,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 60,
              lineStyle: {
                width: 5,
                color: "rgb(8,46,52)",
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
              },
            ],
          },
          {
            name: "",
            type: "pie",
            startAngle: 80,
            legendHoverLink: false,
            radius: ["40%"],
            hoverAnimation: false,
            animation: false,
            center: ["50%", "50%"],
            itemStyle: {
              color: "rgba(9,119,150,0)",
              borderColor: "rgb(103,221,216)",
            },
            data: [1],
          },
        ],
      };

      myChart.setOption(option);

    }
  }
}
</script>

<style scoped>
.quipmentManager1 {
  width: 100%;
  height: 150px;
}

#maintenanceStatisticsEcharts {
  /* width: 100%;
  height: 150px; */
   width: 100%;
    height: 100%;
}
</style>

