<template>
  <div ref="lineChart" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    ftrendIcoCount: Object,
  },
  computed: {
    ftrendIco() {
      return this.ftrendIcoCount;
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },

  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    ftrendIco() {
      this.initChart();
    },
  },
  methods: {
    //次数分布折线图
    initChart() {
      var _this = this;
      var chart = echarts.init(this.$refs.lineChart);
      var option;

      var timeLine = new Array();
      timeLine = this.ftrendIcoCount[0].listDate;
      var time = this.$store.state.Time_Data;
      this.$store.commit("getAll", [
        time[0].split(" ")[0],
        time[1].split(" ")[0],
      ]); //将time变量中的开始时间和结束时间传给getAll方法
      var timeall = this.$store.state.timearr; //将getAll已便利好的时间区间数组存入变量timeall

      if (this.ftrendIcoCount[0].listDate.length) {
        timeLine = this.ftrendIcoCount[0].listDate;
      } else {
        timeLine = [parseInt(timeall[0].split("-")[1])+"-"+parseInt(timeall[0].split("-")[2])];
        timeLine.map(() => {
          _this.ftrendIcoCount[0].list.push(0);
          _this.ftrendIcoCount[1].list.push(0);
          return;
        });
      }

      option = {
        color: ["#00F4FD", "#FD8F00"],
        tooltip: {
          trigger: "axis",
        },
        // 图列组件
        legend: {
          itemHeight: 10, //改变圆圈大小
          itemWidth: 26, //改变圆圈大小
          itemGap: 30,
          textStyle: {
            color: "#fff",
          },

          left: "10%",
          top: 0,
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: timeLine,
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#fff", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#fff", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
        },
        series: [
          {
            // name: "故障数量",
            name: this.ftrendIcoCount[0].name,
            type: "line",
            smooth: false, // 曲线是否平滑显示
            data: this.ftrendIcoCount[0].list,
            // data: [
            //   24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120, 230, 210,
            //   230, 120, 230, 210, 120, 120, 230, 210, 230, 120, 230, 210, 120,
            //   24, 40, 101, 134, 90, 230,
            // ],
            symbolSize: 6, //拐点圆的大小
            // symbol: 'circle',
          },
          {
            name: this.ftrendIcoCount[1].name,
            type: "line",
            smooth: false, // 曲线是否平滑显示
            data: this.ftrendIcoCount[1].list,
            // data: [
            //   30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130, 110,
            //   240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
            //   130, 30, 50, 110, 144, 110, 240, 228, 240,
            // ],
            symbolSize: 6, //拐点圆的大小
            // symbol: 'circle',
          },
        ],
      };

      chart.setOption(option, true);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>