2020-12-17

最新推荐文章于 2024-10-10 10:50:43 发布

wuyannan9059

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量97

点赞数

分类专栏： JS 文章标签： javascript html

原文链接：https://zhuanlan.zhihu.com/p/108901077

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

转载于https://zhuanlan.zhihu.com/p/108901077

JQuery+Echarts实现绘制一个疫情地图

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*" />

		<title>新冠肺炎统计</title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
		//原作者的地址失效了
<script src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>

	<body>
		<div class="container bg-light">
			<div class="col-*" id="main"  style="width: 1200;height:700px;"></div>
		</div>
	</body>
	<script>
		//创建一个echarts对象
		var myChart = echarts.init(document.getElementById('main'));
	
		$.ajax({
			url: 'https://interface.sina.cn/news/wap/fymap2020_data.d.json',
			contentType: 'application/json',
			dataType: 'jsonp', // 请求方式为jsonp
			crossDomain: true,
			success: function(res) {
				var d = [],
					max = 0,
					min = parseInt(res.data.list[0].value);
					// console.log(min);
				for (var i = 0; i < res.data.list.length; i++) {
					d.push({
						name: res.data.list[i].name,
						value: res.data.list[i].value
					});
					max = parseInt(res.data.list[i].value) > max ? res.data.list[i].value : max;
				}
				for (var i = 0; i < res.data.list.length; i++) {
					min = parseInt(res.data.list[i].value) > min ? min : res.data.list[i].value;
				}
				// console.log(d);
				
				$("#t").text(res.data.times);
				var option = {
					type: 'map',
					map: 'china',
					visualMap: {
						left: 'right',
						type: 'piecewise',
						min: min,
						max: max,
                        //text属相控制右侧分段映射地图的顶端底部文字
                        //原作者是两个字符串["height","low"]
						text: [max, min],
						calculable: true,
						pieces: [{
								min: 1500,
								color: '#DC143C'
							},
							{
								min: 1000,
								max: 1500,
								color: '#ff5757'
							},
							{
								min: 500,
								max: 1000,
								color: '#ff8f8f'
							},
							{
								min: 100,
								max: 500,
								color: '#ffb1a7'
							},
							{
								max: 100,
								color: '#fadbd7'
							}
						]
					},
	
					series: [{
						type: 'map',
						roam: true,
						map: 'china',
						label: {
							show: true,
							formatter: '{b}:{c}'
						},
						emphasis: {
							label: {
								show: true
							}
						},
						data: d
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		});
	</script>

</html>