河南省疫情可视化面板

最新推荐文章于 2024-09-12 19:02:29 发布
最新推荐文章于 2024-09-12 19:02:29 发布
阅读量944 收藏 22
点赞数 25
文章标签： 信息可视化 echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79678755/article/details/135327552
版权

#声明

  • 单纯记录学习计算机当中所遇到的问题
  • 把解决问题的方法分享给大家
  • 希望大佬不要喷我这个小白

#根据自己的想法完成的可视化面板，没有后端数据。

#面板配置信息

  1. 省地图模块（可参考我的另一篇文章） 
     echarts.registerMap('henan', henan);
            var myEcharts = echarts.init(document.getElementById("map"));
            var mapOption = {
                tooltip: {
                    trigger: 'item',  
                    backgroundColor: "white",  
                    formatter: '地区：{b}<br/>确诊人数：{c}'
                },
                visualMap: {//视觉映射组件
                    bootom: 'bootom',
                    left: 'left',
                    min: 100,
                    max: 1000,
                    text: ['High', 'Low'],
                    realtime: false, 
                    calculable: true,
                    textStyle: {
                        color: '#fff'
                    },
                    inRange: {
                        color: ['#F9DCD1', '#F2AD92', '#E55B25', '#C64918', '#8A3310']
                    }
                },
                series: [
                    {
                        type: 'map',
                        map: 'henan',
                        roam: false,
                        zoom: 1.25,
                        itemStyle: {
                            normal: {
                                areaColor: "rgba(43, 196, 243, 0.42)",
                                borderColor: "rgba(43, 196, 243, 1)",
                                borderWidth: 1,
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: "white"
                                    }
                                }
                            },
                        },
                        data: [
                            { name: '郑州市', value: 2658 },
                            { name: '开封市', value: 150 },
                            { name: '洛阳市', value: 1865 },
                            { name: '平顶山市', value: 160 },
                            { name: '安阳市', value: 450 },
                            { name: '鹤壁市', value: 205 },
                            { name: '新乡市', value: 265 },
                            { name: '焦作市', value: 224 },
                            { name: '濮阳市', value: 216 },
                            { name: '许昌市', value: 250 },
                            { name: '漯河市', value: 270 },
                            { name: '三门峡市', value: 1258 },
                            { name: '南阳市', value: 295 },
                            { name: '商丘市', value: 310 },
                            { name: '周口市', value: 325 },
                            { name: '驻马店市', value: 365 },
                            { name: '信阳市', value: 652 },
                        ]
                    },
                ],
            };
            myEcharts.setOption(mapOption);
  2. 折线图 
    var myChart = echarts.init(document.getElementById('polyline'));
            var polylineOption = {
                textStyle: {
                    color: '#fff'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['新增人数', '治愈人数'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '治愈人数',
                        type: 'line',
                        color: 'green',
                        data: [10, 15, 30, 60, 80, 150, 240]
                    },
                    {
                        name: '新增人数',
                        type: 'line',
                        color: 'red',
                        data: [220, 182, 191, 234, 80, 40, 100]
                    }
                ]
            };
            myChart.setOption(polylineOption);
  3. 柱状图 
     var coloumChart = echarts.init(document.getElementById('coloum'));
            var coloumOption = {
                textStyle: {
                    color: '#fff'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['郑州市', '洛阳市', '三门峡市', '信阳市', '安阳市']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [2658, 1865, 1258, 652, 450],
                        type: 'bar'
                    }
                ]
            };

            coloumChart.setOption(coloumOption);
  4. 政策 
                var policyList = [
                {
                    text: '河南发布暑期师生出行健康提醒：假期可在省内有序流动，跨省前往低风险地区的需提前报备',
                    time: '2022-06-23'
                },
                {
                    text: '暑期防疫措施来了：在疫情形势平稳可控下，全省师生可省内有序流动',
                    time: '2022-06-13'
                },
                {
                    text: '交通运输行业十条措施助企纾困 涉及财税、金融、车辆年审等多方面',
                    time: '2022-05-31'
                }, {
                    text: '事关暑期来返豫，热点问题解答！',
                    time: '2022-05-26'
                }, {
                    text: '省疫情防控指挥部发布通知 有序做好暑期来豫返豫人员健康管理和服务',
                    time: '2022-05-25'
                }, {
                    text: '河南开展常态化核酸检测，河南人将隔一天做一次核酸',
                    time: '2022-05-22'
                }, {
                    text: '河南省加快构建15分钟核酸检测“采样圈”',
                    time: '2022-05-14'
                }
            ]
            policyList.forEach(item => {
                let str = `<li class="polocy_item">
                    <p class="text">${item.text}</p>
                    <div class="time">${item.time}</div>
                </li>`
                $('.list').append(str)
            })
  5. 南丁格尔玫瑰图 
    
            var pieChart = echarts.init(document.getElementById('pie'));
            var pieOption = {
                legend: {
                    top: 'bottom'
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [10, 100],
                        center: ['50%', '45%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 3,
                        },
                        data: [
                            { value: 20, name: '婴幼儿' },
                            { value: 20, name: '少儿' },
                            { value: 32, name: '青少年' },
                            { value: 30, name: '青年' },
                            { value: 50, name: '中年' },
                            { value: 60, name: '老年' }
                        ]
                    }
                ]
            };

            pieChart.setOption(pieOption);

#完整代码 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="css/rest.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/henan.js"></script>
</head>

<body>
    <div id="wrapper">
        <!-- 头部信息栏 -->
        <header>
            <div class="head_l"></div>
            <div class="head_m">
                <h1>河南省疫情可视化面板</h1>
            </div>
            <div class="head_r">当前时间：2022年6月17-0时54分14秒</div>
        </header>
        <div class="content">
            <!-- 左小图区 -->
            <section class="content_l">
                <div class="item bor">
                    <h2>河南7天内新增情况</h2>
                    <div id="polyline"></div>
                </div>
                <div class="item bor">
                    <h2>河南省内高风险地区Top5</h2>
                    <div id="coloum"></div>
                </div>
            </section>
            <!-- 中大图区域 -->
            <section class="content_m">
                <div class="total_num bor">
                    <div class="totalConfirm">现有确诊人数：7805</div>
                    <div class="totalCure">现有治愈人数：3685</div>
                </div>
                <div id="map"></div>
            </section>
            <!-- 右小图区域 -->
            <section class="content_r">
                <div id="policy" class="bor item">
                    <h2 class="policy_title">河南省内最新出行政策</h2>
                    <ul class="list">
                    </ul>
                </div>
                <div class="item bor">
                    <h2>感染人口年龄分布情况</h2>
                    <div id="pie"></div>
                </div>
            </section>
        </div>
        <!-- 底部信息栏 -->
        <footer></footer>




        <script>

            var timer = null;
            timer = setTimeout(time, 1000); 
            function time() {
                clearTimeout(timer); 
                date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hour = date.getHours(); 
                var minutes = date.getMinutes(); 
                var seconds = date.getSeconds(); 
                var str = "当前时间:"+year +"年" +month +"月" +day +"-" +hour +"时" +minutes +"分" +seconds +"秒";
                $('.head_r').html(str) 
                timer= setTimeout(time, 1000); 
            }



            var policyList = [
                {
                    text: '河南发布暑期师生出行健康提醒：假期可在省内有序流动，跨省前往低风险地区的需提前报备',
                    time: '2022-06-23'
                },
                {
                    text: '暑期防疫措施来了：在疫情形势平稳可控下，全省师生可省内有序流动',
                    time: '2022-06-13'
                },
                {
                    text: '交通运输行业十条措施助企纾困 涉及财税、金融、车辆年审等多方面',
                    time: '2022-05-31'
                }, {
                    text: '事关暑期来返豫，热点问题解答！',
                    time: '2022-05-26'
                }, {
                    text: '省疫情防控指挥部发布通知 有序做好暑期来豫返豫人员健康管理和服务',
                    time: '2022-05-25'
                }, {
                    text: '河南开展常态化核酸检测，河南人将隔一天做一次核酸',
                    time: '2022-05-22'
                }, {
                    text: '河南省加快构建15分钟核酸检测“采样圈”',
                    time: '2022-05-14'
                }
            ]
            policyList.forEach(item => {
                let str = `<li class="polocy_item">
                    <p class="text">${item.text}</p>
                    <div class="time">${item.time}</div>
                </li>`
                $('.list').append(str)
            })








            // 初始化echarts实例
            echarts.registerMap('henan', henan);
            var myEcharts = echarts.init(document.getElementById("map"));
            var mapOption = {
                tooltip: {
                    trigger: 'item',  
                    backgroundColor: "white",  
                    formatter: '地区：{b}<br/>确诊人数：{c}'
                },
                visualMap: {//视觉映射组件
                    bootom: 'bootom',
                    left: 'left',
                    min: 100,
                    max: 1000,
                    text: ['High', 'Low'],
                    realtime: false, 
                    calculable: true,
                    textStyle: {
                        color: '#fff'
                    },
                    inRange: {
                        color: ['#F9DCD1', '#F2AD92', '#E55B25', '#C64918', '#8A3310']
                    }
                },
                series: [
                    {
                        type: 'map',
                        map: 'henan',
                        roam: false,
                        zoom: 1.25,
                        itemStyle: {
                            normal: {
                                areaColor: "rgba(43, 196, 243, 0.42)",
                                borderColor: "rgba(43, 196, 243, 1)",
                                borderWidth: 1,
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: "white"
                                    }
                                }
                            },
                        },
                        data: [
                            { name: '郑州市', value: 2658 },
                            { name: '开封市', value: 150 },
                            { name: '洛阳市', value: 1865 },
                            { name: '平顶山市', value: 160 },
                            { name: '安阳市', value: 450 },
                            { name: '鹤壁市', value: 205 },
                            { name: '新乡市', value: 265 },
                            { name: '焦作市', value: 224 },
                            { name: '濮阳市', value: 216 },
                            { name: '许昌市', value: 250 },
                            { name: '漯河市', value: 270 },
                            { name: '三门峡市', value: 1258 },
                            { name: '南阳市', value: 295 },
                            { name: '商丘市', value: 310 },
                            { name: '周口市', value: 325 },
                            { name: '驻马店市', value: 365 },
                            { name: '信阳市', value: 652 },
                        ]
                    },
                ],
            };
            myEcharts.setOption(mapOption);


            var myChart = echarts.init(document.getElementById('polyline'));
            var polylineOption = {
                textStyle: {
                    color: '#fff'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['新增人数', '治愈人数'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '治愈人数',
                        type: 'line',
                        color: 'green',
                        data: [10, 15, 30, 60, 80, 150, 240]
                    },
                    {
                        name: '新增人数',
                        type: 'line',
                        color: 'red',
                        data: [220, 182, 191, 234, 80, 40, 100]
                    }
                ]
            };
            myChart.setOption(polylineOption);





            var coloumChart = echarts.init(document.getElementById('coloum'));
            var coloumOption = {
                textStyle: {
                    color: '#fff'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['郑州市', '洛阳市', '三门峡市', '信阳市', '安阳市']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [2658, 1865, 1258, 652, 450],
                        type: 'bar'
                    }
                ]
            };

            coloumChart.setOption(coloumOption);




            var pieChart = echarts.init(document.getElementById('pie'));
            var pieOption = {
                legend: {
                    top: 'bottom'
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [10, 100],
                        center: ['50%', '45%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 3,
                        },
                        data: [
                            { value: 20, name: '婴幼儿' },
                            { value: 20, name: '少儿' },
                            { value: 32, name: '青少年' },
                            { value: 30, name: '青年' },
                            { value: 50, name: '中年' },
                            { value: 60, name: '老年' }
                        ]
                    }
                ]
            };

            pieChart.setOption(pieOption);

        </script>
    </div>

#项目运行实例https://yn0320.gitee.io/covid19_henan/

蟹黄味汉堡
关注
Tableau疫情可视化
weixin_43162364的博客
06-02 2993
本文数据来源于丁香园官网的疫情数据，包含国家/地区、省份的疑似病例、死亡病例、确诊病例、治愈病例等数据，将其存储在MySQL数据库中，并利用tableau完成相应的动态可视化。 数据获取 数据爬取参考了文章——17行代码简单搞定最新疫情数据获取，根据改进得到代码如下： //导入需要的库 import pymysql //数据库 import re //网页内容爬取正则化 import json //json文件 from pip._vendor import requests //网页爬取 def cr
学习记录之新冠疫情可视化
12-21
学习记录之新冠疫情可视化，主要目的是通过爬取丁香园网站上的疫情数据，进行数据分析和可视化展示，以便更好地理解和跟踪疫情的发展。在这个过程中，涉及到的主要知识点包括数据爬取、数据解析、数据存储以及数据...
疫情可视化part2
热门推荐
xi1213的博客
11-06 3万+
最后我发现人的审美真的变化太快了。项目刚搞完：嗯不错！真漂亮！过去一周后：好丑！如果还有后续的话，我可能就要考虑添加自定义主题配色了。
全球covid19疫情可视化分析
饭饭童鞋的博客
06-01 1675
1.加载数据集。 Hyper格式是tableau为帮助客户更快地分析大数据集和复杂数据集设计的特殊数据引擎技术。我们可以通过双击打开hyper数据，打开COVID19.hyper后可见其中有22万条数据，其中confirmed是含义是确诊人数，deaths是死亡人数，recovered的是康复人数，lastupdate是数据更新的时间 ...
数据可视化之疫情可视化
weixin_48192346的博客
12-05 3064
新型冠状病毒肺炎（COVID-19，简称“新冠肺炎”）疫情肆虐全球多个国家，2020年3月11日，世界卫生组织 (WHO) 正式宣布将新冠肺炎列为全球性大流行病。 在全球抗击新型冠状病毒疫情的过程中，产生了前所未有的大规模疫情数据，利用数据可视化技术，数据分析技术和方法能够协助发现病毒传染源、监测疫情发展、调配救援物资，从而更好地了解疫情发展情况，进行疫情防控工作，实现疫情可视化大屏。
疫情数据可视化
qq_41208905的博客
06-16 1247
疫情数据可视化 闲来无趣，整理一下以往的实验，仅此而已。 一、实验要求如下 1、基本要求： 请提交一份新型冠状病毒肺炎疫情数据可视化技术的研究报告（文档+代码）。 2、关键技术： （1）数据来源 网络爬虫、公开的数据接口、静态数据等。 （2）数据展示 Matplotlib、Echarts、AntV等。 （3）数据分析（可选） Pandas、Numpy、SciPy等。 二、实验过程如下： 本次实验报告利用网络爬虫获取数据和pyecharts数据可视化工具来进行数据展示。 数据来源：https://view.i
疫情可视化part1
xi1213的博客
09-13 5495
至成都九月份以来疫情原因被封了一两周，居家着实无聊，每天都是盯着微信公众号发布的疫情数据看，那种页面，就我一个前端仔来说，看着是真的丑啊！(⊙_⊙)？既然丑，那就自己动手开整！项目是2022.9.5开始的，截止2022.9.12我完成了大概有八成。主要是想让数据更加直观，而且可离线下载(当然还有装逼！┑(￣Д ￣)┍)。我做这个其实还是学到了很多东西，主要是vue2与vue3的区别。以前的this算是可以彻底抛弃了，还有就是组合式api配合setup语法糖，爽啊！就连组件引入后都不用注册了，直接使用。
新冠疫情全球数据可视化
weixin_38708854的博客
02-20 8972
题目：新冠疫情全球数据可视化 简述 新冠疫情自2019底爆发已有1年零3个月之久，很多媒体都有对疫情数据做出可视化与分析，但大多数据可视化都是二维地图的可视化。在一次浏览github的过程中，我无意发现了一个3D地球的可视化工具Globe.GL[1]，就萌生把全球新冠疫情数据通过这个工具可视化出来的想法。这也是一个比较新颖的新冠疫情数据呈现方式，索性就接着作业的机会来实现。 借助全球的新冠疫情数据，我实现了近一年以来全球的疫情情况演变趋势的可视化，通过播放动画的方式呈现可视化结果，从中我看出了我国人民
Python疫情数据获取与可视化展示
北山啦的博客
03-19 2万+
使用Python爬取腾讯新闻疫情数据，并使用pyecharts可视化，绘制国内、国际日增长人数地图，matplotlib绘制方寸图。同时代码是在notebook中完成，随笔记录所的所学，此博客为我记录文章所用，发布到此，仅供网友阅读参考。作者:北山啦写在前面：这个已经不是什么新鲜的话题了，所以请大佬勿喷。
新冠疫情可视化
weixin_43684667的博客
07-10 2029
新冠疫情可视化 本次实践基于丁香园公开的统计数据，实现新冠疫情可视化，包括疫情地图、疫情增长趋势图、疫情分布图等。 全国疫情地图如下： 疫情增长趋势图如下： 一、数据准备 利用爬虫将数据保存至数据库进行数据处理即可。 request模块： requests是python实现的简单易用的HTTP库，官网地址：http://cn.python-requests.org/zh_CN/latest/ re模块： re模块是python用于匹配字符串的模块，该模块中提供的很多功能是基于正则表达式实现的 数据爬取以
课程设计基于Python+Flask框架实现的新冠疫情可视化项目源码.zip
06-30
课程设计基于Python+Flask框架实现的新冠疫情可视化项目源码课程设计基于Python+Flask框架实现的新冠疫情可视化项目源码课程设计基于Python+Flask框架实现的新冠疫情可视化项目源码课程设计基于Python+Flask框架实现...
全球疫情可视化实时更新.zip
03-29
全球疫情可视化实时更新.zip这个压缩包文件提供了一个重要的工具，帮助我们了解世界各地新冠病毒（COVID-19）疫情的发展情况。这个资源包含一个疫情地图，它能够实时更新数据，确保用户获得最新的疫情信息。通过这个...
基于Django的国内疫情数据可视化Web系统源码.zip
05-08
基于Django的国内疫情数据可视化Web系统源码 基于Django的国内疫情数据可视化Web系统源码 基于Django的国内疫情数据可视化Web系统源码 基于Django的国内疫情数据可视化Web系统源码 基于Django的国内疫情数据可视...
利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight（一）
m0_66628975的博客
09-10 1333
Amazon QuickSight 是一款由亚马逊云科技提供的全托管商业智能（BI）服务，专为云端设计。它允许开发者快速创建互动式仪表板、报告和数据可视化，帮助他们从数据中获得洞察。QuickSight 能够无缝连接各种数据源，包括 AWS 服务（如Amazon RDSAmazon S3）以及第三方工具和本地数据库。它还提供了机器学习的高级分析功能，使用户能够执行异常检测、预测等任务，而无需具备数据科学背景。通过。
综合案例-数据可视化-柱状图
最新发布
my_heart_goon的博客
09-12 1022
柱状图+时间线
10个Python办公自动化案例
兔子王
09-10 2927
以下是10个Python办公自动化的案例代码及其分析。
利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight（四）
m0_66628975的博客
09-12 1002
Amazon QuickSight 是一款由亚马逊云科技提供的全托管商业智能（BI）服务，专为云端设计。它允许开发者快速创建互动式仪表板、报告和数据可视化，帮助他们从数据中获得洞察。QuickSight 能够无缝连接各种数据源，包括 AWS 服务（如 Amazon RDS、Amazon S3、Amazon Redshift）以及第三方工具和本地数据库。它还提供了机器学习的高级分析功能，使用户能够执行异常检测、预测等任务，而无需具备数据科学背景。
使用PaddlePaddle进行新冠疫情数据可视化教程
"PaddlePaddle|CV疫情特辑（一）：新冠疫情可视化" 本文将介绍如何使用PaddlePaddle进行新冠疫情的数据可视化，并结合Python的相关库，如requests和re，进行数据爬取和处理。首先，我们需要理解数据获取的基本流程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值