优化

src/service/WeatherService.ts

@@ -59,14 +59,19 @@ export default class WeatherService {
     if (!weather) {
       return []
     }
-    return weather.forecastHourly
+    // 插入当前天气
+    return [{
+      time: '现在',
+      weather: WeatherUtils.weatherCode2Str(weather.current.weather + ''),
+      temp: weather.current.temperature.value
+    },...weather.forecastHourly
       .weather.value.map((_, i) => {
         return {
           time: dayjs().set("minute", 0).add(i + 1, 'hour').format("HH:mm"),
           weather: WeatherUtils.weatherCode2Str(weather.forecastHourly.weather.value[i] + ''),
           temp: weather.forecastHourly.temperature.value[i] + '',
         } as HourlyForecastItem
-      })
+      })]
   }
 
   public calcHourlyWeahterRange(forecast: HourlyForecastItem[]): HourlyWeatherRangeItem[] {

src/view/component/DailyForecast/index.tsx

@@ -3,7 +3,6 @@ import Weather from "../../../dto/Weather";
 import WeatherService from "../../../service/WeatherService";
 import styles from './style.module.css'
 import weatherUtils from '../../../util/WeatherUtils'
-import dayjs from 'dayjs'
 
 const weatherService = WeatherService.newInstance()
 

src/view/component/HourlyForecast/index.tsx

@@ -1,124 +1,29 @@
-import * as echarts from 'echarts/core';
-import {
-  TitleComponent,
-  TitleComponentOption,
-  ToolboxComponent,
-  ToolboxComponentOption,
-  TooltipComponent,
-  TooltipComponentOption,
-  GridComponent,
-  GridComponentOption,
-  LegendComponent,
-  LegendComponentOption,
-  MarkLineComponent,
-  MarkLineComponentOption,
-  MarkPointComponent,
-  MarkPointComponentOption,
-  MarkAreaComponent
-} from 'echarts/components';
-import { LineChart, LineSeriesOption } from 'echarts/charts';
-import { UniversalTransition } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-import { useEffect } from 'react';
-import styles from './style.module.css'
 import Weather from '../../../dto/Weather';
-import WeatherService from '../../../service/WeatherService';
-
-echarts.use([
-  TitleComponent,
-  ToolboxComponent,
-  TooltipComponent,
-  GridComponent,
-  LegendComponent,
-  MarkLineComponent,
-  MarkPointComponent,
-  MarkAreaComponent,
-  LineChart,
-  CanvasRenderer,
-  UniversalTransition
-]);
+import styles from './style.module.css'
+import { Flex } from 'antd';
+import weatherUtils from '../../../util/WeatherUtils'
 
-type EChartsOption = echarts.ComposeOption<
-  | TitleComponentOption
-  | ToolboxComponentOption
-  | TooltipComponentOption
-  | GridComponentOption
-  | LegendComponentOption
-  | MarkLineComponentOption
-  | MarkPointComponentOption
-  | LineSeriesOption
->;
+import WeatherService from '../../../service/WeatherService';
+import { useMemo } from 'react';
 
 const weatherService = WeatherService.newInstance()
-let chart: echarts.ECharts | null = null
-function initChart(weather: Weather | null) {
-  const forecast = weatherService.getHourlyForecast(weather)
-  var chartDom = document.getElementById('hourlyForecast')!;
-  chart = echarts.init(chartDom);
-  if (!chart) {
-  }
-  const option: EChartsOption = {
-    textStyle: {
-      color: '#fff'
-    },
-    title: {
-      text: '24小时预报',
-      textStyle: {
-        color: '#fff'
-      }
-    },
-    tooltip: {
-      trigger: 'axis'
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: forecast.map(v => v.time)
-    },
-    yAxis: {
-      type: 'value',
-      min: 'dataMin',
-      max: 'dataMax',
-      axisLabel: {
-        formatter: '{value} °C'
-      }
-    },
-    series: [
-      {
-        name: '温度',
-        type: 'line',
-        smooth: true,
-        data: forecast.map(v => parseInt(v.temp)),
-        lineStyle: {
-          color: '#ccc'
-        },
-        markArea: {
-          itemStyle: {
-            color: 'rgba(255, 173, 177, 0.4)'
-          },
-          data: weatherService.calcHourlyWeahterRange(forecast).map(v => [
-            {name: v.weather, xAxis: v.startTime, itemStyle: {color: v.color}},
-            {xAxis: v.endTime},
-          ])
-        }
-      }
-    ]
-  };
-
-  option && chart.setOption(option);
-}
 
 function HourlyForecast(props: { weather: Weather | null }) {
-  useEffect(() => {
-    if (props.weather) {
-      initChart(props.weather)
-    }
-  }, [props.weather])
+  const forecast = useMemo(() => weatherService.getHourlyForecast(props.weather), [props.weather])
   return (
     <div className={styles.chartWrapper}>
-      <div id='hourlyForecast' className={styles.hourlyForecast}></div>
+      <div id='hourlyForecast' className={styles.hourlyForecast}>
+        <Flex wrap gap="large">
+          {forecast.map(v => (
+            <div>
+            <div>{v.time}</div>
+            <div> <span  dangerouslySetInnerHTML={{ __html: weatherUtils.imgData[v.weather] }}></span></div>
+            <div>{v.temp}°</div>
+            </div>
+          ))}
+        </Flex>
+      </div>
     </div>
   )
 }
-
 export default HourlyForecast

src/view/component/HourlyForecast/style.module.css

@@ -1,10 +1,11 @@
 .chartWrapper {
   width: 100%;
   overflow-x: auto;
+  padding: 0 1rem;
 }
 .hourlyForecast {
-  width: max(100%, 800px);
+  width: max(100%, 84rem);
   /* padding-left: 20px;
   padding-right: 20px; */
-  height: min(60vh, 600px);
+  height: min(60vh, 6rem);
 }