xsh1997
/
hyyfScreen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <style>
        #echarts-weather {
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body style="margin: 0; text-align: center">
    <div id="he-plugin-standard" style="margin: 0 auto"></div>
    <div id="echarts-weather"></div>
<script>
    WIDGET = {
        "CONFIG": {
            "layout": "1",
            "width": "800",
            "height": "400",
            "background": "1",
            "dataColor": "FFFFFF",
            "textAlign": 'center',
            "borderRadius": "0",
            "key": "bfab9d72ee5d4719a5e96fb50436c396"
        }
    }
    let farmId = localStorage.getItem('lastFarmId');
    const token = localStorage.getItem('accessToken');
    var myChart = echarts.init(document.getElementById('echarts-weather'))
    let options = {
      title: {
        text: '未来24小时温度变化',
        left: 'center',
        color: '#fff',
        textStyle : {
          color: '#fff'
        }
      },
      tooltip: {
        trigger: 'axis',
      },
      color: ['#FFFFFF'],
      xAxis: [
        {
          type: 'category',
          data: [],
          axisPointer: {
            type: 'shadow'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
            }
          },
          axisTick:{
            show:false
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            formatter: '{value}℃'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
            }
          },
          axisTick:{
            show:false
          },
        }
      ],
      series: [
        {
          name: '温度',
          type: 'line',
          // stack: 'Total',
          smooth: true,
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          itemStyle : {
            color: '#fff',
            borderColor: '#fff',
            normal: {
              label : {
                show: true,
                textStyle: {
                  fontSize: 14
                }
              }
            }
          },
          data: []
        }
      ]
    }
    $.ajax({
      url: `http://120.27.234.126:8010/produce/weather/info?farmId=${farmId}`,
      type: 'POST',
      headers: {
        accessToken: token
      },
      success: function(res) {
        if(res.code === 10000) {
          options.series[0].data = res.data.tempList;
          let arr = [];
          res.data.timeList.forEach(item => {
            arr.push(item.substring(5, 16))
          })
          options.xAxis[0].data = arr;
          myChart.setOption(options)
        }
      }
    })
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
</body>
</html>