echarts 全国新冠肺炎分布图

最新推荐文章于 2022-10-08 09:48:56 发布

--新芽-

最新推荐文章于 2022-10-08 09:48:56 发布

阅读量6.1k

点赞数 1

本文链接：https://blog.csdn.net/hhhhhhhhhtr/article/details/107363565

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全国新冠肺炎分布图</title>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/feiyan.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.map {width: 1200px;height: 680px;}
		</style>
	</head>
	<body>
		<div class="map"></div>
	</body>
	<script type="text/javascript">
		$(function() {
			var myChart = echarts.init(document.querySelector(".map"),"light");
			var provinces = data.data.feiyan.provinces;
			var option = {
				title : {text : "中国新冠肺炎趋势图"},
				tooltip : {
					trigger : "item"
				},
				// 映射
				visualMap : {
					// 提示图例
					show : true,
					// 分段类型
					pieces: [
					    {start: 1500,color:"#500",symbol:"circle"},
					    {start: 1000, end: 1500,color: 'darkred',symbol:"circle"},
					    {start: 310, end: 1000,color: 'orangered',symbol:"circle"},
					    {start: 200, end: 300,color: 'yellow',symbol:"circle"},
					    {start: 10, end: 200, label: '10 到 200',color: '#ff9',symbol:"circle"},
					    {start: 5, end: 5, label: '5（数量）', color: '#f0f0f0',symbol:"circle"},
					               
					],
					// 图列水平
					orient : "horizontal",
					// 右侧
					left : "right"
				},
				// 定义选项
				series : [
					{
						type : "map",
						map : "china",
						data : provinces.map(item => ({
							...item,
							value : item.sure_cnt,
							name : item.province
						}))
					}
				],
			}
			// 定义函数，并传入默认的参数params
			function getMap(params={data : {map : "china"}}) {
				// 拼接地图的地址
				var url =`./js/map/json/province/${params.data.map}.json`;
				// ajax加载
				$.getJSON(url,function(res) {
					// 注册地址
					echarts.registerMap(params.data.map,res);
					// 更新地图
					option.series[0].map = params.data.map;
					// 注册option到echarts
					myChart.setOption(option);
				})
			}
			// 执行函数
			getMap();
			myChart.setOption(option);
		})
	</script>
</html>

在这里插入图片描述

地图下跳

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>中国新冠肺炎分布图</title>
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/feiyan.js"></script>
		<style>
			.map{ width: 1200px; height: 800px; }
		</style>
	</head>
	<body>
		<button id="all"   style="display: none;">全国</button>
		<div class="map"></div>
		<script>
			$(function(){
				var myChart = echarts.init(document.querySelector(".map"),'light');
				// 初始地图
				var provinces = data.data.feiyan.provinces;
				provinces = provinces.map(item=>{
							var obj = {...item,value:item.sure_cnt,name:item.province};
							// 展开所有的数据，添加value 和name
							if(obj.name=="河南"){obj.map = "henan"}
							if(obj.name=="北京"){obj.map = "beijing"}
							if(obj.name=="湖北"){obj.map = "hubei"}
							// 给添加map 名称（地图的地址）
							return obj;
						})
				var cities = data.data.feiyan.cities.filter(item=>item.country=="中国")
				// 省份数据
				var option = {
					title:{text:"中国新冠肺炎趋势图"}, 
					// 标题
					tooltip:{trigger:"item",formatter:params=>{
						// console.log(params)
						return `${params.name}<br/>
						累计确诊:${params.data&&params.data.sure_cnt||0}<br/>
						累计死亡:${params.data&&params.data.die_cnt||0}<br/>
						累计治愈:${params.data&&params.data.cure_cnt||0}<br/>
						${params.data&&params.data.sure_new_zero_days||0}天零新增
						`
						// 格式化返回信息
					}},
					// 提示
					series:[
						{type:"map",map:"china",data:provinces}
					],
					// 地图数据
					visualMap:{
						show:true, //显示图例					 
						pieces: [
						    {start: 2001,color:"#500",symbol:"circle"},
						    {start: 1000, end: 2000,color: 'darkred',symbol:"circle"},
						    {start: 301, end: 1000,color: 'orangered',symbol:"circle"},
						    {start: 100, end: 300,color: 'yellow',symbol:"circle"},
						    {start: 10, end: 99, label: '10 到 200',color: '#ff9',symbol:"circle"},
						    {start: 0, end: 5, label: '5', color: '#f0f0f0',symbol:"circle"},	//六个分段					               
						],
						 orient:"horizontal",  //图例水平
						 left:"right"//右侧
						
					},
					// 颜色隐式
				}
				// 定义选项
				
				function getMap (params={data:{map:"china"}}){ //定义函数并传入默认参数params
					var url = `./js/map/json/province/${params.data.map}.json`; //拼接地图地址
					$.getJSON(url,function(res){ //ajax 加载
						echarts.registerMap(params.data.map,res); //注册地址
						option.series[0].map = params.data.map; //更新地图
						if(params.data.map!="china"){
							// 设置省份城市的数据
							 
							
							var temp = cities.filter(item=>item.province==params.data.province)
							option.series[0].data = temp.map(item=>{
								var obj = {...item,name:item.city?item.two_level_area+"市":item.two_level_area,value:item.sure_cnt}
								// item展开传入，如果有city 加市 没有city 直接 two_level_area（ 直辖市的区）
								return obj; //返回 市区数据
							})
						 
							$("#all").hide();//隐藏显示全国的按钮
						}else{
							option.series[0].data = provinces; //指定全局省份数据
							$("#all").show();//显示全国的按钮
						}
						myChart.setOption(option);//设置选项
					})
				}
				getMap();//执行函数
				
				myChart.on("click",function(params){
					getMap(params);
				})
				// 图表单击事件
				myChart.on("dblclick",function(params){
					getMap();
				})
				// 双击事件
				$("#all").click(function(){
					getMap();
				})
				// dom all 按钮
					
				 
			})
			
		</script>
	</body>
</html>