天气预报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>