ECharts绘制地图分布，可自定义城市散点

最新推荐文章于 2024-06-11 21:36:57 发布

龙腾万里1218

最新推荐文章于 2024-06-11 21:36:57 发布

阅读量1.3w

点赞数 4

文章标签： ECharts 地图自定义城市坐标散点

本文链接：https://blog.csdn.net/weixin_42323343/article/details/80471763

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>作业运行</title>
        <script src="js/echarts.min.js"></script>
        <script src="js/china.js"></script>
    </head>
		<body>
			<div  data-role="page" id="china-map" style="height: 700%"></div>
			<script>
				    var myChart = echarts.init(document.getElementById('china-map'));
				    var geoCoordMap = {//自定义城市坐标
					    "青岛":[120.33,36.07],
					    "厦门":[118.1,24.46],
					    "宁波":[121.56,29.86],
					    "深圳":[114.07,22.62],
					    "大连":[121.62,38.92]
					};
					
					var convertData = function (data) {
					    var res = [];
					    for (var i = 0; i < data.length; i++) {
					        var geoCoord = geoCoordMap[data[i].name];
					        if (geoCoord) {
					            res.push({
					                name: data[i].name,
					                value: geoCoord.concat(data[i].value)
					            });
					        }
					    }
					    return res;
					};
					option = {
					backgroundColor: '#BBFFFF',
				    title : {
				        text: '异常分布',
				        x:'center'
				    },
				    tooltip: {
	            trigger: 'item',  
	            formatter: function(params) {  
	                var res = params.name+'<br/>';  
	                var myseries = option.series;  
	                if (convertData) {
		                for (var i = 0; i < myseries.length-1; i++) {
		                    for(var j=0;j<myseries[i].data.length;j++) {  
		                        if(myseries[i].data[j].name==params.name){
		                        		res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>'; 
		                        	}
		                		}
		              	}
		              }
		              else {
		              	for (var i = 0; i < myseries.length; i++) {  
	                    for(var j=0;j<myseries[i].data.length;j++){  
	                        if(myseries[i].data[j].name==params.name){  
	                            res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';  
	                        }  
	                    }  
		                } 
		              }  
	                return res;  
			        }  
		        },
				    legend: {
				        orient: 'vertical',
				        x:'left',
				        data:['超时','失败','运行中']
				    },
				    dataRange: {
				        min: 0,
				        max: 30,
				        x: 'left',
				        y: 'bottom',
						color:['red','orange','yellow','green'],
				        text:['高','低'],
				        calculable : true
				    },
				    toolbox: {
				        show: true,
				        orient : 'vertical',
				        x: 'right',
				        y: 'center',
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    roamController: {
				        show: true,
				        x: 'right',
				        mapTypeControl: {
				            'china': true
				        }
				    },
				    geo: {
				        map: 'china',
				        label: {
				            emphasis: {
				                show: true
				            }
				        },
				        itemStyle: {
				            normal: {
				                areaColor: '#FFE4CA',
				                borderColor: '#84C1FF',
				                borderWidth: 0.8
				            },
				            emphasis: {
				                areaColor: '#FFC78E'
				            }
				        }
				    },
				    series : [
				        {
				            name: '超时',
				            type: 'map',
				            mapType: 'china',
				            roam: false,
				            itemStyle:{
				                normal:{label:{show:false}},
				                emphasis:{label:{show:true}}
				            },
				            data:[
								{name: '广东',value: 4},
								{name: '黑龙江',value: 1},
								{name: '湖南',value: 3}
				            ]
				        },
				        {
				            name: '失败',
				            type: 'map',
				            mapType: 'china',
				            itemStyle:{
				                normal:{label: {show: false}},
				                emphasis:{label:{show:true}}
				            },
				            data:[
								{name: '安徽',value: 11},
								{name: '北京',value: 1},
								{name: '大连',value: 13},
								{name: '福建',value: 6},
								{name: '甘肃',value: 1},
								{name: '广东',value: 4},
								{name: '广西',value: 10},
								{name: '贵州',value: 9},
								{name: '海南',value: 4},
								{name: '河北',value: 1},
								{name: '河南',value: 18},
								{name: '黑龙江',value: 1},
								{name: '湖北',value: 3},
								{name: '湖南',value: 18},
								{name: '吉林',value: 16},
								{name: '江苏',value: 16},
								{name: '江西',value: 24},
								{name: '辽宁',value: 1},
								{name: '内蒙古',value: 18},
								{name: '宁波',value: 12},
								{name: '宁夏',value: 1},
								{name: '青岛',value: 2},
								{name: '青海',value: 23},
								{name: '山东',value: 14},
								{name: '山西',value: 8},
								{name: '陕西',value: 13},
								{name: '上海',value: 10},
								{name: '深圳',value: 4},
								{name: '四川',value: 8},
								{name: '天津',value: 28},
								{name: '西藏',value: 2},
								{name: '厦门',value: 5},
								{name: '新疆',value: 4},
								{name: '云南',value: 10},
								{name: '浙江',value: 13},
								{name: '重庆',value: 18}
				            ],
				        },
				        {
				            name: '运行中',
				            type: 'map',
				            mapType: 'china',
				            itemStyle:{
				                normal:{label:{show:false}},
				                emphasis:{label:{show:true}}
				            },
				            data:[
				                {name: "青岛", value: 1},
				                {name: "厦门", value: 23},
				                {name: "宁波", value: 12},
				                {name: "深圳", value: 4},
				                {name: "大连", value: 13},
				            ]
				        },
				        {
				            name: '计划单列市',
				            type: 'effectScatter',//影响散点
				            coordinateSystem: 'geo',
						        symbolSize: 12,
						        showEffectOn: 'render',
						        rippleEffect: {
						            brushType: 'stroke'
						        },
						        hoverAnimation: true,
						        label: {
						            normal: {
							            color: '#c60fff',
						                formatter: '{b}',
						                position: 'right',
						                show: false
						            },
						            emphasis: {
						                show: true
						            }
						        },
						        itemStyle: {
						            normal: {
						                color: '',
						                shadowBlur: 10,
						                shadowColor: '#333'
						            },
						        },
				            data: convertData([
				                {name: "青岛"},
				                {name: "厦门"},
				                {name: "宁波"},
				                {name: "深圳"},
				                {name: "大连"},
				            ]),
				        }
				    ]
				};
	    myChart.setOption(option); 
        myChart.on('mouseover', function (params) {
            var dataIndex = params.dataIndex;
            console.log(params);
          });
		  
		window.addEventListener("resize",function(){
			myChart.resize();
		});
		</script>
	</body>
</html>

龙腾万里1218

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
ECharts绘制地图分布，可自定义城市散点

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;作业运行&lt;/title&gt; &lt;script src="js/echarts.min.js"&gt;&
复制链接

扫一扫