vue+echarts实现疫情折线图

news2025/1/2 22:41:50

效果:

代码:

<<template>
    <div>
        <div id="left1" style = "height:800px;width:100%"></div>
    </div>
</template>

<script>
//疫情数据

//

export default {
    data() {
        return {

            data:{
                //疫情数据太多 放不下 要的滴滴我
            }
        };
    },

    mounted() {
        //初始化echarts
        var left1Chart = this.$echarts.init(document.getElementById('left1'))
        //配置项
        var option = {
            //标题
            title:{
                text:"全国累计趋势",
                textStyle:{
                    color:'blue'
                },
                left:'left'
            },
            //触发类型(就是鼠标移上去 能够显示信息 不配置默认没有)
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'line',                    //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
                    lineStyle:{
                        color:'#7171C6'
                    }
                }
            },
            //图例组件
            legend:{
                data:["累计确诊","累计治愈","累计死亡"],
                left:"right"
            },
            //图形位置(就是图例组件的位置)
            grid:{
                left:'4%',
                right:'6%',
                bottom:'4%',
                top:50,
                containLabel:true
            },
            //x轴(横)
            xAxis:[{
                type:'category',
                data:[]
            }],
            //y轴(竖)
            yAxis:[{
                type:'value',
                //坐标轴刻度标签的相关设置。
                axisLabel:{
                    color:'blue',
                    fontSize:12,
                    //对y轴数据格式进行处理
                    formatter:function(value){
                        if(value >= 1000){
                            value = value / 1000 + 'k'
                        }
                        return value;
                    }
                },
                //y轴线设置显示 默认显示y轴
                axisLine:{
                    show:true
                },
                //与x轴平行的线样式
                splitLine:{
                    show:true,                  //是否显示分割线
                    lineStyle:{                 //分割线样式
                        color:'#17273B',
                        width:1,
                        type:'solid',
                    }
                }
            }],
            series:[{
                name:'累计确诊',         //要与图例名字对应
                type:'line',            //折线图
                smooth:true,            //平滑曲线显示  
                data:[]                 //数据区域
            },{
                name:"累计治愈",
                type:'line',
                smooth:true,
                data:[]
            },{
                name:"累计死亡",
                type:'line',
                smooth:true,
                data:[]
            }]
        };

        //获得疫情数据
        var chinaDayList = this.data.chinaDayList


        //遍历每一天的数据
        for(var day of chinaDayList){
            console.info(day)
            //x轴 时间
            option.xAxis[0].data.push(day.date)
            //累计确诊
            option.series[0].data.push(day.confirm)
            //累计治愈
            option.series[1].data.push(day.heal)
            //累计死亡
            option.series[2].data.push(day.dead)
        }

        //使用刚指定的配置项和数据显示图标
        left1Chart.setOption(option);
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>

</style>

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

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

相关文章

使用arduino从零做一辆ROS2Jazzy的阿克曼小车---电机驱动篇

本项目采用 Arduino Mega2560 Pro 作为主控开发板&#xff0c;电机驱动器选用 TB6612FNG&#xff0c;并配备了 12V 电源、两个直流减速电机和一个舵机。未来计划通过嘉立创将各模块集成到一个 PCB 板上&#xff0c;提升系统的集成度和稳定性。 本文将聚焦于电机驱动部分&#x…

基于源码剖析:深度解读JVM底层运行机制

每日禅语 佛说&#xff0c;给你修路的&#xff0c;是你自己&#xff1b;埋葬你的&#xff0c;也是你自己&#xff1b;帮助你的&#xff0c;是你自己&#xff1b;毁灭你的&#xff0c;也是你自己&#xff1b;成就你的&#xff0c;自然还是你自己。所以佛说&#xff1a;自作自受&…

算法进阶:贪心算法

贪心算法是一种简单而直观的算法思想&#xff0c;它在每一步选择中都采取在当前状态下最优的选择&#xff0c;以期望最终得到全局最优解。贪心算法通常适用于一些具有最优子结构的问题&#xff0c;即问题的最优解可以通过一系列局部最优解的选择得到。 贪心算法的基本思路是&a…

Hive刷分区MSCK

一、MSCK刷分区 我们平时通常是通过alter table add partition方式增加Hive的分区的&#xff0c;但有时候会通过HDFS put/cp命令或flink、flum程序往表目录下拷贝分区目录&#xff0c;如果目录多&#xff0c;需要执行多条alter语句&#xff0c;非常麻烦。Hive提供了一个"…

Windows API Set:那些“只存在但不被使用“的DLL

API Set 是什么&#xff1f; 想象一下&#xff0c;Windows就像一个大型图书馆&#xff0c;而API Set就是这个图书馆的索引系统。但这个索引系统非常特别&#xff1a;它是直接内置在Windows加载器中的"虚拟目录"。 // 一个典型的API Set映射示例 api-ms-win-core-mem…

【Java 数据结构】合并两个有序链表

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 1. 题目 2. 解析 3. 代码实现 4. 小结 1. 题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示…

图像处理-Ch6-彩色图像处理

Ch6 彩色图像处理 无广告更易阅读&#xff0c;个人博客点此进入<– 文章目录 Ch6 彩色图像处理彩色基础彩色模型(Color models)RGB(red, green, blue)CMY & CMYK(cyan, magenta, yellow/and black)HSI(hue, saturation, intensity)HSV(hue, saturation, value) 颜色空…

03.HTTPS的实现原理-HTTPS的工作流程

03.HTTPS的实现原理-HTTPS的工作流程 简介1. HTTPS的工作流程1.1. TCP的工作流程1.1.1. 三次握手的详细步骤1.1.2. 三次握手的作用 1.2. HTTPS的工作流程1.2.1. HTTPS与TCP的关系1.2.2. HTTPS的工作流程 2. 公钥和私钥的作用3. 对称密钥的生成和交换4. 对称加密和非对称加密的区…

隧道FM广播信号、隧道内调频广播信号覆盖方案选择

一、为什么汽车驶入隧道内&#xff0c;就听不到FM调频广播信号了 隧道是一个半封闭的管状结构&#xff0c;有很强的电磁屏蔽效应&#xff0c;汽车进入隧道后&#xff0c;汽车收音机就会出现沙沙的噪声&#xff0c;这是由于隧道内的调频广播信号变弱甚至无信号&#xff0c;导致车…

基于SSM的“电器网上订购系统”的设计与实现(源码+数据库+文档+PPT)

基于SSM的“电器网上订购系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SSM 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统首页 商品类型 商品管理 订单展示 商品购物车 登录页面 …

工业大数据分析算法实战-day19

day19 今天是第19天&#xff0c;昨日是针对线性规划、整数规划建模技巧进行阐述&#xff0c;今天开启第九章节—行业知识沉淀的方法&#xff0c;该章节主要是对行业知识的范畴进行探讨&#xff0c;将讨论限制在研判类的知识沉淀上&#xff0c;将业务范围侧重在PHM中&#xff0…

Unity URP多光源支持,多光源阴影投射,多光源阴影接收(优化版)

目录 前言&#xff1a; 一、属性 二、SubShader 三、ForwardLitPass 定义Tags 声明变体 声明变量 定义结构体 顶点Shader 片元Shader 四、全代码 四、添加官方的LitShader代码 五、全代码 六、效果图 七、结语 前言&#xff1a; 哈喽啊&#xff0c;我又来啦。这…

8086汇编(16位汇编)学习笔记09.宏汇编

8086汇编(16位汇编)学习笔记09.宏汇编-C/C基础-断点社区-专业的老牌游戏安全技术交流社区 - BpSend.net 宏汇编在文件中是当做关键字的,但是在bug中运行时并没有这些指令,这些关键词被称为伪指令,cpu并不认识他们,需要经过编译器转化成 cpu认识的代码,但是他多我们写代码帮助又…

leetcode 面试经典 150 题:矩阵置零

链接矩阵置零题序号73题型二维数组解题方法标记数组法难度中等熟练度✅✅✅✅ 题目 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1]…

五、CentOS7/CentOS8安装APISIX(1)

目录 &#x1f33b;&#x1f33b; 一、 Apache APISIX介绍1.1 什么是Apache APISIX1.2 APISIX架构1.3 Apache APISIX 的技术优势1.4 APISIX‌应用场景 二、APISIX快速开始2.1 centos7/centos8安装APISIX 一、 Apache APISIX介绍 1.1 什么是Apache APISIX Apache APISIX 是一个…

BUG分析 - 重启有时失败

1. 倒查版本 1.0_11 - ok1.0_12 - fail 2.对比1.0_11和1.0_12 失败时的日志 ================================== 1.0_11 ============================== 2024-12-26 09:46:51.886 INFO [26332] [ThreadPLCPool::in

Ngnix介绍、安装、实战及用法!!!

一、Nginx简介 1、Nginx概述 Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理服务器&#xff0c;特点是占有内存少&#xff0c;并发能力强&#xff0c;能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数 。 2、正向代理 正向代理&#xff1a;如果把局…

【物联网】给EoRa Pi 烧录Meshtastic

文章目录 一、Meshtastic 是什么&#xff1f;二、Meshtastic 烧录过程1. 在线烧录工具2. 刷机进度 总结 一、Meshtastic 是什么&#xff1f; Meshtastic 是一种基于 LoRa 技术的离网通信平台。它通过低成本、低功耗的无线电设备&#xff0c;实现远距离自组网通信。可在脱离现有…

Java 中的各种锁

​ Java 中我们经常听到各种锁&#xff0c;例如悲观锁&#xff0c;乐观锁&#xff0c;自旋锁等等。今天我们将 Java 中的所有锁放到一起比较一下&#xff0c;并分析各自锁的特点&#xff0c;让大家能够快捷的理解相关知识。 1、悲观锁 VS 乐观锁 从概念上来说 悲观锁: ​ 在…

【开源免费】基于SpringBoot+Vue.JS租房管理系统(JAVA毕业设计)

本文项目编号 T 102 &#xff0c;文末自助获取源码 \color{red}{T102&#xff0c;文末自助获取源码} T102&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…