最近在做一个使用地图的项目,使用了echarts地图插件Echarts官网查看具体使用API

项目中使用了散点图具体配置根据项目需求进行更改,我的配置如下

var option = {
    animation: true,
	animationDuration: 1000,
	animationEasing: 'cubicInOut',
	animationDurationUpdate: 1000,
	animationEasingUpdate: 'cubicInOut',
	tooltip: {
		trigger:'item',
		triggerOn:'click',
		position: ['0%', '80%'],
		confine:true,
		formatter: function (params) {
			var info = '<div style="position:relative;"><img onClick="hideMap()"     
src="'+params.data.img+'" alt="'+params.name+'" /></div>'
			return info;
		},
		padding:1,
		backgroundColor: "#e5e5e5",//提示标签背景颜色
	},
	geo:{
		map: 'china',
		zoom:1.2,
		label: {
			emphasis: {
				show: false
			}
		},
	    itemStyle:{
		   normal:{
			  areaColor: '#f56108', //地图颜色
			  borderColor: '#82c8a0' //省界边框颜色
	      },
	      emphasis:{
			 areaColor:'#f56108' //选中省颜色
	      }
	    }
	},
	series: [
		{
			name: '中国',
			type: 'effectScatter', //散点图
			coordinateSystem: 'geo', //地理坐标系
			rippleEffect: {
				brushType: 'stroke' //波纹的绘制方式:空心或者实心fill
			},
			label: {
				normal: {
					formatter: '{b}',
					position: 'right',
					show: false //站点地名的直接显示
				},
				emphasis: {
					show: true //悬浮显示
				}
			},
			itemStyle: {
				normal: {
					color:'#7fccde', //苗点颜色
				},
			},
			symbolSize:12,
			data: mapCity
		}
	]
};
//初始化echarts实例
var myChart1 = echarts.init(document.getElementById('serverMap'));
//使用制定的配置项和数据显示图表
myChart1.setOption(option);

配置比较简单,在移动端要关闭提示框按照官方通过action.tooltip.showTip或者action.tooltip.hideTip是没办法关闭的,我这里给提示框图片绑定了一个函数用来关闭提示框,通过打印实例对象找到对应dom元素进行display:none就可以了

function hideMap(){
    myChart1._dom.childNodes[1].style.display = 'none'
}

 

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐