echarts地图城市散点图

给每个城市自定义坐标，根据每个城市的value值所在范围给每个坐标点设置不同的颜色，鼠标悬停显示tip，tip值为城市名称以及value。
效果图：
代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>#charts{width:600px;height:600px;}</style>
	</head>
	<body>
		<div id="charts"></div>
	</body>
	<script src="../../../public/js/echarts.min.js"></script>
		<script src="china.js"></script>
	<script>
		var mycharts = echarts.init(document.getElementById('charts'))
		//自定义城市坐标菜单
		var geoCoordMap = {
		    "海门":[121.15,31.89],
		    "鄂尔多斯":[109.781327,39.608266],
		    "招远":[120.38,37.35],
		    "舟山":[122.207216,29.985295],
		    "齐齐哈尔":[123.97,47.33],
		    "盐城":[120.13,33.38],
		    "赤峰":[118.87,42.28],
		    "青岛":[120.33,36.07],
		    "乳山":[121.52,36.89],
		    "金昌":[102.188043,38.520089],
		};
		//拼接对象数组
		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)  //用连接数组的形式将value值加入
                    });  
		            //res.push(geoCoord.concat(data[i].value));
		            //res.push(geoCoord.concat(data[i].name));
		        }
		    }
		    return res;
		};
		option = {
		    backgroundColor: '#404a59',//整个画布背景
		    //标题组件
		    title: {
		        text: '全国主要城市空气质量',
		        subtext: 'data from PM25.in',
		        sublink: 'http://www.pm25.in',
		        left: 'center',
		        textStyle: {
		            color: '#fff'
		        }
		    },
		    //提示框组件
		    tooltip: {
		        trigger: 'item',
		        "confine": true,
	            "formatter": (p)=>{//自定义提示信息
	              	let dataCon = p.data;
	                txtCon =dataCon.name+'<br>值:'+dataCon.value[2];
	                return txtCon;
	            }
		    },
		    //左下lengend
		    visualMap: {
		        min: 0,//最小
		        max: 300,//最大
		        splitNumber: 5,//共分5层
		        color: ['#ff6300','#eac736','#50a3ba'],//颜色从高到低依次渐变
		        textStyle: {
		            color: '#fff'
		        }
		    },
		    //地图区域样式
		    geo: {
		        map: 'china',
		        label: {
		            emphasis: {
		                show: false
		            }
		        },
		        itemStyle: {
		        	//未激活样式
		            normal: {
		                areaColor: '#323c48',
		                borderColor: '#111'
		            },
		            //激活样式
		            emphasis: {
		                areaColor: '#2a333d'
		            }
		        }
		    },
		    //数据
		    series: [
		        {
		            name: 'pm2.5',
		            type: 'scatter',
		            coordinateSystem: 'geo',
		            data: convertData([
		                {name: "海门", value: 9},
		                {name: "鄂尔多斯", value: 12},
		                {name: "招远", value: 12},
		                {name: "舟山", value: 12},
		                {name: "齐齐哈尔", value: 14,},
		                {name: "盐城", value: 15},
		                {name: "赤峰", value: 100},
		                {name: "青岛", value: 18},
		                {name: "乳山", value: 300},
		                {name: "金昌", value: 19},
		            ]),
		            symbolSize: 12,
		            //直接在点上显示标签
		            label: {
		            	show:false,
//		                normal: {
//		                    show: true
//		                },
//		                emphasis: {
//		                    show: true
//		                },
		                formatter:'{b}',
		                offset:[15,-15],//文字的相对偏移
		            },
		            //标签的样式
		            itemStyle: {
		                emphasis: {
		                    borderColor: '#fff',
		                    borderWidth: 1
		                }
		            }
		        }
		    ]
		}
		mycharts.setOption(option);
	</script>
</html>
echarts地图城市散点图

猜你喜欢
