一周天气 切换日期展示

<template>
  <div>
    <div class="hidden">
      <div style="height: 240px; margin: 0px 16px; z-index: 99" ref="echartref" ></div>
      <div class="bg">
        <el-row class="bg_item" justify="center" :gutter="4" style="height: 100%">
          <div
            :class="{ active: active == index }"
            v-for="(item, index) in 7"
            :key="index"
          ></div>
        </el-row>
      </div>
    </div>
    <div>
      <p class="title_name">24小时气象数据</p>
      <div class="last_warpper">
        <div class="tit">
          <div v-for="(item, index) in titarr" :key="index">
            <span>{{ item.title }}</span>
          </div>
        </div>
        <div class="con">
          <div class="con-items" v-for="(items, index) in list" :key="index">
            <div v-for="(i, k) in items.item" :key="k + 'l'">
              <span >{{ k == 0 ? i.title : i.value }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

script setup lang="ts"
import * as echart from "echarts";

// 组件数据
type prop = {
  yvbaodata: any
}
const propData = defineProps<prop>();

// 监听切换事件
watch(propData.yvbaodata, (newValue, oldValue)=>{
  myChart.dispose()
  initEchart()
})

// 背景色index
const active: any = ref(0);
// 初始化图表
let echartref: any = ref();
let myChart: any;
const week: any = ref([])
const date: any = ref([])
const weather: any = ref([])
const _weather: any = ref([])
const tem_min: any = ref([])
const tem_max: any = ref([])

// 获取气象数据
const getData = () =>{
  // console.log(propData, "一周天气预报");
  // 图表 - 日期、天气数据处理
  let now = new Date();
  date.value = propData.yvbaodata.date
  weather.value = propData.yvbaodata.weather
  tem_min.value = propData.yvbaodata.tem_min
  tem_max.value = propData.yvbaodata.tem_max
  // 天气数据
  weather.value.filter((i:any) => {
    if(i == 0){ i = '晴天' }
    else if(i >= 96 && i<=99){ i = '雷暴加冰雹' }
    _weather.value.push(i)
  });
}
const initEchart = () => {
  getData()
  myChart = echart.init(echartref.value);
  let option = {
    grid: {
      show: true,
      backgroundColor: "transparent",
      opacity: 0.1,
      borderWidth: "0",
      top: "140",
      left: "24",
      right: "24",
      bottom: "0",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      show: false,
    },
    xAxis: [
      // 日期
      {
        type: "category",
        boundaryGap: false,
        position: "top",
        offset: 95,
        zlevel: 100,
        triggerEvent: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          formatter: ["{a|{value}}"].join("\n"),
          rich: {
            a: {
              fontSize: 14,
              fontWeight: "bold",
            },
          },
        },
        nameTextStyle: {},
        data: date.value ,
      },
      // 星期
      {
        type: "category",
        boundaryGap: false,
        position: "top",
        offset: 70,
        zlevel: 100,
        triggerEvent: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          formatter: ["{a|{value}}"].join("\n"),
          rich: {
            a: {
              fontSize: 12,
            },
          },
        },
        nameTextStyle: {
          fontWeight: "bold",
          fontSize: 19,
        },
        data: ["周一", "周二", "周三", "周四", "周五", "周六","周日"],
      },
      // 天气
      {
        type: "category",
        boundaryGap: false,
        position: "top",
        offset: 35,
        zlevel: 100,
        triggerEvent: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        nameTextStyle: {
          fontWeight: "bold",
          fontSize: 19,
        },
        data: _weather.value,
      },
    ],
    yAxis: {
      type: "value",
      show: false,
    },
    series: [
      {
        name: "最高气温",
        type: "line",
        data: tem_max.value,
        symbol: "circle",
        symbolSize: [6, 6],
        itemStyle: {
          normal: {
            color: "#5e8cfe",
          },
        },
        label: {
          show: true,
          position: "top",
        },
        lineStyle: {
          width: 2,
        },
      },
      {
        name: "最低气温",
        type: "line",
        data: tem_min.value,
        itemStyle: {
          normal: {
            color: "#fdd364",
          },
        },
        symbol: "circle",
        symbolSize: [6, 6],
        label: {
          show: true,
          position: "bottom",
        },
        lineStyle: {
          width: 2,
        },
      },
    ],
  };
  myChart.setOption(option, true);
  window.onresize = function () {
    myChart.resize();
  };
  
  // 点击图表切换背景色
  myChart.on('click',(params: any)=>{
    if (params.componentType == "xAxis") {
      active.value = params.dataIndex;
      getData()
    }
  })
};
// 暴露给父组件
defineExpose({
  initEchart,
});

.hidden {
  overflow: hidden;
  position: relative;
}
.scroll_item {
  font-weight: bold;
  background-color: #ededf1;
  padding: 20px 0 12px 0;
  border-radius: 20px 20px 0 0;
  font-size: 14px;
  .date {
    margin-bottom: 8px;
  }
}
.bg {
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  bottom: 20px;
  opacity: 0.8;
  .bg_item div {
    width: 14.2%;
    height: 100%;
    border-radius: 20px;
  }
  .active {
    background-color: #ededf1;
  }
}
.title_name {
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  padding: 25px 20px;
}
.last_warpper {
  height: auto;
  display: grid;
  // grid-template-rows: repeat(1, 1fr);
  grid-template-columns: 70px auto;
  grid-template-areas: "lt rt";
  align-items: center;
  padding: 0 12px 20px 12px;

  .tit {
    height: 100%;
    grid-area: lt;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(248, 248, 252);
    color: rgb(69, 69, 69);
    font-weight: bold;
    font-size: 14px;

    // align-items: center;
    div {
      height: 42px;
      width: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    div:first-child {
      background-color: rgb(242, 242, 250);
    }
  }

  .con {
    height: 100%;
    // width: 80px;
    grid-area: rt;
    margin-right: 10px;

    // width: 100vw - 50px;
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
    overflow: scroll;

    .con-items {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      div {
        width: 80px;
        height: 42px;
        align-self: center;
        line-height: 42px;
        font-size: 14px;
      }

      div:first-child {
        background-color: rgb(242, 242, 250);
        font-size: 12px;
      }
    }
  }
}