<template>
  <div>
    <div style="height: 100%;width: 100%;">
      <div id="predictgas1" className="d0"></div>
      <!--      <div id="predictgas"></div>-->
    </div>

  </div>
</template>

<script>


export default {
  name: "predict-air",
  props : ['sdata'],
  data () {
    return {
      xc: '',
      xData: [],
      seriesData1: [],
      seriesData2: [],


    }
  },

  methods: {
    //绘图
    setBar () {
      console.log('进入画图====================')
      this.xc = this.$echarts.init(document.getElementById('predictgas1'))
      this.xc.setOption( {
        title: {
          text: '气温变化',
          textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 14,
          },
          top: '1%',
          left: 'center',
        },
        legend:{
          data:['去年平均气温','今年平均气温'],
          align:'auto',
          textStyle:{
            color:'#fff',
            fontSize:13
          },
          padding:[48,0,0,0]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0, 255, 233,0)'
                }, {
                  offset: 0.5,
                  color: 'rgba(255, 255, 255,1)',
                }, {
                  offset: 1,
                  color: 'rgba(0, 255, 233,0)'
                }],
                global: false
              }
            },
          },
        },
        grid: {
          top: '15%',
          left: '11%',
          right: '8%',
          bottom: '15%',
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisLine: {
            show: true
          },
          offset:10,
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            },
          },
          axisLabel: {
            color: '#fff',
            fontSize:14,
          },
          splitLine: {
            show: false
          },
          boundaryGap: false,
          data: this.xData,
          // date:getVirtulData()['data'],

        }],

        yAxis: [
          {
            type: 'value',
            min: 0,
            name:'平均气温',
            nameTextStyle:{
              fontSize:14,
              color:'#15dce2',
              padding:[0,0,35,0]
            },
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                fontSize: 14, //设置x轴字体大小
                color: '#ffffff'
              },
              formatter: '{value} °C',

            },
            axisTick: {
              show: false,
            },
          },
          // {
          //   type: 'value',
          //   min: 0,
          //   name:'平均气温',
          //   nameTextStyle:{
          //     fontSize:14,
          //     color:'#6c8787',
          //     padding:[0,0,35,0]
          //   },
          //   // max: 140,
          //   splitNumber: 4,
          //   splitLine: {
          //     show: true,
          //     lineStyle: {
          //       color: 'rgba(255,255,255,0.1)'
          //     }
          //   },
          //   axisLine: {
          //     show: false,
          //   },
          //   axisLabel: {
          //     show: true,
          //     margin: 20,
          //     formatter: '{value} °C',
          //     textStyle: {
          //       fontSize: 14, //设置x轴字体大小
          //       color: '#ffffff'
          //
          //     },
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          // },
        ],
        series: [
          {
          name: '去年平均气温',
          type: 'line',
          // smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: 'circle',
          symbolSize: 15,
          lineStyle: {
            normal: {
              color: "#6FD9D0",
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#6c50f3',
            },
            distance:10, //距离图形的偏移量
            fontSize:14
          },
          itemStyle: {
            color: "#6FD9D0",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          tooltip: {
            show: false
          },

          data: this.seriesData1
        },
          {
            name: '今年平均气温',
            type: 'line',
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 15,
            lineStyle: {
              normal: {
                color: "#00ca95",
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: 'top',
              distance:10, //距离图形的偏移量
              fontSize:14,
              textStyle: {
                color: '#00ca95',
              }
            },

            itemStyle: {
              color: "#00ca95",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              show: false
            },
            data: this.seriesData2,
          },

        ]
      })

    },
    //请求后台数据
     searchdata () {

    },
  },

  watch: {

    //监听浏览器大小变化
    'listenheight': {
      deep: true,
      handler (val) {
        if (this.listenheight !== '') {
          // this.$parent.$parent.changeresize(this.xc)
        }
      },
    },
    'sdata': {
      deep: true,
      handler (val) {
        console.log('处理数据==============')
        console.log(this.sdata)
        this.seriesData1 = []
        this.seriesData2 = []
        for (let i = 0; i < this.sdata.length; i++) {
          this.xData.push(this.sdata[i].date)
          this.seriesData1.push(this.sdata[i].avg_air)
          this.seriesData2.push(this.sdata[i].avgat)

        }
         this.setBar()
      },
    },
  },

  ready () {
    // 拼接sql，请求后台
    // this.searchdata()
    for (let i = 0; i < this.sdata.length; i++) {
      this.xData.push(this.sdata[i].date)
      this.seriesData1.push(this.sdata[i].avg_air)
      this.seriesData2.push(this.sdata[i].avgat)
    }
    this.setBar()
  }
}
</script>

<style scoped>
.d0 {
  width: 100%;
  height: 100%;
  float: left;
}
</style>
