<template>
  <div id="voltageChart" :style="{ width: '100%', height: ' 100% ' }"  ></div>
</template>
<script>
// var yearData = [
//   {
//     data: [
//        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
//       [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
//       [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
//     ],
//   },
// ];

export default {
  props: {
    getData: [],
  },
  name: "lineChart",
  data() {
    return {
      myChart: null,
      voltageA: [],
      voltageB: [],
      voltageC: [],
    };
  },
  computed: {
    A: function () {
      var aa = [];
      this.voltageA.forEach(function (item) {
        aa.push(item.Value);
      });
      return aa;
    },

    B: function () {
      var bb = [];
      this.voltageB.forEach(function (item) {
        bb.push(item.Value);
      });
      return bb;
    },

    C: function () {
      var cc = [];
      this.voltageC.forEach(function (item) {
        cc.push(item.Value);
      });
      return cc;
    },
    Time: function () {
      var time = [];
      this.voltageC.forEach(function (item) {
        time.push(item.Time);
      });
      return time;
    },
  },
  mounted() {

    setTimeout(() => {
      console.log("子组件中的this.getData");
      console.log(this.getData);
      this.voltageA = this.getData[10].LIST;
      this.voltageB = this.getData[11].LIST;
      this.voltageC = this.getData[12].LIST;
      this.draw();
    }, 100);

    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {
    draw() {
      this.myChart = this.$echarts.init(document.getElementById("voltageChart"));
      this.myChart.setOption({
        // 通过这个color修改两条线的颜色
        title: {
          text: "ABC三相电流",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: '.225rem ',
            fontWeight:'400'
          },
          left: "center",
        },

        color: ["#60FF12", "#FF1212", "#26BFFF"],
        tooltip: {
          trigger: "axis",
        },
        // 图列组件
        legend: {
        //   show:false,
          itemGap: 100,
          /* 如果series对象有name值，则legend可以不用写data */
          // 修改图列组件文字颜色
          textStyle: {
            color: "#fff",
            fontSize:'.225rem '
          },

          bottom: "-2%",
          // right:"-18%"
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "13%",
          bottom: "12%",
          containLabel: true, // 包含刻度文字在内
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          // data: [
          //   "09:00",
          //   "11:00",
          //   "13:00",
          //   "15:00",
          //   "17:00",
          //   "19:00",
          //   "21:00",
          //   "23:00",
          //   "01:00",
          //   "03:00",
          //   "05:00",
          //   "07:00",
          // ],
          data:this.Time,
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          // boundaryGap: false
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //去除刻度线
          },
          axisLabel: {
            color: "#fff", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(-11,72,255,.5)",
            },
          },
        },
        series: [
          {
            name: "A相",
            type: "line",
            smooth: false, // 曲线是否平滑显示
            // data: yearData[0].data[0],
            data:this.A,
            symbolSize: 10, //拐点圆的大小
          },
          {
            name: "B相",
            type: "line",
            smooth: false, // 曲线是否平滑显示
            // data: yearData[0].data[1],
           data: this.B,
            symbolSize: 10, //拐点圆的大小
          },
          {
            name: "C相",
            type: "line",
            smooth: false, // 曲线是否平滑显示
            // data: yearData[0].data[2],
            data:this.C,
            symbolSize: 10, //拐点圆的大小
          },
        ],
      });
    },
  },
};
</script>
<style>
</style>