Echarts地图tooltip配置，关闭
最近在做一个使用地图的项目，使用了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 = '
'
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'
}
作者：小生鲜
