实现的效果图
首先要获取地图数据------json或者geojson格式的文件
可以通过 echarts-map最新实时geoJson文件下载*
map地图 geoJson文件下载地址 https://hxkj.vip/demo/echartsMap
话不多说,代码如下:
var uploadedDataURL = "common/nanjing.geoJson"; // 根目录下面 如果地图加载不出来 看一下是不是文件路径写错了
function showProvince() {
var name = '南京市';
var option
$.get(uploadedDataURL, function(geoJson) {
echarts.registerMap(name, geoJson);
mapCenter.setOption(option = {
tooltip: { //提示框组件。
trigger: 'item', //数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
textStyle: {
fontSize: '12',
},
backgroundColor: 'rgba(50,50,50,0)',
padding: 0,
enterable: true,
position: 'inside',
formatter: function(params) {
//地图上面展示出来的数据
var tipHtml = '';
tipHtml =
`<div class="mapStyle">
<div>${params.name}</div>
<div class="firsts">项目数:${params.value}</div>
</div>`;
return tipHtml;
}
},
geo: [{
show: true,
map: name, // 地区名字 如 本项目中的 “南京”
aspectScale: 1, // 地图倾斜度
zoom: 1.15, // 地图放大倍数
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false, //地图设置不可拖拽,固定的
itemStyle: {
normal: {
areaColor: '#00FFFF', // 地图颜色
borderWidth: 4, // 边框的宽度
shadowColor: '#0098d9', // 阴影颜色
borderColor: '#00FFFF', // 边框颜色
// shadowOffsetX: -5,
// shadowOffsetY: 10,
shadowBlur: 12, // 阴影的模糊大小
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 12, // 阴影垂直方向上的偏移距离
},
emphasis: {
show: false,
}
}
}],
series: [{
name: '企业数量',
type: 'map',
mapType: name,
aspectScale: 1,
zoom: 1.15,
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: "12"
}
},
emphasis: {
show: false,
textStyle: {
fontSize: "12"
}
}
},
itemStyle: {
normal: {
areaColor: '#0371a0',
borderColor: '#00FFFF',
},
},
animation: false,
data: [{
"name": "玄武区",
"value": 351
}, {
"name": "秦淮区",
"value": 100
}, {
"name": "建邺区",
"value": 68
}, {
"name": "鼓楼区",
"value": 563
}, {
"name": "浦口区",
"value": 91
}, {
"name": "栖霞区",
"value": 947
}, {
"name": "雨花台区",
"value": 228
}, {
"name": "江宁区",
"value": 989
}, {
"name": "六合区",
"value": 801
}, {
"name": "溧水区",
"value": 989
},
{
"name": "高淳区",
"value": 989
},
]
}]
});
var count = 0; // 定义变量 来控制地图显示的数据和左下角数据相同 相当于数组索引
var timeTicket = null;
var dataLength = option.series[0].data.length;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() { // 页面初始化
mapCenter.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
mapCenter.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: (count) % dataLength,
});
if (count > 10) { // 根据你的项目情况 来判断count的大小
count = 0
}
$('.eCenTops').text(option.series[0].data[count].name)
$('.spanOne').text(option.series[0].data[count].value)
$('.spanTwo').text(option.series[0].data[count].value)
$('.spanThree').text(option.series[0].data[count].value)
count++;
}, 1500);
mapCenter.on('mouseover', function(params) { // 鼠标移入是显示的数据
console.log(params)
clearInterval(timeTicket);
mapCenter.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
mapCenter.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
$('.eCenTops').text(params.data.name)
$('.spanOne').text(params.data.value)
$('.spanTwo').text(params.data.value)
$('.spanThree').text(params.data.value)
});
mapCenter.on('mouseout', function(params) { // 鼠标移出是显示的数据
console.log(params)
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
mapCenter.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
mapCenter.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: (count) % dataLength
});
if (count > 10) {
count = 0
}
$('.eCenTops').text(option.series[0].data[count].name)
$('.spanOne').text(option.series[0].data[count].value)
$('.spanTwo').text(option.series[0].data[count].value)
$('.spanThree').text(option.series[0].data[count].value)
count++
}, 1500);
});
});
}
showProvince();
window.addEventListener('resize', function() {
this.mapCenter.resize();// 自适应
})