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

<script>
export default {
  name: "maintenanceEchartsRight",
  props: {
  maintenanceEchartsRightData: {
     default: () => false,
            type: [Array, Boolean],
            required: true
    },

  },
  data() {
    return {};
  },
   watch:{
    maintenanceEchartsRightData:{
      handler:function(newV){
         this.getLoadEcharts()
      }
    }
  },
  mounted() {
    console.log("maintenanceEchartsRightData",this.maintenanceEchartsRightData)
    this.getLoadEcharts()
  },
  methods: {
    getLoadEcharts() {
     var myChart = this.$echarts.init(
        document.getElementById("maintenanceEchartsRight")
      );
      var option = {
        title: {
          show: false,
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: true,
          orient: "vertical",
          bottom: "bottom",
          icon: "rect",
          itemWidth: 15,
          itemHeight: 15,
          orient: "horizontal",
          textStyle: {
            // fontSize: 18, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
         color:[ "rgb(150,223,72)","rgb(92,200,158)","rgb(91,200,157)" ],
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: this.maintenanceEchartsRightData,
            // [{
            //     value: 1048,
            //     name: "项目检修保养",
            //     itemStyle: { color: "rgb(149,224,71)" },
            //   },
            //   {
            //     value: 735,
            //     name: "三级维修保养",
            //     itemStyle: { color: "rgb(217,237,253)" },
            //   },
            //   {
            //     value: 800,
            //     name: "深度检修保养",
            //     itemStyle: { color: "rgb(163,213,251)" },
            //   },
            //   {
            //     value: 600,
            //     name: "常规清洗",
            //     itemStyle: { color: "rgb(73,157,187)" },
            //   },
            //   {
            //     value: 900,
            //     name: "年度检修保养",
            //     itemStyle: { color: "rgb(150,223,72)" },
            //   },
            //   {
            //     value: 700,
            //     name: "日常保养",
            //     itemStyle: { color: "rgb(92,200,158)" },
            //   },],
            label: {
              show: true,
              formatter: "{b}",
            },
            itemStyle: {
              //   shadowBlur: 10,
              //   shadowOffsetX: 0,
              //   shadowColor: "rgba(0, 0, 0, 0.5)",
              borderWidth: 3,
              borderColor: "rgb(9,62,70)",
              opacity: 0.7,
            },
          },
        ],
      };
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>


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

