百度Echart展示世界地图效果
程序员文章站
2024-03-20 08:32:40
...
1、使用百度Echarts展示世界地图效果：
2、实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="cjh_world" style="width:1024px;height: 720px;border:1px solid red"></div>
<script src="js/echarts.min.js"></script>
<script src="js/world.js"></script>
<script>
var myChart = echarts.init(document.getElementById('cjh_world'));
var geoCoordMap = {
"北京": [116.407395, 39.904211],
"纽约": [-74.005941, 40.712784],
"Nicosia": [33.382276, 35.185566],
};
var rawData = [{
"name": "纽约",
value: '98%'
}, {
"name": "北京",
value: '30.2%'
}, {
"name": "Nicosia",
value: '30.2%'
}];
function makeMapData(rawData) {
var mapData = [];
for (var i = 0; i < rawData.length; i++) {
var geoCoord = geoCoordMap[rawData[i].name];
if (geoCoord) {
mapData.push({
name: rawData[i].name,
value: geoCoord.concat(rawData[i].value)
});
}
}
return mapData;
};
var option = {
backgroundColor: 'white',
title: {
itemGap: 0,
textStyle: {
color: '#eee'
},
z: 200
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.name + "<br/>占" + params.value[2];
}
},
geo: {
map: 'world',
silent: true,
emphasis: {
label: {
show: true,
areaColor: 'red'
}
},
itemStyle: {
borderWidth: 0.4,
borderColor: '#404a59',
areaColor: '#00a4f6'
},
roam: true,
scaleLimit: {
min: 1.25,
max: 1.25,
},
zoom: 1.25
},
series: [{
name: 'Prices and Earnings 2012',
type: 'scatter',
coordinateSystem: 'geo',
data: makeMapData(rawData),
activeOpacity: 1,
label: {
formatter: '{b}',
position: 'right',
show: false
},
symbolSize: 20,
itemStyle: {
borderColor: 'red',
borderWidth: 6,
color: '#fff'
},
emphasis: {
label: {
show: false,
color: "#000"
}
}
}, {
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [120, 60],
symbolOffset: [0, -5],
label: {
normal: {
formatter: function(params) {
return params.value[2];
},
show: true,
textStyle: {
color: '#fff',
fontSize: 14,
}
}
},
itemStyle: {
normal: {
color: 'red', //标志颜色
}
},
zlevel: 6,
data: makeMapData(rawData)
}]
};
myChart.setOption(option);
</script>
</body>
</html>