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

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

  },
  data() {
    return {};
  },
   watch:{
    maintenanceEchartsLeftData:{
      handler:function(newV){
         this.getLoadEcharts()
      }
    }
  },
  mounted() {
    this.getLoadEcharts()
    console.log("maintenanceEchartsLeftData",this.maintenanceEchartsLeftData)
  },
  methods: {
    getLoadEcharts() {
    var myChart = this.$echarts.init(
        document.getElementById("maintenanceEchartsLeft")
      );
      var option = {
        title: {
          show: false,
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
          orient: "vertical",
          left: "left",
        },
         color:["rgb(100,177,239)","rgb(66,149,247)","rgb(73,158,188)"],
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
           
            data:this.maintenanceEchartsLeftData,
            //  [{
            //     value: 1048,
            //     name: "转向系统：",
            //     itemStyle: { color: "rgb(100,177,239)" },
            //   },
            //   {
            //     value: 735,
            //     name: "制动系统：",
            //     itemStyle: { color: "rgb(109,177,237)" },
            //   },
            //   {
            //     value: 100,
            //     name: "行驶系统：",
            //     itemStyle: { color: "rgb(66,149,247)" },
            //   },
            //   {
            //     value: 100,
            //     name: "电子电器：",
            //     itemStyle: { color: "rgb(73,158,188)" },
            //   },
            //   {
            //     value: 800,
            //     name: "传统系统零部件：",
            //     itemStyle: { color: "rgb(91,200,157)" },
            //   },
            //   {
            //     value: 50,
            //     name: "其他：",
            //     itemStyle: { color: "rgb(91,200,157)" },
            //   },
            //   {
            //     value: 200,
            //     name: "铝合金：",
            //     itemStyle: { color: "rgb(150,223,72)" },
            //   },
            //   {
            //     value: 100,
            //     name: "车身刹件：",
            //     itemStyle: { color: "rgb(216,237,252)" },
            //   },
            //   {
            //     value: 100,
            //     name: "发动机：",
            //     itemStyle: { color: "rgb(167,216,252)" },
            //   },],
            label: {
              show: true,
              formatter: "{b}{d}%",
            },
            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>
.quipmentManager1 {
  width: 100%;
  height: 150px;
}

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

