smart-grp-nof-web/src/views/system/visualized/lsyj/index.vue

<template >
    <div class="lsyj">
            <div class="title">历史预警趋势</div>
            <div class="lsyj-right">
              <div class="right-top">
                <div style="font-size: 14px">最高温度:{{maxTemp}}</div>
                <div style="font-size: 14px">最低温度:{{minTemp}}</div>
              </div>
              <div class="right-bottom" style="height: calc(100% - 30px)">
                <div id="lsyjCharts" style="height: 100%"></div>
              </div>
            </div>
          </div>
</template>
<script>
import * as echarts from "echarts";
import api from "@/api";
export default {
    data(){
        return{
         lsyjData:[],
         maxTemp:null,
         minTemp:null,
        }
    },
    methods:{
       //历史月趋势
    getHisWarning() {
      let params = {
        labelCode: "307038864601222",
        orgCode: localStorage.getItem("orgCode"),

        round: 2,
      };
      api.hisWarning(params).then((res) => {
        console.log(res, "月趋势");
        if(res.code==200){
          this.lsyjData=res.data.avgTemp
          this.maxTemp=res.data.maxTemp
          this.minTemp=res.data.minTemp
        this.drawLsyj()
        }
       
      });
    },
         // 历史预警
         drawLsyj() {
      var myChart2 = this.$echarts.init(document.getElementById("lsyjCharts"));
      myChart2.setOption({
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        // legend: {
        //   data: ['温度', '湿度'],
        //   left:'middle',
        //   top:"6%",
        //   textStyle:{
        //     color:'#fff'
        //   }

        // },
        toolbox: {
          // feature: {
          //   saveAsImage: {}
          // }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "7%",

          containLabel: true,
        },
        xAxis: [
          {
            name: "月",

            nameTextStyle: {
              //关键代码
              padding: [50, 0, 10, -13],
            },
            type: "category",
            // boundaryGap: false,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
            ],
            axisLabel: {
              color: "white",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "white",
            },
            splitLine: {
              lineStyle: {
                color: "#011F13",
              },
            },
          },
        ],
        series: [
          {
            name: "温度",
            itemStyle: {
              normal: {
                // barBorderRadius: [10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#00ffa7" },
                  { offset: 1, color: "#00caae" },
                ]),
              },
            },
            type: "bar",
            smooth: true,
            lineStyle: {
              color: "#2496ef",
            },
            stack: "Total",
            areaStyle: {
              opacity: 0.3,
            },
            emphasis: {
              focus: "series",
            },
            data: this.lsyjData,
          },
        ],
      });
      window.addEventListener("resize", () => {
        setTimeout(() => {
          myChart2.resize();
        }, 1000);
      });
    
        }
    },
    created(){
    
        this.getHisWarning()
  
   
       
    }
}

</script>
<style lang="scss" scoped>
 .lsyj{
        height: 100%;
        width: 21%;
        background: url("../../../../assets/images/bigScreen/tempBorder.png")
          no-repeat;
        background-size: 100% 100%;
        .title {
          height: 37px;
          line-height: 37px;
          margin-left: 10px;
          color: #fff;
          font-weight: 600;
        }
      }
  
    
      .lsyj {
        .lsyj-right {
          height: calc(100% - 37px);
          .right-top {
            height: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #fff;
          }
        }
      }
     
</style>