点击地图里面的区域,弹出信息
html
准备两个容器,一个装地图,一个装弹出框
<!-- 地图 -->
<div id="map" style="height: 600px;width: 600px;"></div>
<!-- 弹出框 -->
<div id="box" >
<span id="box-title"></span>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
css
#box{
display:none;
background-color: goldenrod;
width: 180px;
height: 30px;
}
#box-title{
display:block;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
引入文件
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/chongqing.js" type="text/javascript" charset="utf-8"></script>
<script src="js/map.js" type="text/javascript" charset="utf-8"></script>
- 1
- 2
- 3
- 4
地图(重庆地图chongqing.js)需要去官网下,不过最近好像下不了了。
map.js
var myChart = echarts.init(document.getElementById('map'));
var option = {
title: {
text : '重庆市脱贫地区分布总览',
subtext : '当前区域信息',
top:'20',
textStyle: {
fontSize: 18,
color: '#333' // 主标题文字颜色
}
},
series: [
{
name: '数据名称',
type: 'map',
mapType: '重庆',
top:'65',
zoom:1.1,
selectedMode : 'single',
label: {
normal: {
show: true,//显示省份标签
textStyle:{color:"#fbfdfe"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#323232"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: '#0550c3',//区域边框颜色
areaColor:"#4ea397",//区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#ece39e",
}
},
}]
};
myChart.setOption(option);
myChart.on('click', function (params) {//点击事件
if (params.componentType === 'series') {
var provinceName =params.name;
$('#box').css('display','block');
$("#box-title").html(provinceName);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
效果图: