Java版疫情地图

Java版疫情地图

废话不多说直接上图
在这里插入图片描述

如何实现

一、云服务的搭建

  1. 选择一个云服务器(我选的阿里云)腾讯、阿里、网易等等很多而且学生认证可以免费使用,综合各种服务器可以白嫖两年很nice;

  2. 选中阿里云后,进行学生认证,然后进行一些简单的云计算考试就可以白嫖啦,具体步骤请看知乎链接阿里云学生认证免费领取一台6*2个月云服务器,学生"在家实践"计划

  3. 白嫖到服务器的操作系统要选择宝塔Liunx哦,之后还需要对服务器做一些简单的配置,首先关闭服务器,进行安全组管理,网络和安全组,点安全组配置,点击配置规则,点进去后进行修改和添加,优先级为1的是需要添加的,8888端口号为宝塔Liunx管理系统的端口,80和443就不做介绍,宝塔Liunx的管理地址要写自己的地址防止被人篡改信息,自己的在ip直接在百度上查ip即可。

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

  4. 然后重启服务器进行远程连接,密码为当初白嫖服务器时的密码。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  5. 输入bt default获取宝塔liunx的内外网地址、用户名和密码,选在外网地址登录(如果登陆不上去说明第三步8888端口号对应地址不正确),点击应用商店查找Tomcat下载;
    在这里插入图片描述
    在这里插入图片描述

  6. 下载好后在已安装中找到Tomcat,点击文件夹图标,记得将端口改为80,默认8080,改好后重启Tomcat,测试你的地址会出来Tomcat页面,然后将应用代码放入webapps/ROOT中;
    在这里插入图片描述

10.具体代码在下面,最后功能实现;
在这里插入图片描述

代码部分

index.jsp的代码:

<%@ page session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page import="java.net.URL"%>
<%@ page import="java.net.URLConnection"%>
<%@ page import="java.io.InputStream"%>
<%@ page import="java.io.InputStreamReader"%>
<%@ page import="java.io.BufferedReader"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>疫情地图</title>
<script type="text/javascript">
<%
        //1. 先准备一个URL类的对象u
		URL url = new URL("https://zaixianke.com/yq/all");
		//2. 打开服务器,得到链接对象conn
		URLConnection conn = url.openConnection();
		//3. 获取加载数据的字节输入流 is
		InputStream is = conn.getInputStream();
		//4. 将is装饰成为能一次读取的一行的字数输入流br
		BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8"));
		//5. 加载一行数据
		String text = br.readLine();
		//6. . 释放资源
		br.close();

%>
    //1.准备疫情数据
    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="https://cdn.zaixianke.com/china.js"></script>
<script src="https://cdn.zaixianke.com/world.js"></script>	
</head>
<body>
	<div id="main" style="width:100%;height:600px"></div>
	<div style="text-align:center">
		<a style="color:#333" class="control" href="javascript:updateMap(0);">国内累计</a>
		<a style="color:#333" class="control" href="javascript:updateMap(1);">国内新增</a>
		<a style="color:#333" class="control" href="javascript:updateMap(2);">全球累计</a>
		<a style="color:#333" class="control" href="javascript:updateMap(3);">全球新增</a>
	</div>
<script src="control.js"></script>
</body>
</html>

control.js的代码

//1.准备疫情数据
var data = {"data":[{"name":"湖北","value":68149},{"name":"香港","value":8540},{"name":"广东","value":2038},{"name":"上海","value":1492},{"name":"浙江","value":1302},{"name":"河南","value":1298},{"name":"湖南","value":1021},{"name":"安徽","value":993},{"name":"新疆","value":980},{"name":"北京","value":971},{"name":"黑龙江","value":961},{"name":"江西","value":935},{"name":"山东","value":861},{"name":"四川","value":847},{"name":"台湾","value":783},{"name":"江苏","value":684},{"name":"重庆","value":590},{"name":"福建","value":508},{"name":"陕西","value":505},{"name":"河北","value":373},{"name":"内蒙古","value":352},{"name":"辽宁","value":323},{"name":"天津","value":304},{"name":"广西","value":264},{"name":"云南","value":229},{"name":"山西","value":224},{"name":"甘肃","value":182},{"name":"海南","value":171},{"name":"吉林","value":157},{"name":"贵州","value":147},{"name":"宁夏","value":75},{"name":"澳门","value":46},{"name":"青海","value":18},{"name":"西藏","value":1}],"today":[{"name":"湖北","value":0},{"name":"香港","value":59},{"name":"广东","value":0},{"name":"上海","value":4},{"name":"浙江","value":2},{"name":"河南","value":0},{"name":"湖南","value":0},{"name":"安徽","value":1},{"name":"新疆","value":0},{"name":"北京","value":8},{"name":"黑龙江","value":0},{"name":"江西","value":0},{"name":"山东","value":0},{"name":"四川","value":0},{"name":"台湾","value":3},{"name":"江苏","value":0},{"name":"重庆","value":0},{"name":"福建","value":0},{"name":"陕西","value":0},{"name":"河北","value":0},{"name":"内蒙古","value":0},{"name":"辽宁","value":7},{"name":"天津","value":0},{"name":"广西","value":0},{"name":"云南","value":0},{"name":"山西","value":0},{"name":"甘肃","value":0},{"name":"海南","value":0},{"name":"吉林","value":0},{"name":"贵州","value":0},{"name":"宁夏","value":0},{"name":"澳门","value":0},{"name":"青海","value":0},{"name":"西藏","value":0}],"g_today":[{"name":"突尼斯","value":1652},{"name":"塞尔维亚","value":3200},{"name":"中国","value":84},{"name":"日本本土","value":3879},{"name":"泰国","value":110},{"name":"新加坡","value":10},{"name":"韩国","value":970},{"name":"澳大利亚","value":12},{"name":"德国","value":4227},{"name":"美国","value":160604},{"name":"马来西亚","value":2335},{"name":"越南","value":2},{"name":"圣巴泰勒米","value":0},{"name":"肯尼亚","value":130},{"name":"伊朗","value":5760},{"name":"以色列","value":4273},{"name":"毛利亚尼亚","value":0},{"name":"黎巴嫩","value":1403},{"name":"克罗地亚","value":350},{"name":"奥地利","value":1429},{"name":"瑞士","value":0},{"name":"希腊","value":262},{"name":"毛里求斯","value":0},{"name":"爱沙尼亚","value":445},{"name":"北马其顿","value":529},{"name":"白俄罗斯","value":1916},{"name":"立陶宛","value":2350},{"name":"阿塞拜疆","value":1428},{"name":"美属维尔京群岛","value":0},{"name":"蒙古","value":0},{"name":"乌克兰","value":8134},{"name":"波兰","value":4878},{"name":"波黑","value":439},{"name":"蒙特塞拉特","value":0},{"name":"南非","value":11552},{"name":"布隆迪","value":0},{"name":"南苏丹","value":0},{"name":"马耳他","value":129},{"name":"摩尔多瓦","value":746},{"name":"保加利亚","value":469},{"name":"孟加拉","value":834},{"name":"阿尔巴尼亚","value":0},{"name":"巴勒斯坦","value":1306},{"name":"科摩罗","value":0},{"name":"阿富汗","value":76},{"name":"沙特阿拉伯","value":163},{"name":"新西兰","value":16},{"name":"塔吉克斯坦","value":34},{"name":"泽西岛","value":0},{"name":"叙利亚","value":0},{"name":"巴拿马","value":2064},{"name":"古巴","value":138},{"name":"尼日利亚","value":829},{"name":"摩洛哥","value":2369},{"name":"塞内加尔","value":154},{"name":"老挝","value":0},{"name":"巴哈马","value":0},{"name":"马约特岛","value":0},{"name":"斯洛文尼亚","value":369},{"name":"卢森堡","value":0},{"name":"爱尔兰","value":1296},{"name":"厄瓜多尔","value":446},{"name":"捷克","value":2706},{"name":"匈牙利","value":1198},{"name":"法属圭亚那","value":0},{"name":"多哥共和国","value":0},{"name":"哥斯达黎加","value":0},{"name":"文莱","value":0},{"name":"法罗群岛","value":0},{"name":"马提尼克岛","value":5},{"name":"荷兰","value":21},{"name":"巴西","value":17246},{"name":"洪都拉斯","value":623},{"name":"乌拉圭","value":370},{"name":"秘鲁","value":1564},{"name":"智利","value":1811},{"name":"格陵兰","value":0},{"name":"圣巴托洛谬岛","value":0},{"name":"马尔代夫","value":35},{"name":"委内瑞拉","value":358},{"name":"毛里塔尼亚","value":252},{"name":"纳米比亚","value":0},{"name":"法属留尼汪岛","value":0},{"name":"波多黎各","value":0},{"name":"加纳","value":243},{"name":"赤道几内亚","value":0},{"name":"几内亚","value":0},{"name":"卢旺达","value":74},{"name":"格林纳达","value":0},{"name":"斯威士兰","value":197},{"name":"坦桑尼亚","value":0},{"name":"贝宁","value":0},{"name":"刚果(金)","value":291},{"name":"中非共和国","value":0},{"name":"利比里亚","value":0},{"name":"索马里","value":0},{"name":"塞拉利昂","value":18},{"name":"乍得","value":15},{"name":"赞比亚","value":100},{"name":"巴巴多斯","value":0},{"name":"马里","value":86},{"name":"阿根廷","value":3713},{"name":"法属波利尼西亚","value":0},{"name":"巴林","value":214},{"name":"莫桑比克","value":54},{"name":"喀麦隆","value":0},{"name":"乌干达","value":203},{"name":"厄立特里亚","value":0},{"name":"刚果(布)","value":337},{"name":"津巴布韦","value":83},{"name":"丹麦","value":1838},{"name":"阿鲁巴","value":0},{"name":"斐济","value":0},{"name":"伯利兹","value":0},{"name":"缅甸","value":734},{"name":"塞浦路斯","value":25},{"name":"关岛","value":0},{"name":"科索沃","value":0},{"name":"圣皮埃尔岛和密克隆岛","value":0},{"name":"吉尔吉斯斯坦","value":157},{"name":"博茨瓦纳","value":0},{"name":"尼日尔","value":52},{"name":"苏里南","value":58},{"name":"佛得角","value":2},{"name":"萨尔瓦多","value":0},{"name":"圭亚那","value":0},{"name":"尼加拉瓜","value":0},{"name":"冈比亚","value":0},{"name":"东帝汶","value":0},{"name":"巴基斯坦","value":2260},{"name":"埃及","value":1189},{"name":"科威特","value":172},{"name":"斯洛伐克","value":1041},{"name":"直布罗陀","value":0},{"name":"摩纳哥","value":0},{"name":"巴拉圭","value":274},{"name":"荷属安的列斯","value":0},{"name":"多米尼克","value":0},{"name":"乌兹别克斯坦","value":98},{"name":"黑山","value":382},{"name":"危地马拉","value":91},{"name":"加蓬","value":28},{"name":"苏丹","value":0},{"name":"利比亚","value":0},{"name":"圣马丁岛","value":0},{"name":"土耳其","value":15118},{"name":"巴布亚新几内亚","value":0},{"name":"多米尼加","value":905},{"name":"约旦","value":1050},{"name":"亚美尼亚","value":586},{"name":"圣基茨和尼维斯","value":0},{"name":"瓜德罗普","value":0},{"name":"安提瓜和巴布达","value":1},{"name":"玻利维亚","value":759},{"name":"哥伦比亚","value":10196},{"name":"圣文森特和格林纳丁斯","value":0},{"name":"圣卢西亚","value":0},{"name":"法国","value":3093},{"name":"阿联酋","value":1227},{"name":"加拿大","value":890},{"name":"印度","value":22273},{"name":"英国","value":34714},{"name":"意大利","value":10405},{"name":"俄罗斯","value":28833},{"name":"菲律宾","value":1404},{"name":"芬兰","value":173},{"name":"尼泊尔","value":500},{"name":"葡萄牙","value":1214},{"name":"也门","value":0},{"name":"塞舌尔","value":0},{"name":"西班牙","value":10967},{"name":"斯里兰卡","value":98},{"name":"阿尔及利亚","value":416},{"name":"柬埔寨","value":0},{"name":"海地","value":0},{"name":"瑞典","value":0},{"name":"特里尼达和多巴哥","value":0},{"name":"吉布提","value":5},{"name":"圣多美与普林西比","value":0},{"name":"布基纳法索","value":121},{"name":"比利时","value":784},{"name":"伊拉克","value":836},{"name":"马拉维","value":4},{"name":"冰岛","value":0},{"name":"几内亚比绍","value":0},{"name":"拉脱维亚","value":399},{"name":"不丹","value":0},{"name":"挪威","value":430},{"name":"印度尼西亚","value":6740},{"name":"安哥拉","value":50},{"name":"开曼群岛","value":0},{"name":"埃塞俄比亚","value":533},{"name":"梵蒂冈","value":0},{"name":"科特迪瓦","value":10},{"name":"卡塔尔","value":169},{"name":"莱索托","value":0},{"name":"格鲁吉亚","value":1784},{"name":"墨西哥","value":4974},{"name":"圣马力诺","value":0},{"name":"哈萨克斯坦","value":926},{"name":"安道尔","value":50},{"name":"牙买加","value":165},{"name":"格恩西岛","value":0},{"name":"罗马尼亚","value":1387},{"name":"阿曼","value":0},{"name":"列支敦士登","value":0},{"name":"马达加斯加","value":0}],"g_data":[{"name":"突尼斯","value":130230},{"name":"塞尔维亚","value":323367},{"name":"中国","value":96324},{"name":"日本本土","value":218453},{"name":"泰国","value":6020},{"name":"新加坡","value":58519},{"name":"韩国","value":56872},{"name":"澳大利亚","value":28308},{"name":"德国","value":1646240},{"name":"美国","value":19433847},{"name":"马来西亚","value":103900},{"name":"越南","value":1440},{"name":"圣巴泰勒米","value":6},{"name":"肯尼亚","value":95843},{"name":"伊朗","value":1194963},{"name":"以色列","value":398664},{"name":"毛利亚尼亚","value":16},{"name":"黎巴嫩","value":169472},{"name":"克罗地亚","value":204312},{"name":"奥地利","value":350484},{"name":"瑞士","value":428197},{"name":"希腊","value":135114},{"name":"毛里求斯","value":527},{"name":"爱沙尼亚","value":25027},{"name":"北马其顿","value":81425},{"name":"白俄罗斯","value":184922},{"name":"立陶宛","value":128931},{"name":"阿塞拜疆","value":213192},{"name":"美属维尔京群岛","value":72},{"name":"蒙古","value":197},{"name":"乌克兰","value":1049717},{"name":"波兰","value":1253957},{"name":"波黑","value":109330},{"name":"蒙特塞拉特","value":11},{"name":"南非","value":994911},{"name":"布隆迪","value":85},{"name":"南苏丹","value":1755},{"name":"马耳他","value":12241},{"name":"摩尔多瓦","value":140996},{"name":"保加利亚","value":197384},{"name":"孟加拉","value":508099},{"name":"阿尔巴尼亚","value":1521},{"name":"巴勒斯坦","value":131904},{"name":"科摩罗","value":176},{"name":"阿富汗","value":50886},{"name":"沙特阿拉伯","value":362066},{"name":"新西兰","value":2144},{"name":"塔吉克斯坦","value":13172},{"name":"泽西岛","value":313},{"name":"叙利亚","value":177},{"name":"巴拿马","value":228724},{"name":"古巴","value":11038},{"name":"尼日利亚","value":83576},{"name":"摩洛哥","value":430562},{"name":"塞内加尔","value":18523},{"name":"老挝","value":19},{"name":"巴哈马","value":7788},{"name":"马约特岛","value":2282},{"name":"斯洛文尼亚","value":114184},{"name":"卢森堡","value":45209},{"name":"爱尔兰","value":85394},{"name":"厄瓜多尔","value":209274},{"name":"捷克","value":667569},{"name":"匈牙利","value":315362},{"name":"法属圭亚那","value":1255},{"name":"多哥共和国","value":530},{"name":"哥斯达黎加","value":162990},{"name":"文莱","value":152},{"name":"法罗群岛","value":187},{"name":"马提尼克岛","value":37},{"name":"荷兰","value":764907},{"name":"巴西","value":7465806},{"name":"洪都拉斯","value":118659},{"name":"乌拉圭","value":16218},{"name":"秘鲁","value":1005546},{"name":"智利","value":598394},{"name":"格陵兰","value":13},{"name":"圣巴托洛谬岛","value":6},{"name":"马尔代夫","value":13618},{"name":"委内瑞拉","value":111603},{"name":"毛里塔尼亚","value":13516},{"name":"纳米比亚","value":31},{"name":"法属留尼汪岛","value":487},{"name":"波多黎各","value":5536},{"name":"加纳","value":54286},{"name":"赤道几内亚","value":5236},{"name":"几内亚","value":13646},{"name":"卢旺达","value":7817},{"name":"格林纳达","value":23},{"name":"斯威士兰","value":8367},{"name":"坦桑尼亚","value":509},{"name":"贝宁","value":3205},{"name":"刚果(金)","value":16763},{"name":"中非共和国","value":4948},{"name":"利比里亚","value":1779},{"name":"索马里","value":4690},{"name":"塞拉利昂","value":2549},{"name":"乍得","value":1986},{"name":"赞比亚","value":19671},{"name":"巴巴多斯","value":96},{"name":"马里","value":6574},{"name":"阿根廷","value":1578267},{"name":"法属波利尼西亚","value":60},{"name":"巴林","value":91518},{"name":"莫桑比克","value":18162},{"name":"喀麦隆","value":26277},{"name":"乌干达","value":33563},{"name":"厄立特里亚","value":41},{"name":"刚果(布)","value":6908},{"name":"津巴布韦","value":12963},{"name":"丹麦","value":151764},{"name":"阿鲁巴","value":101},{"name":"斐济","value":46},{"name":"伯利兹","value":10490},{"name":"缅甸","value":121280},{"name":"塞浦路斯","value":19391},{"name":"关岛","value":183},{"name":"科索沃","value":1326},{"name":"圣皮埃尔岛和密克隆岛","value":1},{"name":"吉尔吉斯斯坦","value":80182},{"name":"博茨瓦纳","value":60},{"name":"尼日尔","value":3057},{"name":"苏里南","value":5938},{"name":"佛得角","value":11698},{"name":"萨尔瓦多","value":44619},{"name":"圭亚那","value":159},{"name":"尼加拉瓜","value":5991},{"name":"冈比亚","value":28},{"name":"东帝汶","value":24},{"name":"巴基斯坦","value":469482},{"name":"埃及","value":131315},{"name":"科威特","value":149449},{"name":"斯洛伐克","value":166649},{"name":"直布罗陀","value":176},{"name":"摩纳哥","value":99},{"name":"巴拉圭","value":104162},{"name":"荷属安的列斯","value":22},{"name":"多米尼克","value":18},{"name":"乌兹别克斯坦","value":76666},{"name":"黑山","value":46327},{"name":"危地马拉","value":135171},{"name":"加蓬","value":9497},{"name":"苏丹","value":23316},{"name":"利比亚","value":97653},{"name":"圣马丁岛","value":77},{"name":"土耳其","value":2133373},{"name":"巴布亚新几内亚","value":8},{"name":"多米尼加","value":165940},{"name":"约旦","value":286356},{"name":"亚美尼亚","value":157349},{"name":"圣基茨和尼维斯","value":15},{"name":"瓜德罗普","value":171},{"name":"安提瓜和巴布达","value":155},{"name":"玻利维亚","value":154349},{"name":"哥伦比亚","value":1584903},{"name":"圣文森特和格林纳丁斯","value":27},{"name":"圣卢西亚","value":19},{"name":"法国","value":2607688},{"name":"阿联酋","value":200892},{"name":"加拿大","value":540941},{"name":"印度","value":10169118},{"name":"英国","value":2262735},{"name":"意大利","value":2038759},{"name":"俄罗斯","value":2992123},{"name":"菲律宾","value":469005},{"name":"芬兰","value":34821},{"name":"尼泊尔","value":257700},{"name":"葡萄牙","value":392996},{"name":"也门","value":2092},{"name":"塞舌尔","value":11},{"name":"西班牙","value":1869610},{"name":"斯里兰卡","value":40380},{"name":"阿尔及利亚","value":97857},{"name":"柬埔寨","value":363},{"name":"海地","value":9805},{"name":"瑞典","value":396048},{"name":"特里尼达和多巴哥","value":123},{"name":"吉布提","value":5805},{"name":"圣多美与普林西比","value":659},{"name":"布基纳法索","value":6255},{"name":"比利时","value":638030},{"name":"伊拉克","value":590779},{"name":"马拉维","value":6343},{"name":"冰岛","value":5683},{"name":"几内亚比绍","value":2447},{"name":"拉脱维亚","value":35819},{"name":"不丹","value":66},{"name":"挪威","value":46678},{"name":"印度尼西亚","value":706837},{"name":"安哥拉","value":17149},{"name":"开曼群岛","value":187},{"name":"埃塞俄比亚","value":122413},{"name":"梵蒂冈","value":12},{"name":"科特迪瓦","value":22081},{"name":"卡塔尔","value":142903},{"name":"莱索托","value":4},{"name":"格鲁吉亚","value":220508},{"name":"墨西哥","value":1377217},{"name":"圣马力诺","value":2231},{"name":"哈萨克斯坦","value":197142},{"name":"安道尔","value":7806},{"name":"牙买加","value":12684},{"name":"格恩西岛","value":252},{"name":"罗马尼亚","value":613760},{"name":"阿曼","value":128290},{"name":"列支敦士登","value":82},{"name":"马达加斯加","value":17633}]}
//2.初始化地图并得到组件
var e = document.getElementById("main");
var myChart = echarts.init(e);
//3.处理各个链接的点击事件
function updateMap(num){
//3.1编写地图配置
	var opt = null;
	switch(num){
		case 0:{
			opt = {
				//设置标题
				title:{
					text:'国内个省份累计数据',
					subtext:'嘉嘉',
					sublink:'https://www.kaikeba.com'
				},
				//数据提示窗口
				tooltip:{
					trigger:'item',
					formatter:function(params,ticket,callback){
						if(params.data)
							return params.name+'<br/>'+params.data.value+'<人>';
						else
							return params.name+'<br/>无疫情信息';
					}
				},
				//设置视觉映射方案
				visualMap:{
					type:'piecewise',
					pieces:[
					        {gt:2000,color:'darkred'},
					        {gt:1000,lte:2000,color:'red',colorAlpha:1},
					        {gt:500,lte:1000,color:'red',colorAlpha:0.7},
					        {gt:200,lte:500,color:'red',colorAlpha:0.5},
					        {gt:100,lte:200,color:'red',colorAlpha:0.3},
					        {gt:50,lte:100,color:'red',colorAlpha:0.2},
					        {lt:50,color:'red',colorAlpha:0.1}
					        ]
				},
				//绑定具体数据,以及对其地图调整
				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',
					formatter:function(params,ticket,callback){
						if(params.data)
							return params.name+'<br/>'+params.data.value+'<人>';
						else
							return params.name+'<br/>无疫情信息';
					}
				},
				//设置视觉映射方案
				visualMap:{
					type:'piecewise',
					pieces:[
					        {gt:30,color:'darkred'},
					        {gt:20,lte:30,color:'red',colorAlpha:1},
					        {gt:10,lte:20,color:'red',colorAlpha:0.7},
					        {gt:5,lte:10,color:'red',colorAlpha:0.5},
					        {gt:3,lte:5,color:'red',colorAlpha:0.3},
					        {gt:1,lte:3,color:'red',colorAlpha:0.2},
					        {lt:1,color:'red',colorAlpha:0}
					        ]
				},
				//绑定具体数据,以及对其地图调整
				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',
					formatter:function(params,ticket,callback){
						if(params.data)
							return params.name+'<br/>'+params.data.value+'<人>';
						else
							return params.name+'<br/>未公布疫情信息';
					}
				},
				//设置视觉映射方案
				visualMap:{
					min:1,
					max:1500000,
					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,
				        		formatter:function(params,ticked,callback){
				        			if(params.data && params.data.value>100000 || params.name=='中国')
				        				return params.name;
				        			else
				        				return '';
				        		},
				        		fontSize:8
				        	},
				        	data:data.g_data
				        }
				      ]
			};
			break;
		}

		case 3:{
			opt = {
				//设置标题
				title:{
					text:'全球各国新增数据',
					subtext:'嘉嘉',
					sublink:'https://www.kaikeba.com'
				},
				//数据提示窗口
				tooltip:{
					trigger:'item',
					formatter:function(params,ticket,callback){
						if(params.data)
							return params.name+'<br/>'+params.data.value+'<人>';
						else
							return params.name+'<br/>未公布疫情信息';
					}
				},
				//设置视觉映射方案
				visualMap:{
					min:1,
					max:30000,
					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,
				        		formatter:function(params,ticked,callback){
				        			if(params.data && params.data.value>1000 || params.name=='中国')
				        				return params.name;
				        			else
				        				return '';
				        		},
				        		fontSize:8
				        	},
				        	data:data.g_today
				        }
				      ]
			};
			break;
		}
	}
	
//3.2清空原数据
	myChart.clear();
//3.3将配置设置到地图上
	myChart.setOption(opt);
}
updateMap(0);

最后

首先,感谢开课吧对我的指导,以及让我明白这些原理的老师们!
我还是一名菜鸟,还需要慢慢的摸索前进,这个地图功能最大问题在于没有做证书认证,导致地图部分无法正常显示需要先访问https://cdn.zaixianke.com/china.js然后才能正常访问到地图,其次其中不足我还在慢慢摸索,望各位同学,大神批评指正,再次感谢大家。

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值