天气预报echarts

如上图，可以切换温度，降水量，风力风向和空气质量 

<template><el-radio-group v-model="selectedData" @change="updateChart"><el-radio-button label="temperature">温度</el-radio-button><el-radio-button label="precipitation">降水量</el-radio-button><el-radio-button label="wind">风力风向</el-radio-button><el-radio-button label="airQuality">空气质量</el-radio-button></el-radio-group><div id="temp3day"></div>
</template><script setup>
import * as echarts from "echarts";
const props = defineProps({echartList: {default: [{ temp: 47, date: '2023-01-01' },{ temp: 44, date: '2023-01-02' },{ temp: 41, date: '2023-01-03' },{ temp: 38, date: '2023-01-04' },{ temp: 35, date: '2023-01-05' },{ temp: 32, date: '2023-01-06' },{ temp: 29, date: '2023-01-07' },],},
});
const selectedData = ref('temperature');
const temperatureData = ref(['12.3', '15.5', '12.7', '13.9', '13.1', '12.3', '13.5'])
const precipitationData = ref(['12','19','0','1','22','0','0'])
const windData = ref([])
const airQualityData = ref([])
const initNet = async () => {//   const res2 = await proxy.$get("/oneNetwork/getSourceInfo", {//     netId: props.netWorkId,//   }); //热源initChart('温度 (°C)', temperatureData.value)};
const initChart = (yAxisName, seriesData) => {let timeData = ['现在', '12:30', '15:00', '18:00', '21:00', '24:00', '27:00'];const machart = echarts.init(document.getElementById("temp3day"));var option = {title: {text: "",},tooltip: {trigger: "axis",},grid: {left: "3%",right: "3%",bottom: "12%",top: "17%",containLabel: true,},xAxis: {type: "category",boundaryGap: false,data: timeData,},yAxis: [{type: "value",// name: '负荷 (MW)',position: 'left',// axisLabel: {//     formatter: '{value} MW'// }axisTick: {show: false // 隐藏刻度线},splitLine: {show: false // 隐藏网格线}}],series: [{name: yAxisName,type: "line",stack: 'Total',areaStyle: {// 添加渐变色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: '#B0C4DE' }, // 上方颜色{ offset: 1, color: '#F0F8FF' } // 下方颜色],global: false // 缺省为 false}},emphasis: {focus: 'series'},lineStyle: {color: '#B0C4DE' // 折线颜色设置为蓝灰色},data: seriesData,},],};machart.setOption(option);
};
const updateChart = () => {let yAxisName = '';let seriesData = [];switch (selectedData.value) {case 'temperature':yAxisName = '温度 (°C)';seriesData = temperatureData.value;break;case 'precipitation':yAxisName = '降水量 (mm)';seriesData = precipitationData.value;break;case 'wind':yAxisName = '风速 (m/s)';seriesData = windData.value;break;case 'airQuality':yAxisName = '空气质量指数';seriesData = airQualityData.value;break;default:break;}initChart(yAxisName, seriesData)
}
setTimeout(() => {initNet()
}, 800);
</script><style scoped>
#temp3day {width: 100%;height: 32vh;
}
</style>