根據(jù)項(xiàng)目的要求在閃點(diǎn)地圖上展示，在上傳文件時(shí)閃點(diǎn)的狀態(tài)讓點(diǎn)變大變顏色，下載文件的城市節(jié)點(diǎn)變一個(gè)顏色，靜態(tài)時(shí)節(jié)點(diǎn)一個(gè)樣式，也就時(shí)說一個(gè)地圖上要有點(diǎn)的狀態(tài)要有三種。想了好久修修改改終于實(shí)現(xiàn)了。請看最終效果圖
map.png
；
點(diǎn)擊相對應(yīng)的城市節(jié)點(diǎn)彈出模態(tài)框顯示這個(gè)城市的詳細(xì)信息如下圖。
map (2).png
首先下載：jquery.js , echarts.js , china.js文件；
-
html代碼： <div id="mainPie" class="mainPieStyle"></div>選定一個(gè)容器并且設(shè)置一個(gè)id;初始化圖標(biāo)的是填入設(shè)置的id;var myChartMaps = echarts.init(document.getElementById('mainPie'));
最后 // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表 myChartMaps.setOption(optionMaps);。
3.話不多說請看代碼；
var myChartMaps = echarts.init(document.getElementById('mainPie'));
//配置地圖
myChartMaps.setOption({
series: [{
type: 'map',map: 'china' }] }); // 給地圖的每個(gè)小點(diǎn)添加點(diǎn)擊事件 myChartMaps.on('click', function (params) { console.log("this",params) if(params.componentType=="series"){ thisModer(params); console.log("添加信息",params); }else if(params.componentType=="geo"){ } });var rest
$.ajax({
url:"",
type:"get",
success:function(result){
rest=result
}
})
var city=rest.detail;
// 靜態(tài)
var dataStatic=[];
dataStatic.push({
//填入數(shù)據(jù)
name:city.YanCheng.city,_name:"YanCheng",value:100
});// 下載 // download var dataDownload = []; dataDownload.push({ //填入數(shù)據(jù) name:city.ShenZhen.city,_name:"ShenZhen",value:100 })// 上傳
// uploading
var dataUploading=[];
dataUploading.push({
//填入數(shù)據(jù)
name:city.ChengDou.city,_name:"ChengDou",value:100}) var geoCoordMap = { "深圳":[114.0412,22.3712], "成都":[104.06,30.67], "南京":[118.46,32.03], "鹽城":[119.57,32.85], "廣州":[113.23,23.16], "北京":[115.25,39.26] };
//靜態(tài)
var convertDataStatic= function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
city:data[i]._name,
name: data[i].name,
value: geoCoord.concat(data[i].value),
_data: city[data[i]._name]
});
}
}
return res;
};
// 下載
var convertDownload = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
console.log("city[data[i]._name]",city[data[i]._name])
res.push({
city:data[i]._name,
name: data[i].name,
value: geoCoord.concat(data[i].value),
_data: city[data[i]._name]
});
}
}
return res;
};
// 上傳
var convertUploading = function (data) {
// console.log("cccccc22222",data)
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
console.log("city[data[i]._name]",city[data[i]._name])
res.push({
city:data[i]._name,
name: data[i].name,
value: geoCoord.concat(data[i].value),
_data: city[data[i]._name]
});
}
}
return res;
};
optionMaps = {
backgroundColor:"pink",
title: {
// text: '節(jié)點(diǎn)詳情',
// subtext: 'data from PM25.in',
// sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
// 設(shè)置懸浮框中的數(shù)據(jù)
formatter: function(params) {
console.log("thissssss",params)
var res = params.data;
var storss=(((res._data.stors)/1000)/1000)/1000;
return "城市："+ res.name +"<br/>節(jié)點(diǎn)數(shù)：" + res._data.clusters + "<br/>文件數(shù)：" + res._data.files +
"<br/>存儲容量：" + storss + "GB<br/>"
//公網(wǎng)IP："+ res._data.publicIP +
//"<br/>內(nèi)網(wǎng)IP：" + res._data.intranet;
},
// 設(shè)置提示框文字的樣式
textStyle:{
color:"#00FF00",
fontSize:20,
},
},
geo: {
map: 'china',
label: {
emphasis: {
// 是否顯示鼠標(biāo)移入省份的時(shí)候顯示出省份名稱
show: true
}
},
roam: true,
itemStyle: {
normal: {
// 設(shè)置地圖的顏色
// areaColor: '#92FEFE',
areaColor:"white",
// #F6EFA6
borderColor: '#111'
},
emphasis: {
// 鼠標(biāo)移入/高亮的時(shí)地圖的顏色
areaColor: '#00A0EA'
}
},
},
series : [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertDataStatic(dataStatic),
symbolSize:15,
label: {
normal: {
formatter: '',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
// 設(shè)置小點(diǎn)的顏色
color: "#00A0EA",
}
}
},
//上傳
{
name: '項(xiàng)目文件',
type: 'effectScatter',
coordinateSystem: 'geo',
data:convertDownload(dataDownload),
// 設(shè)置點(diǎn)的大小
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
// 顯示地圖小點(diǎn)上的文字
formatter: '',
// 顯示的位置
position: 'right',
// 設(shè)置小點(diǎn)字體的大小
fontSize:20,
// 是否顯示
show: true
}
},
itemStyle: {
// 設(shè)置點(diǎn)的顏色
normal:{
color:"rgb(252, 93, 7)",
// color:"rgba(255, 145, 0, 0.986)",
}
},
// effect : {
// show: true,
// shadowBlur : 0
// },
zlevel: 1
},
// 下載
{
name: '項(xiàng)目文件',
type: 'effectScatter',
coordinateSystem: 'geo',
data:convertUploading(dataUploading),
// 設(shè)置點(diǎn)的大小
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
// 顯示地圖小點(diǎn)上的文字
formatter: '',
// 顯示的位置
position: 'right',
// 設(shè)置小點(diǎn)字體的大小
fontSize:20,
effect : {
show: true,
shadowBlur : 0
},
// 是否顯示
show: true
}
},
itemStyle: {
// 設(shè)置點(diǎn)的顏色
normal:{
color:"rgba(0, 184, 0, 0.835)",
}
},
zlevel: 1
},
]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChartMaps.setOption(optionMaps);
