//後臺返回的數據格式
var data = [
{
lng: "121.59874400",
aqi: "92",
time: "2020-03-19 08",
stationname: "太古小學（鄞州）",
lat: "29.85970300"
},
{
lng: "121.57025100",
aqi: "25",
time: "2020-03-19 08",
stationname: "萬里學院（鄞州）",
lat: "29.82393300"
},
{
lng: "121.72304700",
aqi: "120",
time: "2020-03-19 08",
stationname: "龍賽醫院（鎮海）",
lat: "29.96021500"
},
{
lng: "121.84661500",
aqi: "165",
time: "2020-03-19 08",
stationname: "環保大樓（北侖）",
lat: "29.91421000"
},
{
lng: "121.57000639",
aqi: "230",
time: "2020-03-19 08",
stationname: "白沙活動中心（江北）",
lat: "29.90139717"
},
{
lng: "121.53491900",
aqi: "80",
time: "2020-03-19 08",
stationname: "市監測中心（海曙）",
lat: "29.87092600"
},
{
lng: "121.43101500",
aqi: "59",
time: "2020-03-19 08",
stationname: "城南小學（寧海）",
lat: "29.29136000"
},
{
lng: "121.28829300",
aqi: "57",
time: "2020-03-19 08",
stationname: "溪口鎮政府（奉化）",
lat: "29.69543800"
},
{
lng: "121.26432700",
aqi: "280",
time: "2020-03-19 08",
stationname: "實驗小學（慈溪）",
lat: "30.18224100"
}
];
//構造數據格式
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var latLng = [];
latLng.push(data[i].lng);
latLng.push(data[i].lat);
latLng.push(data[i].aqi);
res.push({
name: data[i].stationname,
value: latLng
});
}
return res;
};
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) {
if (typeof (params.value)[2] == "undefined") {
return params.name + ' : ' + params.value;
} else {
return params.name + ' : ' + params.value[2];
}
}
},
geo: {
show: true,
map: "ningbo",
roam: true,
scaleLimit: { //縮放級別限制
min: 1,
max: 10
},
zoom: 1,//初始默認級別
aspectScale: 1.2, //地圖的長寬比
top:30,
itemStyle: {
normal: {
borderColor: "rgba(255, 255, 255, 0.5)",
areaColor: "#31d2ff",
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: 'scatter',
symbol:'pin',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: 35,
label: {
normal: {
show: true,
formatter: function (params) {
return params.value[2]; //大頭針標記上顯示的信息
},
position: 'inside',
color: '#000',
fontSize: 12
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color:function(params){ //根據不同數據顯示不同顏色的標記
if (params.value[2] >= 0 && params.value[2]< 50) {
return '#00ff00';
} else if (params.value[2] >= 50 && params.value[2]< 100) {
return '#ffff00';
} else if (params.value[2] >= 100 && params.value[2]< 150) {
return '#ffc000';
} else if (params.value[2] >= 150 && params.value[2] < 200) {
return '#ff0000';
} else if (params.value[2] >= 200 && params.value[2] < 250) {
return '#a42c9b';
} else if (params.value[2] >= 250 && params.value[2] <= 300) {
return '#6e1f2b';
}
}
}
}
}
]
};
myChart.setOption(option);
});
效果圖