<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#chart{
width:500px;
height:500px;
border:1px solid #999;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var dataTemp = [
{
lng: "121.59874400",
num: 10,
time: "2020-03-19 08",
stationname: "太古小學（鄞州）",
lat: "29.85970300"
},
{
lng: "121.57025100",
num: 65,
time: "2020-03-19 08",
stationname: "萬里學院（鄞州）",
lat: "29.82393300"
},
{
lng: "121.72304700",
num: 120,
time: "2020-03-19 08",
stationname: "龍賽醫院（鎮海）",
lat: "29.96021500"
},
{
lng: "121.84661500",
num: 165,
time: "2020-03-19 08",
stationname: "環保大樓（北侖）",
lat: "29.91421000"
},
{
lng: "121.57000639",
num: 230,
time: "2020-03-19 08",
stationname: "白沙活動中心（江北）",
lat: "29.90139717"
},
{
lng: "121.53491900",
num: 80,
time: "2020-03-19 08",
stationname: "市監測中心（海曙）",
lat: "29.87092600"
},
{
lng: "121.43101500",
num: 59,
time: "2020-03-19 08",
stationname: "城南小學（寧海）",
lat: "29.29136000"
},
{
lng: "121.28829300",
num: 270,
time: "2020-03-19 08",
stationname: "溪口鎮政府（奉化）",
lat: "29.69543800"
},
{
lng: "121.26432700",
num: 280,
time: "2020-03-19 08",
stationname: "實驗小學（慈溪）",
lat: "30.18224100"
}
];
function addImage(url, params, api, realData){
return {
type: 'image',
style: {
image: url,
x: api.coord([
realData[params.dataIndex].lng, realData[params.dataIndex]
.lat
])[0],
y: api.coord([
realData[params.dataIndex].lng, realData[params.dataIndex].lat
])[1],
width: 20,
height: 19,
}
}
}
var uploadedDataURL = "js/data-1509940365453-SkScnUTCW.json";
var myChart = echarts.init(document.getElementById('chart'));
$.getJSON(uploadedDataURL, function (usaJson) {
myChart.hideLoading();
echarts.registerMap('ningbo', usaJson);
var option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.data.stationname + ' : ' + params.data.num;
}
},
geo: {
show: true,
map: "ningbo",
roam: true,
scaleLimit: {
min: 1,
max: 10
},
zoom: 1,
aspectScale: 1,
top:30,
itemStyle: {
normal: {
borderColor: "rgba(255, 255, 255, 0.5)",
areaColor: "rgba(0, 255, 255, 0.5)",
borderWidth: 1,
shadowBlur: 10,
shadowColor: "rgba(63, 218, 255, 0.5)"
},
emphasis: {
show: false,
areaColor: "#31d2ff"
}
},
label: {
normal: {
show: true,
fontSize: "10",
color: "#333333"
},
emphasis: {
show: false
}
}
},
series: [
{
name: '地圖',
type: 'custom',
coordinateSystem: 'geo',
renderItem: function (params,api) {//具體實現自定義圖標的方法
if (dataTemp[params.dataIndex].num > 0 && dataTemp[params.dataIndex].num <= 50) {
return addImage("img/index2/jcd_1.png", params, api, dataTemp);
} else if (dataTemp[params.dataIndex].num > 50 && dataTemp[params.dataIndex].num <= 100) {
return addImage("img/index2/jcd_2.png", params, api, dataTemp)
} else if (dataTemp[params.dataIndex].num > 100 && dataTemp[params.dataIndex].num <= 150) {
return addImage("img/index2/jcd_3.png", params, api, dataTemp)
} else if (dataTemp[params.dataIndex].num > 150 && dataTemp[params.dataIndex].num <= 200) {
return addImage("img/index2/jcd_4.png", params, api, dataTemp)
} else if (dataTemp[params.dataIndex].num > 200 && dataTemp[params.dataIndex].num <= 250) {
return addImage("img/index2/jcd_5.png", params, api, dataTemp)
} else {
return addImage("img/index2/jcd_6.png", params, api, dataTemp)
}
},
data: dataTemp
}
]
};
myChart.setOption(option);
});
</script>
</body>
</html>
效果：
