一、效果圖
1615279375.jpg
二、代碼上傳
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=dGOGqTGUq22ZHDSzQN2wblE2YKb980uq"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var data = [
{ name: '海門服務(wù)站', value: 134, content: '1' },
{ name: '鄂爾多斯', value: 134, content: '2' },
{ name: '招遠', value: 134, content: '3' },
{ name: '舟山', value: 134, content: '4' },
{ name: '齊齊哈爾', value: 134, content: '5' },
{ name: '鹽城', value: 134, content: '6' },
{ name: '赤峰', value: 134, content: '7' },
{ name: '青島', value: 134, content: '8' },
{ name: '撫順', value: 135, content: '33' },
{ name: '玉溪', value: 135, content: '34' },
{ name: '張家口', value: 135, content: '姓名：李**<br/>電話：159****6228<br/> 服務(wù)站編號：魯P030001<br/>地址：牛角店鎮(zhèn)夏碼村南' },
{ name: '鹽城1', value: 133, content: '6' },
{ name: '赤峰2', value: 133, content: '7' },
{ name: '青島3', value: 133, content: '8' },
]
var geoCoordMap = {
'海門': [121.15, 31.89],
'鄂爾多斯': [109.781327, 39.608266],
'招遠': [120.38, 37.35],
'舟山': [122.207216, 29.985295],
'齊齊哈爾': [123.97, 47.33],
'鹽城': [120.13, 33.38],
'赤峰': [118.87, 42.28],
'青島': [120.33, 36.07],
'撫順': [123.97, 41.97],
'玉溪': [102.52, 24.35],
'張家口': [114.87, 40.82],
'鹽城1': [125.153, 33.38],
'赤峰2': [112.877, 42.28],
'青島3': [124.303, 36.07]
};
var convertData = function (data) {
console.log('data', data)
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
// console.log('geoCoord', geoCoord)
res.push({
name: data[i].name + '服務(wù)站',
value: geoCoord.concat(data[i].value),
content: data[i].content,
});
}
}
return res;
};
option = {
tooltip: {
trigger: 'item',
formatter: function (b) {
// '框杜'
// console.log('b',b)
return b.data.content
},
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {
if(val[2]===134)
return val[2] /10;
},
encode: {
value: 2
},
label: {
formatter: '赔嚎',
position: 'right',
show: false
},
emphasis: {
label: {
show: true
}
},
itemStyle: {
normal: {
color: 'red', //紫色
}
}
},
{
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {
console.log('val2', val)
if(val[2]===133)
return val[2] /10;
},
encode: {
value: 133
},
label: {
formatter: '现喳',
position: 'right',
show: false
},
emphasis: {
label: {
show: true
}
},
itemStyle: {
normal: {
color: 'green',
}
}
},
{
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b, c) {
console.log(a, b, c)
return b.value - a.value;
}).slice(0, 3)),
symbolSize: function (val) {
console.log('b-a', val)
return val[2] / 10;
},
encode: {
value: 2
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
formatter: '怔接',
position: 'right',
show: true
},
itemStyle: {
shadowBlur: 10,
// shadowColor: '#333'
color:'#333'
},
zlevel: 1
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
