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

<script>
  export default {
    name: "Eline2",
    data() {
      return {
        wenduTimeData: [],
        wenduList: [],
      }
    },
    props: {
      id: {
        type: Number
      }
    },
    watch: {
      id(newVal, oldVal) {
        if(newVal != oldVal) {
          this.init();
        }
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("Eline2"));
        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.wenduTimeData,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white',  //更改坐标轴文字颜色
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white',  //更改坐标轴文字颜色
              }
            },
          },
          series: [
            {
              name: '温度',
              type: 'line',
              lineStyle:{
                color:'#fff',
              },
              itemStyle: {
                normal: {
                  color: '#00b0ff', //改变折线点的颜色
                  lineStyle: {
                    color: '#00b0ff', //改变折线颜色
                    width: 3.5
                  }
                }
              },
              data: that.wenduList,
            },
          ]
        };

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

<style scoped>

</style>
