<template>
  <div id="Eline1" style="height: 100%"></div>
</template>

<script>
  export default {
    name: "Eline1",
    data() {
      return {
        timeData: [],
        shiduList: [],
        anqiList: [],
      }
    },
    props: {
      id: {
        type: Number
      }
    },
    watch: {
      id(newVal, oldVal) {
        if(newVal !== oldVal) {
          this.init();
        } else {
          return;
        }
      }
    },
    mounted() {
      // this.drawChart();
      this.init();
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("Eline1"));
        let that = this;
        let options = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['氨气', '湿度'],
            textStyle: {
              color: 'white',
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: that.timeData,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white',  //更改坐标轴文字颜色
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white',  //更改坐标轴文字颜色
              }
            },
          },
          series: [
            {
              name: '湿度',
              type: 'line',
              lineStyle:{
                color:'#00FF00'
              },
              itemStyle: {
                normal: {
                  color: '#388e3c', //改变折线点的颜色
                  lineStyle: {
                    color: '#388e3c',//改变折线颜色
                    width: 3.5 
                  }
                }
              },
              data: that.shiduList,
            },
            {
              name: '氨气',
              type: 'line',
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 3.5 
                  }
                }
              },
              data: that.anqiList,
            },
          ]
        };

        myChart.setOption(options);
      },
      init() {
        this.$http.get('/environment/getAmmoniaAndHumidity', {lqid: this.id})
        .then(res => {
          this.timeData = res.data.timeData;
          this.shiduList = res.data.shiduList;
          this.anqiList = res.data.anqiList;
          this.drawChart();
        })
      }
    }
  }
</script>

<style scoped>

</style>
