foster-pc-vue/src/views/znxy/charts/r_t/Gzqdtqyb.vue

<template>
  <div>
    <Title title="天气预报">
      <template v-slot:title-slot>
        <div class="slot-unit">单位：{{unit}}</div>
      </template>
    </Title>
    <div class="tabs yse-events">
      <div class="lbtn"><div class="text" :key="btnIndex" :class="getActive(1)" @click="change(1)">温度</div></div>
      <div class="btn"><div class="text" :key="btnIndex" :class="getActive(2)" @click="change(2)">湿度</div></div>
      <div class="btn"><div class="text" :key="btnIndex" :class="getActive(3)" @click="change(3)">降雨</div></div>
      <div class="rbtn"><div class="text" :key="btnIndex" :class="getActive(4)" @click="change(4)">光照</div></div>
    </div>
    <div ref="chartDom"  class="content-box yse-events"></div>
  </div>
</template>


<script setup>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';
import {onMounted, ref, watch} from "vue";
import {useStore} from "vuex";
import Title from "../../../components/title";

//初始化Highcharts
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);
let state = useStore().state;
let chartDom = ref(null);
const btnIndex = ref(null);
const mychat = ref(null);
const unit = ref("")
const weather7D = ref(null)
function getActive(index){
  return btnIndex.value == index ? "active" : "";
}
function change(index) {
  btnIndex.value = index;
  switch (index) {
    case 1:
      init1();
      break;
    case 2:
      init2();
      break;
    case 3:
      init3();
      break;
    case 4:
      init4();
      break;
  }
}
onMounted(async () => {
  await initWeather()
  change(1)
})

const options =  {
  tooltip:{
    useHTML:true,
    backgroundColor:"#00000000",
    formatter:function(){
      let {name,unit} = this.series.userOptions;
      return "<div class='tooltip1'><div>"+this.x+"</div><div>" + name + this.y+ unit +"</div></div>"
    }
  },
  chart: {
    backgroundColor:"#ffffff00",
    type: 'areaspline',
  },
  title: {
    text: null
  },
  credits: {
    enabled:false,
  },
  xAxis: {
    gridLineWidth: 1,
    type: 'datetime',
    gridLineColor:"#e6e6e630",
    categories: ['04-28', '04-29', '04-30', '05-01','05-02','05-03', '05-04'],
    labels: {
      style: {
        color: '#fff',
        fontSize:'11px',
        fontWeight: 400,
        fontFamily:'PingFangSC-Regular, PingFang SC'
      }
    },
  },
  yAxis: {
    min: 0,
    title: null,
    gridLineWidth: 1,
    gridLineColor:"#e6e6e630",
    labels: {
      format:"{value}",
      style: {
        color: '#fff',
        fontSize:'11px',
        fontWeight: 400,
        fontFamily:'PingFangSC-Regular, PingFang SC'
      }
    },
  },
  legend: {
    /* 图例显示顺序反转
     * 这是因为堆叠的顺序默认是反转的，可以设置
     * yAxis.reversedStacks = false 来达到类似的效果
     */
    enabled:false,
    reversed: true,
    padding:0,
    itemStyle: {
      color: '#fff',
      fontFamily:'ArialMT'
    }
  },
  plotOptions: {
    areaspline: {
      marker: {
        radius: 0
      },
      lineWidth: 0,
      states: {
        hover: {
          lineWidth: 0
        }
      },
      threshold: null
    }
  },
  series: []
}

function setPer(data){
  let sum = 0;
  for(let i of data){
    sum = sum + i;
  }
  let res = new Array()
  for(let i of data){
    res.push({val:i, y : parseInt((i / sum * 100).toFixed(0))});
  }
  return res;
}

async function initWeather(){
  let {code,data} = await VE_API.system.weather();
  weather7D.value = data.daily;
}

function init1() {
  unit.value = "C°"
  let data = weather7D.value;
  let categories = [];
  let seritsData1 = [];
  let seritsData2 = [];
  data.forEach((item)=>{
    categories.push(item.fxDate.substring(5,10))
    seritsData1.push(parseFloat(item.tempMax))
    seritsData2.push(parseFloat(item.tempMin))
  })
  options.xAxis.categories = categories;
  options.series = [{
    name:"最高气温",
    unit:"C°",
    data: seritsData1,
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, '#F35600'], // start
        [1, '#F3A90000'], // middle
      ]
    },
  },{
    name:"最低气温",
    unit:"C°",
    data: seritsData2,
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, '#F3A90080'], // middle
        [0.5, '#F3A90080'], // middle
        [1, '#00E9E370'] // end
      ]
    },
  }];
  mychat.value = new Highcharts.Chart(chartDom.value, options);
}
function init2() {
  unit.value = "%rh"
  let data = weather7D.value;
  let categories = [];
  let seritsData1 = [];
  data.forEach((item)=>{
    categories.push(item.fxDate.substring(5,10))
    seritsData1.push(parseFloat(item.humidity))
  })
  options.xAxis.categories = categories;
  options.series = [{
    name:"湿度",
    unit:"%rh",
    data: seritsData1,
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, '#0c45ee90'], // middle
        [0.5, '#46dee390'], // middle
        [1, '#e9af0090'] // end
      ]
    },
  }];
  mychat.value = new Highcharts.Chart(chartDom.value, options);
}

function init3() {
  unit.value = "mm"
  let data = weather7D.value;
  let categories = [];
  let seritsData1 = [];
  data.forEach((item)=>{
    categories.push(item.fxDate.substring(5,10))
    seritsData1.push(parseFloat(item.precip))
  })
  options.xAxis.categories = categories;

  options.series = [{
    name:"降雨量",
    unit:"mm",
    data: seritsData1,
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, '#0c45ee90'], // middle
        [0.5, '#46dee390'], // middle
        [1, '#e9af0090'] // end
      ]
    },
  }];
  mychat.value = new Highcharts.Chart(chartDom.value, options);
}

function init4() {
  unit.value = "LX"
  let data = weather7D.value;
  let categories = [];
  let seritsData1 = [];
  data.forEach((item)=>{
    categories.push(item.fxDate.substring(5,10))
    seritsData1.push(parseFloat(item.uvIndex))
  })
  options.xAxis.categories = categories;

  options.series = [{
    name:"照度",
    unit:"LX",
    data: seritsData1,
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, '#f3008690'], // middle
        [0.5, '#F3A90080'], // middle
        [1, '#00E9E370'] // end
      ]
    },
  }];
  mychat.value = new Highcharts.Chart(chartDom.value, options);
}




</script>

<style lang="scss" scoped>
.tabs{
  position: absolute;
  top:25%;
  width:100%;
  z-index: 3;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .text{
    text-align: center;
    width: 88px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #B4FFFB;
  }
  .lbtn{
    cursor: pointer;
    background-image: url(@/assets/img/left_btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 88px;
    height: 38px;
    .active{
      width: 88px;
      height: 38px;
      background-image: url(@/assets/img/left_btn_active.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .btn{
    cursor: pointer;
    background-image: url(@/assets/img/center_btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 88px;
    height: 38px;
    .active{
      width: 88px;
      height: 36px;
      background: rgba(3,44,57,0.8);
      box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #51E9F0;
    }
  }
  .rbtn{
    background-image: url(@/assets/img/right_btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 88px;
    height: 38px;
    cursor: pointer;
    .active{
      width: 88px;
      height: 38px;
      background-image: url(@/assets/img/right_btn_active.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}


.content-box{
  position: absolute;
  width: 100%;
  height: calc(75% - 48px + 15px);
  bottom: -10px;
}

.slot-unit{
  color: #f0f0f0;
  text-align: right;
  padding: 10px;
  width: 100%;
}

</style>