天气预报echarts

news2024/12/28 2:20:34

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

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2202660.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一、制作UI自适应

当前分辨率 更改分辨率 一、原因 一款游戏的UI&#xff0c;可能会根据玩家的分辨率和屏幕尺寸&#xff0c;产生不同的变化 例如&#xff1a;某一个Image位移到了摄像机外面 因此需要通过锚点和屏幕自适应来制作完美的效果 二、解决方法 1、锚点 作用是&#xff1a;根据当…

RPA技术的定义与原理

RPA&#xff08;Robotic Process Automation&#xff09;即机器人流程自动化&#xff0c;是一种利用软件机器人或机器人工具来自动执行重复性、规则性和可预测性的业务流程的技术。以下是对RPA技术的详细介绍&#xff1a; 一、RPA技术的定义与原理 RPA技术通过模拟人工操作&a…

【深度学习 | 基础部分】深度学习导论

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈PyTorch深度学习 ⌋ ⌋ ⌋ 深度学习 (DL, Deep Learning) 特指基于深层神经网络模型和方法的机器学习。它是在统计机器学习、人工神经网络等算法模型基础上&#xff0c;结合当代大数据和大算力的发展而发展出来的。深度学习最重…

基于IMX6UL的EPIT的定时器实验

定时器是最常用的外设&#xff0c;常常需要使用定时器来完成精准的定时功能&#xff0c;I.MX6U 提供了多 种硬件定时器&#xff0c;有些定时器功能非常强大。本章我们从最基本的 EPIT 定时器开始&#xff0c;学习如何配置EPIT 定时器&#xff0c;使其按照给定的时间&#xff0c…

springmvc发送邮件的功能怎么集成Spring?

springmvc发送邮件的实现方法&#xff1f;怎么用SpringMVC发信&#xff1f; Spring框架提供了强大的支持&#xff0c;使得在SpringMVC应用中集成邮件发送功能变得非常简单。AokSend将详细介绍如何在SpringMVC应用中集成邮件发送功能&#xff0c;并确保其高效、可靠地运行。 s…

Adams Action Only函数的工程应用

概述 进行建模时&#xff0c;总会涉及到与实际工程的对比&#xff0c;所建立的模型与实际情况越相近&#xff0c;那仿真出的结果越有工程意义。但是&#xff0c;有时为了某种目的&#xff0c;也需要人为的控制建模元素与实际情况的相似程度&#xff0c;甚至要切断所建立元素与…

【RK3588】rknpu驱动流程

画图工具 &#xff1a; https://pixso.cn/

Heroic Key to the Focusing Iris

Heroic Key to the Focusing Iris - Item - 魔兽世界怀旧服WLK3.35数据库_巫妖王之怒80级魔兽数据库_wlk数据库 英雄聚焦之虹的钥匙 [英雄永恒之眼的审判]

第十一章:规划过程组(11.15规划资源管理--11.17规划沟通管理)

11.15 规划资源管理 11.15.1 主要输入 1.项目管理计划 质量管理计划、范围基准 2.项目文件 项目进度计划: 提供了所需资源的时间轴。 需求文件: 指出了项目所需的资源的类型和数量&#xff0c;并可能影响管理资源的方式。 风险登记册: 包含可能影响资源规划的各种威胁和机会…

其他:python语言绘制案例

文章目录 介绍导入python包图1图2 介绍 python语言的科研绘图合集&#xff0c;数据来源Hydrogen-diffusion-and-water-rock-reaction 导入python包 import pandas as pd import glob import proplot as pplt import seaborn as sns import numpy as np import matplotlib.py…

ubuntu 安装baget

一、安装netcore3.1 环境 二、下载运行文件 下载&#xff1a;github.com/loic-sharma/BaGet/releases 修改&#xff1a;appsettings.json文件 mkdir -p /root/apps/baget mkdir -p /root/apps/datas touch /root/apps/baget.db cd /root/apps/baget dotnet BaGet.dll --urls&…

【最新华为OD机试E卷-支持在线评测】虚拟理财游戏(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ,一枚热爱算法的程序员 💻 ACM金牌🏅️团队 | 大厂实习经历 | 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…

平板外壳高精度标签粘贴应用

电子平板、手机等产品的外壳的上常会贴有各式各样的标签&#xff0c;这是电子设备制造业中不可或缺的环节&#xff0c;它不仅关乎产品信息的准确传达&#xff0c;还承载着品牌宣传、防伪追溯等多重功能。通过贴标&#xff0c;设备制造商能够清晰地标注设备的型号、序列号、生产…

湖南(市场咨询)源点调研 如何明确调研焦点与分析单位的特征

湖南市场调研源点咨询认为&#xff0c;调研过程中定义问题阶段的部分工作涉及弄清究竟是对谁进行调研&#xff0c;也就是感兴趣人群&#xff0c;我们发现这与样本的选择有关。在调研过程的设计阶段弄清楚感兴趣人群非常重要&#xff0c;之后才可以决定选择哪种调研类型进行调研…

JeeSite 权限分配

JeeSite权限配置 主要解决问题&#xff1a; 程序员新增一个模块但是显示没权限提示403 其实最主要的就是第三步&#xff0c;在菜单管理中添加权限&#xff0c;这样超级管理员&#xff08;有权限的程序员&#xff09;就可以看到了其他的步骤是给其他角色分配权限的 一、新建权…

【WEB应用安全测试指南–蓝队安全测试2】--超详细-可直接进行实战!!!亲测-可进行安全及渗透测试

安全基础理论入门知识参考上一篇《WEB应用安全测试指南蓝队安全测试1》 WEB应用安全测试指南2 一、文件 I/O 类1.1、任意文件上传1.2、任意文件下载1.3、文件包含 二、接口安全类2.1、短信炸弹2.2、邮件炸弹2.3、短信内容可控2.4、邮件内容可控 三、逻辑流程类3.1、越权3.2、未…

云卓H30:引领科技与性能的完美融合!

在科技日新月异的今天&#xff0c;一款集高性能与便捷操作于一体的手持地面站成为了无人机、机器人等智能设备的得力助手。云卓H30手持地面站&#xff0c;凭借其搭载的高通骁龙660处理器&#xff0c;在多个适用场景中展现出了卓越的实力。 高通骁龙660&#xff0c;这款先进的移…

AI绘画Stable Diffusion WebUI 2个超好用的办法-实现图片光照调节,快速生成你想要的光感大片!

大家好&#xff0c;我是画画的小强 在摄影艺术中&#xff0c;灯光的运用对于照片的质量和情感表达至关重要。它不仅能够彰显主题&#xff0c;还能为画面增添深度与立体感&#xff0c;帮助传递感情&#xff0c;以及凸显细节之美。 下面&#xff0c;我将向大家展示如何用AI绘画…

运维工具之ansible

Ansible 1.什么是ansible? ​ ansible是基于ssh架构的自动化运维工具&#xff0c;由python语言实现&#xff0c;通过ansible可以远程批量部署等。 2.部署前提 ​ 控制端需要安装ansible,被控制端要开启ssh服务&#xff0c;并允许远程登录&#xff0c;被管理主机需要安装py…

【JavaScript】JavaScript 与 V8

浏览器中运行 html 和 css 代码&#xff1a; html 和 css 执行过程&#xff1a; js 由 js 引擎&#xff08;比如现在最为主流的 V8&#xff09;执行。 高级的编程语言都是需要转成最终的机器指令来执行的&#xff1b;事实上我们编写的JavaScript无论你交给浏览器或者Node执行&…