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

<script>
export default {
  name: "faultAnalysis",
  props: {
    faultAnalysisDataYdata: {
      default: () => false,
      type: [Array, Boolean],
      required: true,
    },
    faultAnalysisDataXdata: {
      default: () => false,
      type: [Array, Boolean],
      required: true,
    },
  },
  data() {
    return {};
  },
  watch: {
    faultAnalysisDataYdata: {
      handler: function (newV) {
        this.getLoadEcharts();
      },
    },
    faultAnalysisDataXdata: {
      handler: function (newV) {
        this.getLoadEcharts();
      },
    },
  },
  mounted() {
    this.getLoadEcharts();
    console.log("faultAnalysisData", this.faultAnalysisDataYdata);
    console.log("faultAnalysisDataXdata", this.faultAnalysisDataXdata);
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(
        document.getElementById("faultAnalysis")
      );
      var option = {
        tooltip: {
          trigger: "axis",
        },
        color: ["#52F478"],
        icon: "circle",
        // legend: {
        //   show: false,
        //   x: "580px",
        //   y: "30px",
        //   data: [
        //     {
        //       name: "name1",
        //       icon: "none",
        //     },
        //     {
        //       name: "name2",
        //       icon: "none",
        //     },
        //     {
        //       name: "name3",
        //       icon: "none",
        //     },
        //     {
        //       name: "name4",
        //       icon: "none",
        //     },
        //   ],
        //   textStyle: {
        //     fontSize: 14, //字体大小
        //     color: "#BBF6FF", //字体颜色
        //   },
        //   selectedMode: "single",
        // },
        grid: {
          // top: "10px",
          left: "13%", //默认10%
          right: "4%", //默认10%
          bottom: "8%", //默认60
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "",
          nameGap: "16",
          show: true,
          boundaryGap: "1%",
          offset: 18,
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#FFFFFF",
            },
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#BBF6FF",
              width: 2,
            },
            symbol: ["none", "arrow"],
          },
          data: this.faultAnalysisDataXdata,
        },
        yAxis: {
          type: "value",
          name: "单位:次",
          show: true,
          offset: 18,
          nameTextStyle: {
            color: "#ffffff",
            padding: [0, 10, 0, 0],
            // verticalAlign: 'top'
            align: "right",
          },
          axisLabel: {
            textStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgb(13,190,196)",
              width: 1,
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgb(8,99,116)",
              width: 1,
            },
            symbol: ["none", "arrow"],
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            smooth: true,
            symbol: "rect",
            symbolSize: 10,
            data: this.faultAnalysisDataYdata,
            itemStyle: {
              color: "rgb(102,221,217)",
              width: 3,
            },
            // markPoint: {
            //   show: false,
            // },
            // itemStyle: {
            //   normal: {
            //     color: "#52F478",
            //     borderColor: "#52F478", //拐点边框颜色

            //     lineStyle: {
            //       color: "#52F478", //折线颜色
            //     },
            //     label: { show: false, color: "#ffffff" },
            //   },
            // },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

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

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

