echarts加载地图显示多组数据并实现点击、悬浮事件
1、引入echarts.min.js文件，引入地图map中需要加载的地图js：
<script src="js/libs/echarts-4.7.0/dist/echarts.min.js" type="application/javascript"></script>
<script src="js/libs/echarts-4.7.0/map/js/province/anhui.js" type="application/javascript"></script>2、html中添加展示地图的div块：
<body>
<div id="mapDiv" style="width:100%; height:100%; float: left;"></div>
</body>3、初始化echarts实例，设置option，并加载地图：
var data_2019 = [
{'latitude':32.770113634686345, 'longitude': 117.8302165632825,'name':'0000', 'value':'0000', 'color':'#e6e0b9'},
{'latitude':33.366593, 'longitude':116.301116, 'name':'1111', 'value':'1111', 'color':'#a6d4f0'},
{'latitude':31.797284677259532, 'longitude':117.44077622198311, 'name':'2222', 'value':'2222', 'color':'#eeeeee'}
];
var data_2020 = [
{'latitude':31.770113634686345, 'longitude': 118.8302165632825,'name':'456', 'color':'#e6e0b9'},
{'latitude':31.366593, 'longitude':118.301116, 'name':'6022', 'value':2, 'color':'#a6d4f0'},
{'latitude':30.797284677259532, 'longitude':118.44077622198311, 'name':'2022', 'value':3, 'color':'#eeeeee'}
];
//初始化echarts实例
var myChart = echarts.init(document.getElementById('mapDiv'));
//指定地图的配置项和数据 经纬度(配置)
var option = {
title: {
show:true,
text: '标题',
x: '20px', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y: 'center',
backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial',
fontSize: 28,
fontStyle: 'normal',
fontWeight: 'normal',
color: 'white'
}
},
backgroundColor: '#FFFFFF', //可设置背景色
geo: {
map: '安徽',
label: {
normal: {
show:true
},
emphasis: {
show: true,
color:'#ffffff',
areaColor: 'rgba(232, 194, 244, 0.9)'
}
},
roam: true,
zoom:1.2,
regions: [
{
name: '合肥市',
itemStyle: {
areaColor: 'rgba(250, 180, 215, 0.9)',
color: 'rgba(250, 180, 215, 0.9)'
}
},
{
name: '六安市',
itemStyle: {
areaColor: 'rgba(187, 184, 251, 0.9)',
color: 'rgba(187, 184, 251, 0.9)'
}
},
{
name: '安庆市',
itemStyle: {
areaColor: 'rgba(240, 180, 247, 0.9)',
color: 'rgba(240, 180, 247, 0.9)'
}
},
{
name: '池州市',
itemStyle: {
areaColor: 'rgba(250, 180, 215, 0.9)',
color: 'rgba(250, 180, 215, 0.9)'
}
},
{
name: '黄山市',
itemStyle: {
areaColor: 'rgba(187, 184, 251, 0.9)',
color: 'rgba(187, 184, 251, 0.9)'
}
},
{
name: '宣城市',
itemStyle: {
areaColor: 'rgba(240, 180, 247, 0.9)',
color: 'rgba(240, 180, 247, 0.9)'
}
},
{
name: '铜陵市',
itemStyle: {
areaColor: 'rgba(187, 184, 251, 0.9)',
color: 'rgba(187, 184, 251, 0.9)'
}
},
{
name: '芜湖市',
itemStyle: {
areaColor: 'rgba(174, 243, 231, 0.9)',
color: 'rgba(174, 243, 231, 0.9)'
}
},
{
name: '淮南市',
itemStyle: {
areaColor: 'rgba(240, 180, 247, 0.9)',
color: 'rgba(240, 180, 247, 0.9)'
}
},
{
name: '阜阳市',
itemStyle: {
areaColor: 'rgba(250, 180, 215, 0.9)',
color: 'rgba(250, 180, 215, 0.9)'
}
},
{
name: '亳州市',
itemStyle: {
areaColor: 'rgba(174, 243, 231, 0.9)',
color: 'rgba(174, 243, 231, 0.9)'
}
},
{
name: '淮北市',
itemStyle: {
areaColor: 'rgba(250, 180, 215, 0.9)',
color: 'rgba(250, 180, 215, 0.9)'
}
},
{
name: '宿州市',
itemStyle: {
areaColor: 'rgba(240, 180, 247, 0.9)',
color: 'rgba(240, 180, 247, 0.9)'
}
},
{
name: '蚌埠市',
itemStyle: {
areaColor: 'rgba(187, 184, 251, 0.9)',
color: 'rgba(187, 184, 251, 0.9)'
}
},
{
name: '滁州市',
itemStyle: {
areaColor: 'rgba(174, 243, 231, 0.9)',
color: 'rgba(174, 243, 231, 0.9)'
}
},
{
name: '马鞍山市',
itemStyle: {
areaColor: 'rgba(187, 184, 251, 0.9)',
color: 'rgba(187, 184, 251, 0.9)'
}
}
]
},
legend: {
orient: 'vertical',
// x:'right', //可设定图例在左、右、居中
// y:'center', //可设定图例在上、下、居中
left: 20, //可设定图例在左、右、居中
top: 20, //可设定图例在上、下、居中
// padding:[0,50,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
// data: ['直接访问']
data: ['2019','2020']
},
series: [{
name: '2019',
type: 'scatter',//scatter散点（气泡）图 effectScatter带有涟漪特效动画
coordinateSystem: 'geo',
zlevel: 3,
z:1,
label: {
normal: {
show:true,
color:"#000"
},
},
symbolRotate: 0,//角度
rippleEffect:{
brushType: 'stroke' //波纹绘制的方式
},
symbolSize: function (val,params) {
return 15;//标志的大小
},
data: data_2019.map(function (itemOpt) {
return {
name: itemOpt.name,
value: [
itemOpt.longitude,
itemOpt.latitude,
itemOpt.value
],
label:{
normal:{
show:true,
formatter:function(params){
return params.data.name;
},
color:'#c00000',
position:'bottom',
fontSize:24,
fontWeight:800,
},
emphasis:{
position: 'top',//文字的位置
show: true,//是否需要高亮显示图片所在位置的精度
color:"#fff"//精度字体的颜色
}
},
itemStyle: {
normal: {
color: itemOpt.color
}
}
};
})
},{
name: '2020',
type: 'scatter',//scatter散点（气泡）图 effectScatter带有涟漪特效动画
coordinateSystem: 'geo',
zlevel: 3,
z:1,
label: {
normal: {
show:true,
color:"#000"
},
},
symbolRotate: 0,//角度
rippleEffect:{
brushType: 'stroke' //波纹绘制的方式
},
symbolSize: function (val,params) {
return 15;//标志的大小
},
data: data_2020.map(function (itemOpt) {
return {
name: itemOpt.name,
value: [
itemOpt.longitude,
itemOpt.latitude,
itemOpt.value
],
label:{
normal:{
show:true,
formatter:function(params){
return params.data.name;
},
color:'#c00000',
position:'bottom',
fontSize:24,
fontWeight:800,
},
emphasis:{
position: 'top',//文字的位置
show: true,//是否需要高亮显示图片所在位置的精度
color:"#fff",//精度字体的颜色
}
},
itemStyle: {
normal: {
color: itemOpt.color
}
}
};
})
}]
};
myChart.setOption(option,true);4、data_2019 和 data_2020的值可以通过ajax请求从后端获取数据重新复制并刷新option的内容，重新加载地图数据。
5、地图数据点击事件：
myChart.on('click', function (params) {
if(typeof(params.data) == "undefined"){
return;
}
console.log(params);
});6、地图数据悬浮事件：
myChart.on('mouseover', function (params, e) {
if (typeof (params.data) == "undefined") {
return;
}
console.log(params);
});
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
