|
@@ -6,246 +6,132 @@
|
|
|
import { onMounted, ref, watch } from "vue";
|
|
import { onMounted, ref, watch } from "vue";
|
|
|
import * as echarts from "echarts";
|
|
import * as echarts from "echarts";
|
|
|
|
|
|
|
|
-// const props = defineProps({
|
|
|
|
|
-// list: {
|
|
|
|
|
-// type: Array,
|
|
|
|
|
-// default: () => [],
|
|
|
|
|
-// required: true,
|
|
|
|
|
-// },
|
|
|
|
|
-// });
|
|
|
|
|
-
|
|
|
|
|
-let demoData = [
|
|
|
|
|
- {
|
|
|
|
|
- sourceof: null,
|
|
|
|
|
- create_by: null,
|
|
|
|
|
- update_by: null,
|
|
|
|
|
- remark: null,
|
|
|
|
|
- sys_dept_code: null,
|
|
|
|
|
- createTime: null,
|
|
|
|
|
- updateTime: null,
|
|
|
|
|
- rq: "08/28",
|
|
|
|
|
- weatherZgwd: 30,
|
|
|
|
|
- weatherZdwd: 18,
|
|
|
|
|
- weatherTqDay: "晴",
|
|
|
|
|
- weatherTqNight: "晴",
|
|
|
|
|
- weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- windDirectDay: "南风",
|
|
|
|
|
- windDirectNight: "南风",
|
|
|
|
|
- windPowerDay: "微风",
|
|
|
|
|
- windPowerNight: "微风",
|
|
|
|
|
- week: "星期三",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- sourceof: null,
|
|
|
|
|
- create_by: null,
|
|
|
|
|
- update_by: null,
|
|
|
|
|
- remark: null,
|
|
|
|
|
- sys_dept_code: null,
|
|
|
|
|
- createTime: null,
|
|
|
|
|
- updateTime: null,
|
|
|
|
|
- rq: "08/29",
|
|
|
|
|
- weatherZgwd: 31,
|
|
|
|
|
- weatherZdwd: 19,
|
|
|
|
|
- weatherTqDay: "晴",
|
|
|
|
|
- weatherTqNight: "晴",
|
|
|
|
|
- weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- windDirectDay: "南风",
|
|
|
|
|
- windDirectNight: "南风",
|
|
|
|
|
- windPowerDay: "微风",
|
|
|
|
|
- windPowerNight: "微风",
|
|
|
|
|
- week: "星期四",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- sourceof: null,
|
|
|
|
|
- create_by: null,
|
|
|
|
|
- update_by: null,
|
|
|
|
|
- remark: null,
|
|
|
|
|
- sys_dept_code: null,
|
|
|
|
|
- createTime: null,
|
|
|
|
|
- updateTime: null,
|
|
|
|
|
- rq: "08/30",
|
|
|
|
|
- weatherZgwd: 30,
|
|
|
|
|
- weatherZdwd: 19,
|
|
|
|
|
- weatherTqDay: "晴",
|
|
|
|
|
- weatherTqNight: "多云",
|
|
|
|
|
- weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- windDirectDay: "西南风",
|
|
|
|
|
- windDirectNight: "北风",
|
|
|
|
|
- windPowerDay: "微风",
|
|
|
|
|
- windPowerNight: "微风",
|
|
|
|
|
- week: "星期五",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- sourceof: null,
|
|
|
|
|
- create_by: null,
|
|
|
|
|
- update_by: null,
|
|
|
|
|
- remark: null,
|
|
|
|
|
- sys_dept_code: null,
|
|
|
|
|
- createTime: null,
|
|
|
|
|
- updateTime: null,
|
|
|
|
|
- rq: "08/31",
|
|
|
|
|
- weatherZgwd: 30,
|
|
|
|
|
- weatherZdwd: 21,
|
|
|
|
|
- weatherTqDay: "多云",
|
|
|
|
|
- weatherTqNight: "雷阵雨",
|
|
|
|
|
- weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- windDirectDay: "北风",
|
|
|
|
|
- windDirectNight: "南风",
|
|
|
|
|
- windPowerDay: "3~4级",
|
|
|
|
|
- windPowerNight: "3~4级",
|
|
|
|
|
- week: "星期六",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- sourceof: null,
|
|
|
|
|
- create_by: null,
|
|
|
|
|
- update_by: null,
|
|
|
|
|
- remark: null,
|
|
|
|
|
- sys_dept_code: null,
|
|
|
|
|
- createTime: null,
|
|
|
|
|
- updateTime: null,
|
|
|
|
|
- rq: "09/01",
|
|
|
|
|
- weatherZgwd: 25,
|
|
|
|
|
- weatherZdwd: 16,
|
|
|
|
|
- weatherTqDay: "雷阵雨",
|
|
|
|
|
- weatherTqNight: "多云",
|
|
|
|
|
- weatherImgDay: "https://d.scggqx.com/forecast/img/多云.png",
|
|
|
|
|
- weatherImgNight: "https://d.scggqx.com/forecast/img/多云.png",
|
|
|
|
|
- windDirectDay: "北风",
|
|
|
|
|
- windDirectNight: "北风",
|
|
|
|
|
- windPowerDay: "3~4级",
|
|
|
|
|
- windPowerNight: "3~4级",
|
|
|
|
|
- week: "星期日",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- sourceof: null,
|
|
|
|
|
- create_by: null,
|
|
|
|
|
- update_by: null,
|
|
|
|
|
- remark: null,
|
|
|
|
|
- sys_dept_code: null,
|
|
|
|
|
- createTime: null,
|
|
|
|
|
- updateTime: null,
|
|
|
|
|
- rq: "09/02",
|
|
|
|
|
- weatherZgwd: 26,
|
|
|
|
|
- weatherZdwd: 15,
|
|
|
|
|
- weatherTqDay: "晴",
|
|
|
|
|
- weatherTqNight: "晴",
|
|
|
|
|
- weatherImgDay: "https://d.scggqx.com/forecast/img/阴.png",
|
|
|
|
|
- weatherImgNight: "https://d.scggqx.com/forecast/img/阴.png",
|
|
|
|
|
- windDirectDay: "北风",
|
|
|
|
|
- windDirectNight: "北风",
|
|
|
|
|
- windPowerDay: "3~4级",
|
|
|
|
|
- windPowerNight: "微风",
|
|
|
|
|
- week: "星期一",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- sourceof: null,
|
|
|
|
|
- create_by: null,
|
|
|
|
|
- update_by: null,
|
|
|
|
|
- remark: null,
|
|
|
|
|
- sys_dept_code: null,
|
|
|
|
|
- createTime: null,
|
|
|
|
|
- updateTime: null,
|
|
|
|
|
- rq: "09/03",
|
|
|
|
|
- weatherZgwd: 27,
|
|
|
|
|
- weatherZdwd: 18,
|
|
|
|
|
- weatherTqDay: "多云",
|
|
|
|
|
- weatherTqNight: "阴",
|
|
|
|
|
- weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- windDirectDay: "无持续风向",
|
|
|
|
|
- windDirectNight: "无持续风向",
|
|
|
|
|
- windPowerDay: "微风",
|
|
|
|
|
- windPowerNight: "微风",
|
|
|
|
|
- week: "星期二",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- sourceof: null,
|
|
|
|
|
- create_by: null,
|
|
|
|
|
- update_by: null,
|
|
|
|
|
- remark: null,
|
|
|
|
|
- sys_dept_code: null,
|
|
|
|
|
- createTime: null,
|
|
|
|
|
- updateTime: null,
|
|
|
|
|
- rq: "09/04",
|
|
|
|
|
- weatherZgwd: 27,
|
|
|
|
|
- weatherZdwd: 18,
|
|
|
|
|
- weatherTqDay: "多云",
|
|
|
|
|
- weatherTqNight: "阴",
|
|
|
|
|
- weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
|
|
- windDirectDay: "无持续风向",
|
|
|
|
|
- windDirectNight: "无持续风向",
|
|
|
|
|
- windPowerDay: "微风",
|
|
|
|
|
- windPowerNight: "微风",
|
|
|
|
|
- week: "星期二",
|
|
|
|
|
|
|
+const props = defineProps({
|
|
|
|
|
+ weatherData: {
|
|
|
|
|
+ type: Object,
|
|
|
|
|
+ default: null,
|
|
|
},
|
|
},
|
|
|
-];
|
|
|
|
|
-
|
|
|
|
|
-let weekday = [];
|
|
|
|
|
-let datelist = [];
|
|
|
|
|
-let weatherDaylist = [];
|
|
|
|
|
-let weatherNightlist = [];
|
|
|
|
|
-let weatherImgDaylist = [];
|
|
|
|
|
-let weatherImgNightlist = [];
|
|
|
|
|
-let windDirectlist = [];
|
|
|
|
|
-let windPowerlist = [];
|
|
|
|
|
-let weatherZgwdlist = [];
|
|
|
|
|
-let weatherZdwdlist = [];
|
|
|
|
|
|
|
+});
|
|
|
|
|
|
|
|
-let weatherImgDaylistRich = {};
|
|
|
|
|
-let weatherImgNightlistRich = {};
|
|
|
|
|
|
|
+// 将接口数据转换为图表需要的格式
|
|
|
|
|
+function formatWeatherData(weatherData) {
|
|
|
|
|
+ if (!weatherData || !weatherData.daily || !Array.isArray(weatherData.daily)) {
|
|
|
|
|
+ return [];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
|
|
|
|
+
|
|
|
|
|
+ return weatherData.daily.map((item) => {
|
|
|
|
|
+ // 格式化日期:从 "2025-11-14" 转换为 "11/14"
|
|
|
|
|
+ const date = new Date(item.fxDate);
|
|
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
|
+ const rq = `${month}/${day}`;
|
|
|
|
|
+
|
|
|
|
|
+ // 获取星期几
|
|
|
|
|
+ const weekDay = weekDays[date.getDay()];
|
|
|
|
|
+
|
|
|
|
|
+ // 根据 iconDay 和 iconNight 生成图片URL(这里需要根据实际API返回的icon值来映射)
|
|
|
|
|
+ // 暂时使用默认图片,后续可以根据icon值映射到具体图片
|
|
|
|
|
+ const getWeatherImg = (icon) => {
|
|
|
|
|
+ // 可以根据icon值返回对应的图片URL
|
|
|
|
|
+ // 例如:icon "100" -> 晴, "101" -> 多云, "104" -> 阴等
|
|
|
|
|
+ // return `https://d.scggqx.com/forecast/img/${icon}.png`;
|
|
|
|
|
+ return `https://birdseye-img.sysuimars.com/weather/${icon}.svg`;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ rq: rq,
|
|
|
|
|
+ weatherZgwd: item.tempMax,
|
|
|
|
|
+ weatherZdwd: item.tempMin,
|
|
|
|
|
+ weatherTqDay: item.textDay,
|
|
|
|
|
+ weatherTqNight: item.textNight,
|
|
|
|
|
+ weatherImgDay: getWeatherImg(item.iconDay),
|
|
|
|
|
+ weatherImgNight: getWeatherImg(item.iconNight),
|
|
|
|
|
+ windDirectDay: item.windDirDay,
|
|
|
|
|
+ windDirectNight: item.windDirNight,
|
|
|
|
|
+ windPowerDay: item.windScaleDay,
|
|
|
|
|
+ windPowerNight: item.windScaleNight,
|
|
|
|
|
+ week: weekDay,
|
|
|
|
|
+ };
|
|
|
|
|
+ });
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
-let maxWD = 30;
|
|
|
|
|
-let minWD = 0;
|
|
|
|
|
|
|
+// 处理天气数据
|
|
|
|
|
+function processWeatherData(data) {
|
|
|
|
|
+ let weekday = [];
|
|
|
|
|
+ let datelist = [];
|
|
|
|
|
+ let weatherDaylist = [];
|
|
|
|
|
+ let weatherNightlist = [];
|
|
|
|
|
+ let weatherImgDaylist = [];
|
|
|
|
|
+ let weatherImgNightlist = [];
|
|
|
|
|
+ let windDirectlist = [];
|
|
|
|
|
+ let windPowerlist = [];
|
|
|
|
|
+ let weatherZgwdlist = [];
|
|
|
|
|
+ let weatherZdwdlist = [];
|
|
|
|
|
|
|
|
-demoData.forEach((item) => {
|
|
|
|
|
- weekday.push(item.week);
|
|
|
|
|
- datelist.push(item.rq);
|
|
|
|
|
- weatherDaylist.push(item.weatherTqDay);
|
|
|
|
|
- weatherNightlist.push(item.weatherTqNight);
|
|
|
|
|
- weatherImgDaylist.push(item.weatherImgDay);
|
|
|
|
|
- weatherImgNightlist.push(item.weatherImgNight);
|
|
|
|
|
- windDirectlist.push(item.windDirectDay);
|
|
|
|
|
- windPowerlist.push(item.windPowerDay);
|
|
|
|
|
- weatherZgwdlist.push(item.weatherZgwd);
|
|
|
|
|
- weatherZdwdlist.push(item.weatherZdwd);
|
|
|
|
|
-});
|
|
|
|
|
-maxWD = Math.max(...weatherZgwdlist) + 30;
|
|
|
|
|
-minWD = Math.min(...weatherZdwdlist) - 30;
|
|
|
|
|
-let weatherImgDaylistStyle = weatherImgDaylist.map((item) => {
|
|
|
|
|
- let dateUrl = item;
|
|
|
|
|
- return {
|
|
|
|
|
- backgroundColor: {
|
|
|
|
|
- image: dateUrl,
|
|
|
|
|
- },
|
|
|
|
|
- height: 20,
|
|
|
|
|
- width: 20,
|
|
|
|
|
- };
|
|
|
|
|
-});
|
|
|
|
|
-let weatherImgNightlistStyle = weatherImgNightlist.map((item) => {
|
|
|
|
|
- let dateUrl = item;
|
|
|
|
|
|
|
+ data.forEach((item) => {
|
|
|
|
|
+ weekday.push(item.week);
|
|
|
|
|
+ datelist.push(item.rq);
|
|
|
|
|
+ weatherDaylist.push(item.weatherTqDay);
|
|
|
|
|
+ weatherNightlist.push(item.weatherTqNight);
|
|
|
|
|
+ weatherImgDaylist.push(item.weatherImgDay);
|
|
|
|
|
+ weatherImgNightlist.push(item.weatherImgNight);
|
|
|
|
|
+ windDirectlist.push(item.windDirectDay);
|
|
|
|
|
+ windPowerlist.push(item.windPowerDay);
|
|
|
|
|
+ weatherZgwdlist.push(item.weatherZgwd);
|
|
|
|
|
+ weatherZdwdlist.push(item.weatherZdwd);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const maxWD = weatherZgwdlist.length > 0 ? Math.max(...weatherZgwdlist) + 30 : 60;
|
|
|
|
|
+ const minWD = weatherZdwdlist.length > 0 ? Math.min(...weatherZdwdlist) - 30 : 0;
|
|
|
|
|
+
|
|
|
return {
|
|
return {
|
|
|
- backgroundColor: {
|
|
|
|
|
- image: dateUrl,
|
|
|
|
|
- },
|
|
|
|
|
- height: 20,
|
|
|
|
|
- width: 20,
|
|
|
|
|
|
|
+ weekday,
|
|
|
|
|
+ datelist,
|
|
|
|
|
+ weatherDaylist,
|
|
|
|
|
+ weatherNightlist,
|
|
|
|
|
+ weatherImgDaylist,
|
|
|
|
|
+ weatherImgNightlist,
|
|
|
|
|
+ windDirectlist,
|
|
|
|
|
+ windPowerlist,
|
|
|
|
|
+ weatherZgwdlist,
|
|
|
|
|
+ weatherZdwdlist,
|
|
|
|
|
+ maxWD,
|
|
|
|
|
+ minWD
|
|
|
};
|
|
};
|
|
|
-});
|
|
|
|
|
-weatherImgDaylistStyle.forEach((i, index) => {
|
|
|
|
|
- weatherImgDaylistRich[index] = i;
|
|
|
|
|
-});
|
|
|
|
|
-weatherImgNightlistStyle.forEach((i, index) => {
|
|
|
|
|
- weatherImgNightlistRich[index] = i;
|
|
|
|
|
-});
|
|
|
|
|
|
|
+}
|
|
|
|
|
+// 生成天气图片样式
|
|
|
|
|
+function generateWeatherImgRich(weatherImgList) {
|
|
|
|
|
+ const weatherImgListStyle = weatherImgList.map((item) => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ backgroundColor: {
|
|
|
|
|
+ image: item,
|
|
|
|
|
+ },
|
|
|
|
|
+ height: 20,
|
|
|
|
|
+ width: 20,
|
|
|
|
|
+ };
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const rich = {};
|
|
|
|
|
+ weatherImgListStyle.forEach((i, index) => {
|
|
|
|
|
+ rich[index] = i;
|
|
|
|
|
+ });
|
|
|
|
|
+ return rich;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
const myChart = ref(null);
|
|
const myChart = ref(null);
|
|
|
const chartDom = ref(null);
|
|
const chartDom = ref(null);
|
|
|
-const options = {
|
|
|
|
|
|
|
+
|
|
|
|
|
+// 初始化默认数据(用于首次渲染)
|
|
|
|
|
+const defaultData = formatWeatherData(null);
|
|
|
|
|
+const defaultProcessed = processWeatherData(defaultData.length > 0 ? defaultData : []);
|
|
|
|
|
+const defaultWeatherImgDaylistRich = generateWeatherImgRich(defaultProcessed.weatherImgDaylist);
|
|
|
|
|
+const defaultWeatherImgNightlistRich = generateWeatherImgRich(defaultProcessed.weatherImgNightlist);
|
|
|
|
|
+
|
|
|
|
|
+// 生成图表配置
|
|
|
|
|
+function generateOptions(processedData, weatherImgDaylistRich, weatherImgNightlistRich) {
|
|
|
|
|
+ return {
|
|
|
grid: {
|
|
grid: {
|
|
|
top: "-100px",
|
|
top: "-100px",
|
|
|
right: "20px",
|
|
right: "20px",
|
|
@@ -278,7 +164,7 @@ const options = {
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
- data: weekday,
|
|
|
|
|
|
|
+ data: processedData.weekday,
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
type: "category",
|
|
type: "category",
|
|
@@ -302,7 +188,7 @@ const options = {
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
- data: datelist,
|
|
|
|
|
|
|
+ data: processedData.datelist,
|
|
|
axisPointer: {
|
|
axisPointer: {
|
|
|
show: false,
|
|
show: false,
|
|
|
},
|
|
},
|
|
@@ -328,7 +214,7 @@ const options = {
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
- data: weatherDaylist,
|
|
|
|
|
|
|
+ data: processedData.weatherDaylist,
|
|
|
axisPointer: {
|
|
axisPointer: {
|
|
|
show: false,
|
|
show: false,
|
|
|
},
|
|
},
|
|
@@ -350,7 +236,7 @@ const options = {
|
|
|
formatter: ["{{value}|}"].join("\n"),
|
|
formatter: ["{{value}|}"].join("\n"),
|
|
|
rich: weatherImgDaylistRich,
|
|
rich: weatherImgDaylistRich,
|
|
|
},
|
|
},
|
|
|
- data: ["0", "1", "2", "3", "4", "5", "6","7"],
|
|
|
|
|
|
|
+ data: processedData.weatherImgDaylist.map((_, index) => String(index)),
|
|
|
axisPointer: {
|
|
axisPointer: {
|
|
|
show: false,
|
|
show: false,
|
|
|
},
|
|
},
|
|
@@ -376,7 +262,7 @@ const options = {
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
- data: weatherZgwdlist,
|
|
|
|
|
|
|
+ data: processedData.weatherZgwdlist,
|
|
|
axisPointer: {
|
|
axisPointer: {
|
|
|
show: false,
|
|
show: false,
|
|
|
},
|
|
},
|
|
@@ -402,7 +288,7 @@ const options = {
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
- data: weatherZgwdlist,
|
|
|
|
|
|
|
+ data: processedData.weatherZdwdlist,
|
|
|
axisPointer: {
|
|
axisPointer: {
|
|
|
show: false,
|
|
show: false,
|
|
|
},
|
|
},
|
|
@@ -415,14 +301,14 @@ const options = {
|
|
|
axisLabel: {
|
|
axisLabel: {
|
|
|
formatter: "{value}" + "℃",
|
|
formatter: "{value}" + "℃",
|
|
|
},
|
|
},
|
|
|
- max: maxWD,
|
|
|
|
|
- min: minWD,
|
|
|
|
|
|
|
+ max: processedData.maxWD,
|
|
|
|
|
+ min: processedData.minWD,
|
|
|
},
|
|
},
|
|
|
series: [
|
|
series: [
|
|
|
{
|
|
{
|
|
|
name: "最高温度",
|
|
name: "最高温度",
|
|
|
type: "line",
|
|
type: "line",
|
|
|
- data: weatherZgwdlist,
|
|
|
|
|
|
|
+ data: processedData.weatherZgwdlist,
|
|
|
symbol: "circle",
|
|
symbol: "circle",
|
|
|
symbolSize: 3,
|
|
symbolSize: 3,
|
|
|
showSymbol: true,
|
|
showSymbol: true,
|
|
@@ -445,7 +331,7 @@ const options = {
|
|
|
{
|
|
{
|
|
|
name: "最低温度",
|
|
name: "最低温度",
|
|
|
type: "line",
|
|
type: "line",
|
|
|
- data: weatherZdwdlist,
|
|
|
|
|
|
|
+ data: processedData.weatherZdwdlist,
|
|
|
symbol: "circle",
|
|
symbol: "circle",
|
|
|
symbolSize: 3,
|
|
symbolSize: 3,
|
|
|
showSymbol: true,
|
|
showSymbol: true,
|
|
@@ -467,29 +353,40 @@ const options = {
|
|
|
silent: false,
|
|
silent: false,
|
|
|
},
|
|
},
|
|
|
],
|
|
],
|
|
|
-};
|
|
|
|
|
|
|
+ };
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const options = ref(generateOptions(defaultProcessed, defaultWeatherImgDaylistRich, defaultWeatherImgNightlistRich));
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
- setTimeout(()=>{
|
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
initChart();
|
|
initChart();
|
|
|
- },200)
|
|
|
|
|
|
|
+ }, 200);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-// watch(
|
|
|
|
|
-// () => props.list,
|
|
|
|
|
-// (newValue, oldValue) => {
|
|
|
|
|
-// // if(newValue){
|
|
|
|
|
-// // options.xAxis[0].data = newValue.map(item => item[1] + item[2])
|
|
|
|
|
-// // options.series[0].data = newValue.map(item => Math.floor(item[3]))
|
|
|
|
|
-// // }
|
|
|
|
|
-// myChart.value.setOption(options);
|
|
|
|
|
-// }
|
|
|
|
|
-// );
|
|
|
|
|
|
|
+// 监听 weatherData 变化,更新图表
|
|
|
|
|
+watch(
|
|
|
|
|
+ () => props.weatherData,
|
|
|
|
|
+ (newValue) => {
|
|
|
|
|
+ if (newValue && newValue.daily) {
|
|
|
|
|
+ const formattedData = formatWeatherData(newValue);
|
|
|
|
|
+ const processedData = processWeatherData(formattedData);
|
|
|
|
|
+ const weatherImgDaylistRich = generateWeatherImgRich(processedData.weatherImgDaylist);
|
|
|
|
|
+ const weatherImgNightlistRich = generateWeatherImgRich(processedData.weatherImgNightlist);
|
|
|
|
|
+
|
|
|
|
|
+ options.value = generateOptions(processedData, weatherImgDaylistRich, weatherImgNightlistRich);
|
|
|
|
|
+
|
|
|
|
|
+ if (myChart.value) {
|
|
|
|
|
+ myChart.value.setOption(options.value);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ { deep: true }
|
|
|
|
|
+);
|
|
|
|
|
|
|
|
const initChart = () => {
|
|
const initChart = () => {
|
|
|
myChart.value = echarts.init(chartDom.value);
|
|
myChart.value = echarts.init(chartDom.value);
|
|
|
- myChart.value.setOption(options);
|
|
|
|
|
|
|
+ myChart.value.setOption(options.value);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
|