疫情地图项目

最新推荐文章于 2024-04-02 09:42:28 发布
最新推荐文章于 2024-04-02 09:42:28 发布
阅读量907 收藏 5
点赞数 1
分类专栏： 前端笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43619459/article/details/108073372
版权

文章目录

01 | 效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

02 | 代码实现

  1. control.js

    var myChart = echarts.init(document.getElementById('main'));
function updateMap(num){
		$(".control").show();
		$(".control:eq("+num+")").hide();
		myChart.clear();
		var opt = null;
		switch(num){
			case 0:{
				opt = {
				        // 设置标题和副标题及副标题跳转链接
				        title: {
				            text: '新冠疫情-国内累计数据',
				            subtext: '数据来源--开课吧',
				            sublink: 'https://www.kaikeba.com'
				        },
				        // 数据提示框
				        tooltip: {
				            trigger: 'item', // item放到数据区域触发
				            formatter: function (params, ticket, callback) {
				                if(params.data)
				                    return params.name+'<br/>'+params.data.value+' (人)';
				                else
				                    return params.name+'<br/>无疫情信息';
				            }
				        },
				        // 视觉映射方案:
				        // visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
				        // 使用透明度来区分疫情严重情况
				        visualMap: {
				            type: 'piecewise',
				            pieces: [
				                {gt: 2000, color: 'darkred'},                        // (1500, Infinity]
				                {gt: 1300, lte: 2000, color: 'red', colorAlpha: 1},  // (1000, 1500]
				                {gt: 800, lte: 1300, color: 'red', colorAlpha: 0.8},
				                {gt: 500, lte: 800, color: 'red', colorAlpha: 0.6},
				                {gt: 200, lte: 500, color: 'red', colorAlpha: 0.4},
				                {gt: 50, lte: 200, color: 'red', colorAlpha: 0.3},
				                {lt: 50, color: 'red', colorAlpha: 0.2}          // (-Infinity, 100)
				            ],
				        },
				
				        // 具体数据
				        series: [
				            {
				                name: '国内各省确诊病例', // 系列名称
				                zoom:1.2,//地图大小
				                type: 'map', // 系列类型，地图
				                map: 'china', // 要使用的地图，即上面注册的地图名称
				                roam: true, // 开启鼠标缩放和平移漫游
				                label: { // 图形上的文本标签，地图默认显示数据名
				                    show: true,
				                    formatter: '{b}', // b是数据名，c是数据值
				                    fontSize: 8
				                },
				                data: data.data,
				            }
				        ]
				    };
				
			}
			break;
			case 1:{
				opt = {
				        // 设置标题和副标题及副标题跳转链接
				        title: {
				            text: '新冠疫情-国内新增数据',
				            subtext: '数据来源--开课吧',
				            sublink: 'https://www.kaikeba.com'
				        },
				        // 数据提示框
				        tooltip: {
				            trigger: 'item', // item放到数据区域触发
				            formatter:  function (params, ticket, callback) {
				                if(params.data)
				                    return params.name+'<br/>'+params.data.value+' (人)';
				                else
				                    return params.name+'<br/>无疫情信息';
				            }
				        },
				
						// 视觉映射方案:
				        // visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
				        // 使用透明度来区分疫情严重情况
				        visualMap: {
				            type: 'piecewise',
				            pieces: [
				                {gt: 50, color: 'darkred'},                        // (1500, Infinity]
				                {gt: 30, lte: 50, color: 'red', colorAlpha: 1},  // (1000, 1500]
				                {gt: 20, lte: 30, color: 'red', colorAlpha: 0.8},
				                {gt: 10, lte: 20, color: 'red', colorAlpha: 0.6},
				                {gt: 5, lte: 10, color: 'red', colorAlpha: 0.4},
				                {gt: 1, lte: 5, color: 'red', colorAlpha: 0.3},
				                {lt: 1, color: 'red', colorAlpha: 0.0}          // (-Infinity, 100)
				            ],
				        },
				
				        // 具体数据
				        series: [
				            {
				                name: '国内各省确诊病例', // 系列名称
				                zoom:1.2,//地图大小
				                type: 'map', // 系列类型，地图
				                map: 'china', // 要使用的地图，即上面注册的地图名称
				                roam: true, // 开启鼠标缩放和平移漫游
				                label: { // 图形上的文本标签，地图默认显示数据名
				                    show: true,
				                    formatter: '{b}', // b是数据名，c是数据值
				                    fontSize: 8
				                },
				                data: data.today,
				            }
				        ]
				    };	
			}
			break;
			case 2:{
				opt = {
				    // 设置标题和副标题及副标题跳转链接
				    title: {
				      text: '新冠疫情-全球累计数据',
				      subtext: '数据来源--开课吧',
				      sublink: 'https://www.kaikeba.com'
				    },
				    // 数据提示框
				    tooltip: {
				      trigger: 'item', // item放到数据区域触发
				      //formatter: '{b}<br/>{c} (人)' // 提示数据格式br表示换行，地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
				      formatter:function (params, ticket, callback) {
				        if(params.data)
				          return params.name+'<br/>'+params.data.value+' (人)';
				        else
				          return params.name+'<br/> 未公布感染人数';
				      }
				    },
				    // 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
				    // 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
				    /**/
				    visualMap: {
				      min: 1, // 颜色映射对应的最小值，即对应下面的lightskyblue
				      max: 500000, // 颜色映射对应的最大值，即对应下面的orangered
				      text: ['严重', '轻微'], // 映射图上下标记文本
				      realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
				      calculable: true, // 拖拽时，是否实时更新地图
				      inRange: {
				        color: ['rgba(222,0,0,0.2)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
				      }
				    },
				
				    
				
				
				    // 具体数据
				    series: [
				      {
				        name: '全球各国确诊病例', // 系列名称
				        zoom:1.2,//地图大小
				        type: 'map', // 系列类型，地图
				        map: 'world', // 要使用的地图，即上面注册的地图名称
				        roam: true, // 开启鼠标缩放和平移漫游
				        label: { // 图形上的文本标签，地图默认显示数据名
				          show: true,
				          fontSize:8,
				          //formatter: '{b}', // b是数据名，c是数据值
				          formatter:function (params, ticket, callback) {
				            //公布了数据 且 数据累计数据大于5万的显示国家名称
				            if(params.data && params.data.value>50000) {
				              return params.name;
				            }else{
				              return '';
				            }
				          }
				        },
				        data: data.g_data,
				      }
				    ]
				  };
			}
			break;
			case 3:{
				opt = {
				    // 设置标题和副标题及副标题跳转链接
				    title: {
				      text: '新冠疫情-全球新增数据',
				      subtext: '数据来源--开课吧',
				      sublink: 'https://www.kaikeba.com'
				    },
				    // 数据提示框
				    tooltip: {
				      trigger: 'item', // item放到数据区域触发
				      formatter:function (params, ticket, callback) {
				        if(params.data)
				          return params.name+'<br/>'+params.data.value+' (人)';
				        else
				          return params.name+'<br/> 未公布感染人数';
				      }
				    },
				    // 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
				    // 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
				    /**/
				    visualMap: {
				      min: 0, // 颜色映射对应的最小值，
				      max: 20000, // 颜色映射对应的最大值
				      text: ['严重', '轻微'], // 映射图上下标记文本
				      realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
				      calculable: true, // 拖拽时，是否实时更新地图
				      inRange: {
				        color: ['rgba(160,0,0,0)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
				      }
				    },
				    // 具体数据
				    series: [
				      {
				        name: '全球各国新增病例', // 系列名称
				        zoom:1.2,//地图大小
				        type: 'map', // 系列类型，地图
				        map: 'world', // 要使用的地图，即上面注册的地图名称
				        roam: true, // 开启鼠标缩放和平移漫游
				        label: { // 图形上的文本标签，地图默认显示数据名
				          show: true,
				          fontSize:8,
				          //formatter: '{b}', // b是数据名，c是数据值
				          formatter:function (params, ticket, callback) {
				            //公布了数据 且 数据累计数据大于5万的显示国家名称
				            if(params.data && params.data.value>1000 || params.name == '中国') {
				              return params.name;
				            }else{
				              return '';
				            }
				          }
				        },
				        data: data.g_today,
				      }
				    ]
				  };
			}
			break;
		}
		 myChart.setOption(opt);
	}
	updateMap(0);

  2. index.jsp

    <%@ page import="java.io.InputStream" %>
<%@ page import="java.net.URL" %>
<%@ page import="java.io.BufferedReader" %>
<%@ page import="java.io.InputStreamReader" %>
<%@ page import="java.net.URLConnection" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>疫情地图</title>
  </head>

  <script type="text/javascript">
    <%!
        // 记录时间戳 ，0表示1970年1月1日
        long time = 0;
        String text;
    %>

    <%
        //时间戳:指的是格林威治开始时( 1970-1-1 00:00) 历到月前的毫秒数13位数字
        if(System.currentTimeMillis() - time > 600000) {        // 600000表示10分钟
            // 更新时间
            time = System.currentTimeMillis();

            //1. 创建一个URL类的对象url
            URL url = new URL("https://zaixianke.com/yq/all");

            //2. 通过URL类的对象url打开网络连接 , 并得到连接对象conn
            URLConnection conn = url.openConnection();

            //3. 通过连接对象 , 得到用于读取网页内容的输入流 is
            InputStream is = conn.getInputStream();

            //4. 将上述的字节流is 装饰为字符流 , 将字符流再装饰为一次能读取一行的字符流br
            BufferedReader br = new BufferedReader(new InputStreamReader(is, "UTF-8"));

            //5. 通过字符流br,读取一行内容,并将内容存储到变量text中
            text = br.readLine();     // 由于之前在成员区域已经声明过 这里要取消原先的声明 否则页面加载不出来
        }
        //6. 可以将读取到的内容text 输出显示到前端模板中
       %>
      var data = <%=text%>;
  </script>
  
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
  <script src="http://cdn.zaixianke.com/china.js"></script>
  <script src="http://cdn.zaixianke.com/world.js"></script>
  </head>
  <body>
    <div id="main" style="width: 100%;height:600px;"></div> <br>
    <div style="text-align:center">
      <a style="color:#333" class="control" align="center" href="javascript:updateMap(0)">国内累计</a>
      <a style="color:#333" class="control" align="center" href="javascript:updateMap(1)">国内新增</a>
      <a style="color:#333" class="control" align="center" href="javascript:updateMap(2)">全球累计</a>
      <a style="color:#333" class="control" align="center" href="javascript:updateMap(3)">全球新增</a>
    </div>
    <script src="control.js"></script>
  </body>
</html>
aLinxi
关注
专栏目录
【毕业设计】基于Vue+ECharts的疫情数据可视化大屏/地图项目（附论文目录结构参考）酷炫大屏
coderYYY的博客
05-30 7161
Vue+echarts做的一个中国疫情数据可视化网站，附源码和论文参考
疫情地图项目.rar
08-18
项目内容偏向前端解决，疫情地图项目的代码包，内含植物大战僵尸代码包，自动关机代码包、短信发送代码包，以及项目直播随堂笔记代码包。
Katana 项目教程
最新发布
gitblog_00060的博客
04-02 382
Katana 项目教程 Katana 项目地址: https://gitcode.com/gh_mirrors/katan/Katana 1. 项目目录结构及介绍 Katana 项目的目录结构如下： Kat...
nCoV疫情地图项目组数据库事务
Francis的博客
02-10 632
0.导语最近在nCoV项目组做数据库业务。最后的成果如下：欢迎大家体验及提bug，访问请点开图片，长按下面二维码，或者点击阅读原文。最后，是我负责的数据库的一个比较有意思的需求阐述与解决...
全国一日疫情地图python
qq_44084047的博客
11-14 384
{"min": 1, "max": 99, "label": "1-99人", "color": "#CCFFFF"}, # ab173里web安全色中有颜色码（前端里）{"min": 10000, "max": 99999, "label": "10000-99999人", "color": "#CC3333"},{"min": 1000, "max": 4999, "label": "1000-4999人", "color": "#FF9966"},map.render("全国疫情地图.html")
疫情地图项目.zip
01-05
"疫情地图项目.zip"是一个可能包含用于展示全球或特定地区新冠疫情数据的应用程序或数据可视化项目。这个压缩包可能包括各种文件，如HTML、CSS、JavaScript、JSON数据文件以及可能的图像资源，用于创建一个交互式的...
Echarts疫情地图
04-20
总结起来，ECharts疫情地图项目涉及了ECharts库的使用、前端开发技术、数据处理、地图可视化、交互设计等多个方面，是一个综合性的Web开发实践，需要开发者具备扎实的JavaScript基础，以及对数据可视化和用户体验的...
2019ncov疫情地图
01-07
依据定位对所在省份的疫情地图的展示 全国疫情数据的表格展示 技术路线 vue全家桶 echarts 百度地图API element-ui 数据来源 丁香园 最后 功能较为简单，主要是一些轮子的拼凑，菜鸟一枚，有什么不对的地方还望指教 ...
基于echart的简单疫情地图系统.zip
06-23
在本项目"基于echart的简单疫情地图系统.zip"中，开发者使用了ECharts这个强大的JavaScript数据可视化库来创建一个疫情数据分析系统。ECharts是由百度开发的开源图表库，它支持丰富的图表类型，如折线图、饼状图、...
Java疫情地图项目
qq_47463985的博客
12-28 1281
获取疫情信息 //1.先准备一个网址（URL） URL url = new URL("网页地址"); //2.打开服务器链接，得到连接对象conn URLConnection conn = url.openConnection(); //3.获取加载数据的字节输入流 InputStream is = conn.getInputStream(); //4.将is装饰为能一次读取一行的字节输入流 br BufferedReader br = new BufferedReader(new InputStreamR
精选_基于SSM+BaiduMap.API+MySQL实现的疫情打卡系统_源码打包
03-12
基于SSM+BaiduMap.API+MySQL实现的疫情打卡系统
疫情地图htmljsjava
05-10
疫情地图htmljsjava
【echarts】echarts实现疫情地图（一看就会篇）
01-08
echarts实现疫情地图（一看就会篇） echarts相比于highcharts更加简单上手，所以现在我个人觉得echarts的使用者是比highcharts多的，前面我介绍过highcharts实现疫情地图的方式，所以今天来补充一下echarts的使用方法 一.echarts介绍 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 二.echarts使
Vue.js 疫情地图项目
SDAW_1的博客
02-18 2717
最终效果图 主要的.vue文件 <template> <div class="hello" > <!-- 初始化echarts需要个有宽高的盒子--> <div ref="mapbox" style="height:400px;width:600px"></div> </div> </templat...
疫情地图
weixin_43056654的博客
05-06 606
项目依赖安装包 echart-countries-pypkg echart-china-provinces-pypkg echart-china-cities-pypkg echart-china-counties-pypkg echart-china-misc-pypkg # echart-united-kingdom-pypkg pyecharts==0.5.11 # 画图工具 pyc...
疫情数据地图
Hello_Bye的博客
02-05 9874
武汉加油，中国加油！ 根据网易新闻的提供的数据进行了疫情地图数据的爬取，源网址是为 https://news.163.com/special/epidemic/spss=other&spssid=e259599be7482ba582c50d022764d829&spsw=1 根据上面的数据进行了字段划分，并且爬取了相关的数据，代码如下： import requests impo...
实时的可视化疫情地图
热门推荐
weixin_43139613的博客
01-31 1万+
多难兴邦，希望疫情尽快结束，等待春暖花开 from pyecharts.faker import Faker from pyecharts import options as opts from pyecharts.charts import Map from selenium import webdriver from selenium.webdriver.common.by import By...
疫情数据分析平台（四）：世界疫情地图绘制
EastMage的博客
05-25 744
我同时兼任前端开发以及数据可视化中的疫情地图绘制，这部分内容属于我们项目中放在首页最醒目位置的内容，也是我们比较核心的功能之一。疫情地图绘制我将利用echarts的地图控件实现世界地图的绘制，功能包括世界地图国家板块、视觉映射效果（疫情严重与否体现在颜色深浅）、疫情数据的展示等。 在开发疫情地图过程中，数据取自后端，但并不像一般页面中获取——渲染——展示这一简单流程即可实现。由于地图绘制和数据获取在同一生命周期且数据获取（axios请求数据）的时间不确定，取决于接口大小、网络速度等问题，因此需要引入大量异
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值