<template>
  <div id="myChart" :style="{ width: '100%', height: ' 5rem ' }"></div>
</template>
<script>
// var yearData = [
//   {
//     data: [
//       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
//       [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
//       [80, 93, 90, 93, 120, 130, 130, 32, 29, 33, 50, 160],
//     ],
//   },
// ];

export default {
  name: "lineChart",
  props: {
    getData: [],
  },
  data() {
    return {
      myChart: null,
      chartA: [],
      name:''
    };
  },
  computed:{
    A: function () {
      var aa = [];
      this.chartA.forEach(function (item) {
        aa.push(item.Value);
      });
      return aa;
    },
    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.chartA = this.getData.Points[1].LIST;
      this.name= this.getData.Points[1].PointName;
    
 
      this.draw();
    }, 100);
 
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {
    draw() {
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      this.myChart.setOption({
        // 通过这个color修改两条线的颜色
        title: {
          // text: "一氧化碳浓度",
          text:this.name,
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: '.225rem ',
          },
          left: "center",
        },

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

          bottom: "-2%",
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "13%",
          bottom: "10%",
          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: "浓度值",
            type: "line",
            smooth: false, // 曲线是否平滑显示
            // data: yearData[0].data[0],
            data:this.A,
            symbolSize: 10, //拐点圆的大小
          },
         
        ],
      });
    },
  },
};
</script>
<style>
</style>