Explorar o código

fix: 天气预报接口

刘秀芳 hai 1 semana
pai
achega
6c4a1d51b8

+ 5 - 4
src/views/home/components/homePage.vue

@@ -146,10 +146,11 @@ const getBaseData = () =>{
   })
 
   // 获取气象图表数据
-  VE_API.mini_farm.gardenItemChart({point}).then(res =>{
-    minData.value = res.data.weatherData.map(item =>item.tempMin)
-    lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
-  })
+//   VE_API.mini_farm.gardenItemChart({point}).then(res =>{
+//     console.log('tq', res.data)
+//     minData.value = res.data.weatherData.map(item =>item.tempMin)
+//     lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
+//   })
 }
 
 onMounted(() => {

+ 31 - 34
src/views/home/components/weatherChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, nextTick } from "vue";
 import * as echarts from "echarts";
 
 // const props = defineProps({
@@ -256,6 +256,7 @@ const options = {
     },
     xAxis: [
         {
+            // 图标
             type: "category",
             boundaryGap: false,
             position: "top",
@@ -279,9 +280,10 @@ const options = {
                     },
                 },
             },
-            data: weekday,
+            data: [],
         },
         {
+            // 日期
             type: "category",
             position: "top",
             offset: -40,
@@ -302,37 +304,11 @@ const options = {
                     },
                 },
             },
-            data: datelist,
+            data: [],
             axisPointer: {
                 show: false,
             },
         },
-        // {
-        //     type: "category",
-        //     position: "top",
-        //     offset: -40,
-        //     boundaryGap: false,
-        //     zlevel: 100,
-        //     axisLine: {
-        //         show: false,
-        //     },
-        //     axisTick: {
-        //         show: false,
-        //     },
-        //     axisLabel: {
-        //         interval: 0,
-        //         formatter: ["{a|{value}}"].join("\n"),
-        //         rich: {
-        //             a: {
-        //                 color: "#fff",
-        //             },
-        //         },
-        //     },
-        //     data: weatherDaylist,
-        //     axisPointer: {
-        //         show: false,
-        //     },
-        // },
         {
             type: "category",
             boundaryGap: false,
@@ -355,12 +331,13 @@ const options = {
                 // },
                 rich: weatherImgDaylistRich,
             },
-            data: ["0", "1", "2", "3", "4", "5", "6","7"],
+            data: ["0", "1", "2", "3", "4", "5", "6"],
             axisPointer: {
                 show: false,
             },
         },
         {
+            // 最高温度
             type: "category",
             position: "top",
             offset: -85,
@@ -387,6 +364,7 @@ const options = {
             },
         },
         {
+            // 最低温度
             type: "category",
             position: "bottom",
             offset: -88,
@@ -475,9 +453,17 @@ const options = {
 };
 
 onMounted(() => {
-    setTimeout(()=>{
-        initChart();
-    },200)
+    
+  const point = sessionStorage.getItem('point')
+  // 获取气象图表数据
+  VE_API.mini_farm.gardenItemChart({point}).then(({data}) =>{
+    console.log('tq', data)
+    // minData.value = res.data.weatherData.map(item =>item.tempMin)
+    // lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
+    nextTick(() => {
+        initChart(data.weatherData);
+    })
+  })
 });
 
 
@@ -492,11 +478,22 @@ onMounted(() => {
 //     }
 // );
 
-const initChart = () => {
+const initChart = (weatherData) => {
     myChart.value = echarts.init(chartDom.value);
+    options.xAxis[0].data = weatherData.map(item => dateFormat(item.fxDate))
+    options.xAxis[1].data = weatherData.map(item => dateFormat(item.fxDate))
+    // options.xAxis[2].data = weatherData.map(item => dateFormat(item.fxDate))
+    options.xAxis[3].data = weatherData.map(item => item.tempMax)
+    options.xAxis[4].data = weatherData.map(item => item.tempMin)
+    options.series[0].data = weatherData.map(item => item.tempMax)
+    options.series[1].data = weatherData.map(item => item.tempMin)
+    console.log('options', options)
     myChart.value.setOption(options);
 };
 
+function dateFormat(date) {
+   return date.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$2/$3")
+}
 
 </script>