neim/neim-ui/src/views/largeScreenPage/components/wsCharts.vue

<template>
  <div class="wsChartPage">
    <div id="wsChart"/>
  </div>
</template>

<script>
import {getWindChats} from "@/api/biz/dataQuery/homePage";

export default {
  name: "wsCharts",
  props: {
    cftInfo: {type: Object}
  },
  watch:{
    cftInfo: {
      // immediate: true,
      handler(value) {
        // 获取测风塔编号
        console.log(value)
        this.month = ''
        this.equipmentNo = value.equipmentNo
        this.getData(value.equipmentNo)
      }
    },
  },
  data() {
    return {
      month:'',
      equipmentNo:'',
      wsLoading: false,
      wsCharts: null
    }
  },
  destroyed() {
    if (!this.wsCharts) {
      return
    }
    if (this.wsCharts != null) {
      this.wsCharts.dispose()
      this.wsCharts = null
    }
  },
  methods: {
    /*获取风速曲线的数据*/
    getData(cftNo) {
      getWindChats({equipmentId: cftNo,month:this.month}).then(res => {
        // console.log(res.data)
        const timeList = res.data.time
        const chartData = res.data.chart
        let legend = []
        let series = []
        let selected = {} // 不展示全部层高
        let j = 0;
        for (let i = 0; i < chartData.length; i++) {
          if (i > 3) {
            selected[chartData[i].height + 'm'] = false
          }
          legend.push(chartData[i].height + 'm')
          series.push({
            name: chartData[i].height + 'm',
            type: 'line',
            symbol: "none",
            data: chartData[i].value,
          })
        }
        this.drawWsChart(timeList, legend, selected, series)
      }).catch(err => {
        this.$message.error('首页获取风速曲线异常：' + err)
        console.log('首页获取风速曲线异常：' + err)
        this.wsCharts.hideLoading();
      })
    },
    /*风速折线图*/
    drawWsChart(timeList, legend, selected, series) {
      if(this.wsCharts === null){
        this.wsCharts = this.$echarts.init(document.getElementById('wsChart'))
      }
      let option = {
        dataZoom:{
          type:'inside'
        },
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
        },
        legend: {
          data: legend,
          selected: selected,
          textStyle: {
            color: '#eeeeee'
          },
          top: '3%'
        },
        grid: {
          top: '25%',
          left: '2%',
          right: '0',
          bottom: '.5%',
          containLabel: true
        },
        //color: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
        color: ['#e098c7', '#8fd3e8', '#71669e', '#cc70af', '#7cb4cc','#f7f494','#f7c5a0','#d4a4eb','#d2f5a6','#cc70af'],
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },

          axisLabel: {
            color: '#eeeeee'
          },
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: timeList
        },
        yAxis: {
          type: 'value',
          name: '风速(m/s)',
          axisLine: {
            show:true,
            lineStyle: {
              color: '#eeeeee'
            }
          },
          axisLabel: {
            color: '#eeeeee',
            // formatter: '{value}m/s'
          }
        },
        series: series
      }
      this.wsCharts.setOption(option, true)
      this.wsCharts.hideLoading();
      window.addEventListener('resize', () => {
        if (this.wsCharts) {
          this.wsCharts.resize()
        }
      })
    },
  }
}
</script>

<style scoped>
.wsChartPage {

}

#wsChart {
  width: 95%;
  height: calc(35vh);
}
</style>