zhgdyun/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue

<template>
  <Card title="趋势图">
    <div class="contentBox">
      <div class="dataBoardContent">
        <div style="margin-left: 30px;">
          <span class="greenBtn" @click="switchingData(1)" :class="checked == 1 ? 'active' : ''">
          <img
            v-for="item in 4"
            :key="item"
            :class="'arrow' + item"
            class="arrow"
            src="@/assets/images/greenOverview/arrow.png"
          />
          {{ $t("message.environmentalOverview.e6SelectArr")[0].title }}
        </span>
        <span class="greenBtn" @click="switchingData(2)" :class="checked == 2 ? 'active' : ''">
          <img
            v-for="item in 4"
            :key="item"
            :class="'arrow' + item"
            class="arrow"
            src="@/assets/images/greenOverview/arrow.png"
          />
          {{ $t("message.environmentalOverview.e6SelectArr")[1].title }}
        </span>
        <span class="greenBtn" @click="switchingData(3)" :class="checked == 3 ? 'active' : ''">
          <img
            v-for="item in 4"
            :key="item"
            :class="'arrow' + item"
            class="arrow"
            src="@/assets/images/greenOverview/arrow.png"
          />
          {{ $t("message.environmentalOverview.e6SelectArr")[2].title }}
        </span>
        <span class="greenBtn" @click="switchingData(4)" :class="checked == 4 ? 'active' : ''">
          <img
            v-for="item in 4"
            :key="item"
            :class="'arrow' + item"
            class="arrow"
            src="@/assets/images/greenOverview/arrow.png"
          />
          {{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
        </span>
        </div>

        <div class="myChart" ref="myChart" />
      </div>
      
    </div>
  </Card>
</template>

<script>
import Card from "../components/Card.vue";
import echarts from "echarts4";
import {
  getEnvironmentWarningInfo
} from "@/assets/js/api/environmentManage";
export default {
   components: { Card },
  data() {
    return {
      data : [90, 85, 100, 96, 100, 150, 190, 125 ],
      checked:1,
      dustData_24:[],
    };
  },
  mounted() {
    this.initMyChart();
  },
  methods: {
    getEnvironmentWarningInfoApi(){
      // console.log('执行');
      getEnvironmentWarningInfo({
        deviceId: this.currentDevDetail.deviceId,
        projectSn: this.projectSn,
        warningType: 1
      }).then(res => {
        console.log(res.result);
        this.pm10Warning = res.result.pm10Warning
        this.pm25Warning = res.result.pm25Warning
        this.noiseWarning = res.result.noiseWarning
        this.windSpeedWarning = res.result.windSpeed
        this.createdEcharts2();
      })
    },
    //切换  24小时数据
    switchingData(value) {
      this.checked = value;
      this.initMyChart();
    },
    initMyChart() {
      const myChart = echarts.init(this.$refs.myChart);
      // this.dustData_24.forEach((element) => {
      //   xdata.push(element.uploadDate.split(" ")[1]);
      //   switch (this.checked) {
      //     case 1:
      //       ydata.push(element.pm25);
      //       Alert = 'pm25'+this.$t('message.dataBoard.guard') + '(' + this.pm25Warning + ')'
      //       AlertNumber = this.pm25Warning
      //       break;
      //     case 2:
      //       ydata.push(element.pm10);
      //       Alert = 'pm10'+this.$t('message.dataBoard.guard')+ '(' + this.pm10Warning + ')'
      //       AlertNumber = this.pm10Warning
      //       break;
      //     case 3:
      //       ydata.push(element.windspeed);
      //       Alert = this.$t('message.dataBoard.windSpeed')+this.$t('message.dataBoard.guard')+ '(' + this.windSpeedWarning + ')'
      //       AlertNumber = this.windSpeedWarning
      //       break;
      //     case 4:
      //       ydata.push(element.noise);
      //       Alert = this.$t('message.dataBoard.noise')+this.$t('message.dataBoard.guard')+ '(' + this.noiseWarning + ')'
      //       AlertNumber = this.noiseWarning
      //       break;
      //   }
      // });
      switch (this.checked) {
         case 1:
         this.data = [90, 125, 100, 96, 100, 150, 190, 125 ]
         break;
         case 2:
         this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]
         break;
         case 3:
         this.data = [100, 96, 100, 150,90, 85,  190, 125 ]
         break;
         case 4:
         this.data = [90,  96, 100, 85, 100,150, 190, 125 ]
         break;
      }
      const option = {
        grid: {
        x: "10%",//x 偏移量
        y: "5%", // y 偏移量
        width: "85%", // 宽度
        height: "80%"// 高度
      },
      tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00"
          ],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#9ea3ab"
            }
          }
        },
        yAxis: {
          type: "value",
          max: 300,
          splitNumber: 4,
          axisLabel: {
            // y轴文字的配置
            textStyle: {
              color: "#92a1bc"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#777f8a"
            }
          }
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: "#6ae6ef",
                lineStyle: {
                  color: "#6ae6ef"
                }
              }
            },
            data: this.data,
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0,color: "rgb(33, 55, 76)"},
                { offset: 1,color: "rgb(85, 175, 186)" }
              ])
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.contentBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top:5% ;

  .titleTxt {
    font-size: 18px;
    color: #6ee4f0;
    margin-top: 5px;
    margin-left: 5px;
  }
  .myChart {
    box-sizing: border-box;
    padding-top: 5%;
    width: 100%;
    height: 90%;
  }
}
</style>