<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>散点地图</title>
<script src="lib/echarts.min.js"></script>
<script src="lib/jquery-3.5.1.min.js"></script>
<div id ="m" style="width: 1000px;height: 800px ;"></div>
</head>
<body>
<script>
myChart = echarts.init(document.getElementById("m"))
var mapData = []; //存字典{name:"地名",center:[经纬度]}
$.ajax({
url:"lib/中华人民共和国.json",
type:"get",
dataType:"json",
async:false,
success:function(args){
mapdata = args
// 使用echarts.registerMap(地图名字，地图数据)注册地图
echarts.registerMap("china",args)
//获取地理位置的省会位置信息
for (var item of args.features){
mapData.push(
{name:item.properties.name,
center:item.properties.center
}
)
}
}
})
//读取销售数据
var salesData;
$.ajax({
url:"lib/各省销售数据新.json",
type:"get",
dataType:"json",
async:false,
success:function(args){
salesData = args
}
})
console.log(salesData)
var scatterData = [];
function convertData(){
for (var m of mapData)
for (var s of salesData){
if (m.name == s.name){
m.center.push(s.value)
scatterData.push(m.center)
break;
}
}
return scatterData;
}
opt={
geo:{
map:"china",
},
tooltip:{
trigger:'item',
formatter:function(args){
}
},
visualMap:{
min:-66561,
max:12667,
left:'left',
top:'50',
text:['高','低'],
color:['#24693d','#449141','#73ba67','#ced7c3','#f8816b','#AE123A']
},
series:{
type:"scatter",
coordinateSystem:"geo",
data:convertData(),
symbolSize:function(args){
return args[2]/20000
},
itemStyle:{
color:'#F62157'
}
},
}
myChart.setOption(opt)
</script>
</body>
</html>