实现在山东地图上使用经纬度标注水波纹点。
1.引入js
<script type="text/javascript" src="<%=path%>/skin/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/skin/echarts4.1.0.js"></script>
<script type="text/javascript" src="<%=path%>/skin/js/shandong.js"></script>
2.html定义dom
<div style="width:200px;height:200px" id="sdmap"></div>
3.map
var dom = document.getElementById("sdmap");
var myChart = echarts.init(dom);
window.addEventListener('resize', function () {myChart.resize()})
var option = null;
// 散点在地图上的坐标
var geoCoordMap = {
"滨州数字经济产业园":[117.63,37.45],
"滨州跨境电商产业园":[118.03,37.55],
"德州跨境电商产业园":[116.29,37.25]
};
// 将坐标与值对应并反映在地图上
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
legend: {
data: ['滨州跨境电商产业园','滨州数字经济产业园','德州跨境电商产业园'],
},
visualMap: {
show:true,
type: 'piecewise',
textStyle: {
color: '#4fbfd7'
},
right:20,
bottom:20,
pieces: [
{min: 300, max: 400, label: '德州跨境电商产业园', color: '#00ffaa'},
{min: 200, max: 300, label: '滨州数字经济产业园', color: '#be4f51'},
{min: 100,max: 200, label: '滨州跨境电商产业园', color: '#e3bf4c'}
],
color: ['#00ffaa','#be4f51','#e3bf4c']
},
geo: {
map: '山东',
label: {
show:true,
color:'#4fbfd7',
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: 'rgba(35, 61, 121, 0.6)',
borderColor:'#4fbfd7',
shadowColor: '#4fbfd7',
borderWidth: 1.2,//设置外层边框
},
emphasis: {
}
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData([
{name: "滨州跨境电商产业园", value: 150},
{name: "滨州数字经济产业园", value: 250},
{name: "德州跨境电商产业园", value: 350}
]),
symbolSize: 12,
rippleEffect:{scale:'3',},//控制标点涟漪 文大小
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
// borderColor: '#fff',
borderWidth: 1
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
4.效果查看