
<template>
  <ul class="user_Overview flex onlineBorder ">
    <li class="user_Overview-item position">
      <div class="user_Overview_nums allnum ">
        <p class="headline title">气象环境数据</p>
      </div>
      <div id="fftjChart4"></div>
    </li>
    <li class="user_Overview-item position">
      <div class="user_Overview_nums ">
      </div>
    </li>
  </ul>
</template>

<script>
// 引入基本模板
import * as echarts from "echarts";
export default {
  name: 'fftjChart4',
  data() {
    return {
      options: {},
      timer: null,
      pageflag: true,
      fftjChart4: null,
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  mounted() {
    this.fftjChart4 = echarts.init(document.getElementById('fftjChart4'));
    console.log(this.fftjChart)
    this.drawFftjChart4();
    // window.addEventListener('resize', () => {
    //   this.fftjChar4.resize();
    // })
  },
  methods: {
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
    drawFftjChart4() {
      var data1 = [96, 100, 80, 95, 91, 60, 80, 99, 80, 51, 75, 99],
        data2 = [97, 99, 99, 100, 99, 90, 80, 91, 69, 67, 90, 84],
        data3 = [84, 81, 67, 72, 43, 88, 91, 101, 79, 87, 92, 150];
      this.fftjChart4.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        legend: {
          icon: '',
          itemWidth: 20,
          itemHeight: 10,
          itemGap: 40,
          data: ['风速', '温度', '湿度'],
          left: '6%',
          top: '-1%',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,.5)'
            }
          },
          axisPointer: {
            show: true
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',
              fontSize: 12
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(56,128,255,0)', 'rgba(56,128,255,0.2)']
            }
          },
          data: ['14：00', '15：00', '16：00', '17：00', '18：00']
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,.5)'
            }
          },
          axisLabel: {
            // margin: 10,
            textStyle: {
              color: '#ffffff',
              fontSize: 14
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#3891FF'
            }
          }
        }],
        series: [{
          name: '风速',
          type: 'line',
          smooth: false, //是否平滑曲线显示
          symbolSize: 0,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 207, 73, 0.3)'
              }, {
                offset: 1,
                color: 'rgba(253, 162, 35, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#999'
            }
          },
          data: data1
        },
        {
          name: '温度',
          type: 'line',
          smooth: false,
          symbolSize: 0,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(70, 96, 237, 0.17)'
              }, {
                offset: 1,
                color: 'rgba(0, 136, 212, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#4660EB'
            }
          },
          data: data2
        },
        {
          name: '湿度',
          type: 'line',
          smooth: false,
          symbolSize: 0,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 255, 255, 0.4)'
              }, {
                offset: 1,
                color: 'rgba(0, 255, 255, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#00FFFF'
            }
          },
          data: data3
        },
        ]
      })
    },
  },
};
</script>
<style lang='scss' scoped>
#fftjChart4 {
  width: 590px;
  height: 340px;
  margin: 5px 0 0 -25px;
}

ul {
  width: 100%;
  height: 100%;
  margin: 20px 0 0 20px;
}

.onlineBorder {
  background-image: url("../../assets/img/left_bottom_1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.user_Overview {
  li {
    flex: 1;
    //隐藏点
    list-style-type: none;

    //标题的字体大小与颜色
    .title {
      align-self: center;
      height: 100%;
      font-size: 16px;
      background-size: cover;
      color: rgb(50, 195, 205);
    }

    //决定定位
    .position {
      position: relative;
    }

    //标签位置
    .headline {
      position: absolute;
      top: -15px;
      left: 10px;
    }

    .user_Overview_nums {
      width: 600px;
      height: 72px;
      line-height: 100px;
      font-size: 22px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 2px;
        left: -28px;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      &::before {
        background-image: url("../../assets/img/left_bottom_2.png");
        background-repeat: no-repeat;
        background-size: 100%;

      }
    }
  }
}
</style>