官网
一切以官网为主，今天我们需要基于这个地图 来做。
官网js地址： https://github.com/apache/incubator-echarts/tree/master/dist
这个目录下有很多js文件，我们选择echarts.js和extension下的bmap.js， 最好把整个目录克隆下来，然后复制这2个文件到你的目录下。
option的参数配置
这里我要介绍下tooltip这个参数，这个参数控制了这个功能：当你的鼠标移动到高亮的那个点时，要想显示什么内容，就必须通过这个参数来控制显示内容。如果你什么都配置，那么咱们使用的这个地图就一直显示固定内容。
官网文档地址：https://www.echartsjs.com/zh/option.html#tooltip.formatter
参考官网文档，我们得知，要想显示我们需要的内容，就需要通过 formatter 函数来控制返回内容，从而才能够显示，那不得不介绍下这formatter 接受的几个参数了。
formatter: function (params, ticket, callback) { }
- params 这个是当前这个元素对象，如，这个对象有value值，那么就 params.value ，如这个对象有name值，那么就params.name ,然后return params.name 就能显示这个元素name这个值。
- ticket 是异步回调标识，配合第三个参数 callback 使用。
- callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。
代码先睹为快
前提条件：
后端接口返回的数据必须是以下这样的
[
{"name":"赣州市","value":[ 经度,维度, 数值1,数值2 ] },
{"name":"天津市","value":[ 经度,维度, 数值1,数值2 ] },
]
多说一句，经纬度可以根据百度这个接口来获取，但是仅供参考，因为有些城市的经纬度不准。
接口地址：http://api.map.baidu.com/geocoder?address=赣州市&output=json
JS前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HSY</title>
<style>
.anchorBL {
display: none;
}
</style>
</head>
<body>
<div id="user_with_city_div">
<div id="user_with_city" style=" 1600px;;height:900px;"></div>
</div>
</body>
<script src="http://api.map.baidu.com/api?v=2.0&ak=xxxx自己到百度开发者平台申请"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/echarts/echarts.common.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/echarts/bmap.js" type="text/javascript" charset="utf-8"></script>
<script>
function init_graph() {
var myChart = echarts.init(document.getElementById('user_with_city'));
myChart.showLoading()
$.getJSON("/userbi/user/hsy/user_with_city/",{"from_time": {{ from_time }}, "to_time":{{ to_time }} },function(callback){
//layui.use("layer",function(){
//var layer = layui.layer;
if(callback.code == 200 ){
var city_location_sorted = callback.sorted;
var city_location = callback.city_location;
myChart.hideLoading()
var option = {
backgroundColor: 'transparent',
title: {
text: '?????????',
subtext: '?????',
sublink: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
bmap: {
center: [112.114129, 30.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [ // 此处定义的是图层样式
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
},
{
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
]
}
},
series : [
{
name: 'UV',
type: 'scatter',
coordinateSystem: 'bmap',
data: city_location , //convertData(city_uv,city_location),
tooltip: {
formatter: function (params, ticket, callback) {
//params this is your data
return "UV:"+params.value[2]+"<br>"+"PV:"+params.value[3]
},
},
symbolSize: function (val) {
return val[2] / 5 ;
},
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: '#ddb926'
},
emphasis: {
label: {
show: true
}
}
},
{
name: 'Top 10',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: city_location_sorted,
tooltip: {
formatter: function (params, ticket, callback) { // 此处定义的鼠标移动到高亮点以后显示的内容。
// params 就是咱们后端返回的一行数据，如{"name":"天津市","value":[ 经度,维度, 数值1,数值2 ] }
//params this is your data
return "TOP 10 ??<br>UV:"+params.value[2]+"<br>"+"PV:"+params.value[3]
},
},
symbolSize: function (val) {
return val[2] / 5 ; // 高亮点缩小5倍
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
},
zlevel: 1
},
]
};
myChart.setOption(option);
var bmap = myChart.getModel().getComponent('bmap').getBMap(); // 这里的getComponent里面的bmap千万不要写错了，如果提示找不到bmap或者undefined没有getBMAP属性，那你就要检查下自己在上面option里面有没有写正确对于bmap这四个字。
bmap.addControl(new BMap.MapTypeControl());
}else{
layer.msg("server error ! can't get the data [ uv with city ]",{icon:5,anim:6})
}
//})
})
}
init_graph()
</script>
</html>