天气预报echarts

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

javascript 复制代码
<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>
相关推荐
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc2 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨4 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山9 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄10 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf11 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询