bmap+echartsecharts scatter配置项内容和展示
配置项如下
var data = [{
COMPANY: '0001',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0002',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0003',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0004',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0005',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0006',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0007',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0008',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0009',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0010',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0011',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0012',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0013',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0014',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0015',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0016',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0017',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0018',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0019',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0020',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0021',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0022',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0023',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0024',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0025',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0026',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0027',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0028',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0029',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
name: '0030',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0031',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0032',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0033',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0034',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
}, {
COMPANY: '0035',
DJYCS: 0,
GZPYCS: 0,
CZPYCS: 0,
QXYCS: 0,
DQGZYCS: 0
},
];
var geoCoordMap = {
"0001": [113.22, 33.00],
"0002": [118.28, 33.97],
"0003": [119.28, 26.11],
"0004": [119.58, 32.16],
"0005": [98.50, 39.74],
"0006": [118.68, 24.89],
"0007": [125.32, 43.83],
"0008": [113.84, 30.67],
"0009": [104.41, 30.86],
"0010": [112.46, 23.06],
"0011": [113.32, 23.11],
"0012": [119.92, 32.46],
"0013": [120.25, 31.61],
"0014": [113.33, 39.50],
"0015": [106.38, 38.99],
"0016": [107.38, 38.55],
"0017": [113.39, 34.79],
"0018": [103.84, 36.08],
"0019": [117.21, 39.10],
"0020": [109.01, 33.62],
"0021": [129.52, 42.92],
"0022": [122.82, 45.63],
"0023": [123.40, 41.83],
"0024": [111.77, 36.58],
"0025": [116.96, 33.67],
"0026": [82.97, 41.72],
"0027": [109.61, 39.35],
"0028": [126.54, 45.81],
"0029": [84.88, 45.59],
"0030": [117.95, 40.96],
"0031": [121.61, 38.91],
"0032": [112.73, 37.70],
"0033": [117.39, 32.93],
"0034": [117.26, 31.83],
"0035": [122.96, 39.66],
};
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i]["COMPANY"]];
if (geoCoord) {
res.push({
name: data[i]["COMPANY"],
value: geoCoord.concat(data[i]["DJYCS"], data[i]["GZPYCS"], data[i]["CZPYCS"], data[i]["QXYCS"], data[i]["DQGZYCS"])
});
}
}
return res;
};
option = {
title: {
text: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: function(params) {
var res = "<div style='width: 196px;border: 1px solid #737373;'><div style='width: 100%;height: 28px;background-color: #eee;border-bottom: 1px solid #dedede;'><span style='color: #010101;font-size: 12px;line-height: 28px;font-weight: bold;'>" + params.data.name + "分公司</span></div>";
res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;border-bottom: 1px solid #dedede;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>DJ异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[2] + "</div></div>";
res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;border-bottom: 1px solid #dedede;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>GZ异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[3] + "</div></div>";
res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;border-bottom: 1px solid #dedede;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>CZ异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[4] + "</div></div>";
res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;border-bottom: 1px solid #dedede;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>QX异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[5] + "</div></div>";
res += "<div class=\"hint-content\"><div style='width: 100%;height: 28px;background-color: #fff;'><div style='float: left;color: #333;font-size: 12px;line-height: 28px;'>DQ异常数：</div><div style='height: 20px;margin-top: 4px;min-width: 40px;float: right;color: #666;font-size: 12px;line-height: 20px;'>" + params.data.value[6] + "</div></div>";
res += "</div></div>"
return res
},
backgroundColor: "rgba(0,0,0,0)",
borderWidth: 0
},
legend: {
orient: 'vertical',
left: '40',
bottom: '40',
data: ['正常', '异常'],
textStyle: {
color: '#666'
},
icon: 'circle',
borderColor: '#aaa',
borderWidth: 1,
padding: 10,
borderRadius: 6,
backgroundColor: "#fff",
itemWidth: 8,
itemHeight: 8,
},
bmap: {
center: [104.114129, 35.550339],
zoom: 6,
roam: true,
mapStyle: {
'styleJson': [{
'featureType': 'water', //水
'elementType': 'all',
'stylers': {
'color': '#fff'
}
}, {
'featureType': 'land', //土地
'elementType': 'geometry',
'stylers': {
'color': '#fff'
}
}, {
'featureType': 'highway', //公路
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'visibility': 'off'
// 'color': '#000000'
}
}, {
'featureType': 'railway',
'elementType': 'all',
// 'elementType': 'geometry.fill',
'stylers': {
'visibility': 'off'
// 'color': '#000000'
}
}, {
'featureType': 'railway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#08304b'
}
}, {
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -70
}
}, {
'featureType': 'building',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
}, {
'featureType': 'all',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#857f7f'
}
}, {
'featureType': 'all',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#000000'
}
}, {
'featureType': 'building',
'elementType': 'geometry',
'stylers': {
'color': '#022338'
}
}, {
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'color': '#062032'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#465b6c'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'label',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}]
}
},
series: [{
name: '正常',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: 8,
label: {
normal: {
formatter: '{b}',
position: 'bottom',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'purple'
}
}
}, {
name: '异常',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: 10,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#ff0000',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}]
};
function getYCdata(data) {
var YCdata = []
for (var i = 0; i < data.length; i++) {
if ((data[i].DJYCS + data[i].GZPYCS + data[i].CZPYCS + data[i].QXYCS + data[i].DQGZYCS) > 0) {
var geoCoord = geoCoordMap[data[i]["COMPANY"]];
if (geoCoord) {
YCdata.push({
name: data[i]["COMPANY"],
value: geoCoord.concat(data[i]["DJYCS"], data[i]["GZPYCS"], data[i]["CZPYCS"], data[i]["QXYCS"], data[i]["DQGZYCS"])
});
}
}
}
return YCdata;
}
function getZCdata(data) {
var ZCdata = []
for (var i = 0; i < data.length; i++) {
if ((data[i].DJYCS + data[i].GZPYCS + data[i].CZPYCS + data[i].QXYCS + data[i].DQGZYCS) == 0) {
var geoCoord = geoCoordMap[data[i]["COMPANY"]];
if (geoCoord) {
ZCdata.push({
name: data[i]["COMPANY"],
value: geoCoord.concat(data[i]["DJYCS"], data[i]["GZPYCS"], data[i]["CZPYCS"], data[i]["QXYCS"], data[i]["DQGZYCS"])
});
}
}
}
return ZCdata;
}
截图如下
