1.根據(jù)權(quán)限獲取不同的地圖邊界數(shù)據(jù)
2.Ec.registerMap(mapName, mapJson);注冊地圖
3.初始化地圖
visualMap 分色 設(shè)置 seriesIndex: 0,表示對哪個series進行分色
geo 設(shè)置兩個series: map及scatter
4.添加點擊事件，根據(jù)點擊的類型確定觸發(fā)的事件。點擊地圖進行下鉆，點擊氣泡進行彈出詳情。
initmapchart(aliasName, data) {
var _this = this;
let mapConfig = require('@/constants/scjson/s_s_qx.json');
let geoCoordMap = mapConfig[0];
let initSeriesData = function(data) {
var temp = [];
if (!data) data = [];
for (let i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
temp.push({
alias: data[i].alias,
name: data[i].name,
value: geoCoord.concat(data[i].value),
avgNum:data[i].avgNum,
currentNum:data[i].currentNum,
futureAvgNum: data[i].futureAvgNum,
futureNum1:data[i].futureNum1,
futureNum2:data[i].futureNum2,
futureNum3:data[i].futureNum3
});
}
}
return temp;
};
let userorg = this.userinfo.orgId.substring(0, 6);
const option = {
grid: {
left: 10,
right: 10,
top: 90,
bottom: 14,
containLabel: true
},
toolbox: {
show: aliasName != '510000' && userorg == '510000' ? true : false,
top: 'top',
right: 'right',
feature: {
myTool1: {
show: true,
title: '返回',
icon:
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABM0lEQVQ4ja3UvytFYRjA8c/lGi4ZSMJwFyXFZEbKblD8AcrKJizKJoMwWHRL/gKZrH4MFgab4W6GW8hASriG95y6nXtdXOdbb6f3POf9nuc973mezEShLEEGc9F1Pxn8iabEfBinkajrr7JKYRs2cI3RRkQxmYlCeQq7yCdij3j6Zt0b7nCOPZTiQFb4VrXojMZ3DGISi1jAIWHLRxjCJt4rFqxEL6s1sujHGlpwgNlYCM9Ywggu6mQV84Ei1jGOF+Egu5OnfIMxzOPhF2K4wjLasZCp8R82Qi5K4DaZYaO8CrsbSEsI98ilKSxTXXr/Jk1hB97SEjYLlVNMSzgtlOlJGsI8toWy3fmPsAUzQqn2YhXFbMUDZ+j7g7AHrfgUmsQmoWvE5FX3xHqUcIwtXMY3vwAx8TZDiqvq4AAAAABJRU5ErkJggg==',
onclick: function() {
_this.initdata('510000');
}
}
}
},
tooltip: {
show: true,
trigger: 'item',
// alwaysShowContent: true,
backgroundColor: 'rgba(50,50,50,0.7)',
hideDelay: 100,
// triggerOn: "mousemove",
enterable: true,
// position: [0, '86%'],
formatter: function(params, ticket, callback) {
return (
'地區(qū)：' +
params.data.name +
'<br/>' +
'當前數(shù)量：' +
params.data.currentNum +
'<br/>' +
'30日平均數(shù)：' +
params.data.avgNum +
'<br/>' +
'未來1日數(shù)量：' +
params.data.futureNum1 +
'<br/>' +
'未來2日數(shù)量：' +
params.data.futureNum2 +
'<br/>' +
'未來3日數(shù)量：' +
params.data.futureNum3 +
'<br/>' +
'未來3日平均數(shù)：' +
params.data.futureAvgNum
);
}
},
visualMap: {
show:true,
type: 'piecewise',
orient: 'horizontal',
pieces: [
{ value: 4, label: '緊急' },
{ value: 3, label: '重大' },
{ value: 2, label: '重要' },
{ value: 1, label: '一般' }
],
inRange: {
color: ['green', 'yellow', 'DarkOrange', 'red']
},
seriesIndex: 0,
left: 'center',
top: 'top',
textStyle: {
color: '#fff'
}
},
geo: {
show: true,
map: aliasName,
label: {
normal: {
show: true
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
emphasis: {
label: { show: true, color: 'white' },
areaColor: '#245fa6'
}
}
},
series: [
{
type: 'map',
roam: true,
map: aliasName,
geoIndex: 0, //map 和 其他 series（例如散點圖）就可以共享一個 geo 組件了
// selectedMode: "multiple",
data: data,
itemStyle: {
emphasis: {
label: { show: true, color: 'white' },
areaColor: '#245fa6'
}
}
},
{
name: '點',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //氣泡
symbolSize: 20,
itemStyle: {
normal: {
color: '#caa1a1' //標志顏色
}
},
zlevel: 100,
data: initSeriesData(data)
}
]
};
if (!barscase) {
barscase = Ec.init(document.getElementById('ycchart'));
}
barscase.setOption(option, true);
// 添加事件
barscase.on('click', function(params, data, d) {
let mapname = params.data.alias;
//點擊的是 行政區(qū)劃----需要下鉆
if (params.componentSubType == 'map') {
_this.initdata(mapname);
} else if (params.componentSubType == 'scatter') {
_this.tyctitle = params.name;
_this.openyclist(mapname);
}
});
},
//獲取地圖數(shù)據(jù)
getGeoJson: function(mapcode) {
let jsonPac = '';
if (mapcode.substr(4, 2) != '00') {
jsonPac = mapcode.substr(0, 4) + '00';
} else {
jsonPac = mapcode;
}
return new Promise((resolve, reject) => {
const mapJson = require(`@/constants/scjson/${jsonPac}.json`);
if (mapJson) {
if (mapcode.substr(4, 2) != '00') {
let returnJson = {
type: 'FeatureCollection',
features: []
};
mapJson.features.find(feature => {
if (feature.properties.id == pacode) {
returnJson.features.push(feature);
}
});
resolve(returnJson);
} else {
resolve(mapJson);
}
} else {
reject('獲取地圖邊界數(shù)據(jù)失敗');
}
});
},
