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 = '<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'
}

 

ECharts 是一个非常强大的数据可视化库,其地图组件提供了丰富的交互功能,包括地图 tooltip(工具提示)。在 ECharts 地图中,tooltip 可以设置为轮播模式,这意味着当鼠标悬停在地图上时,会显示一系列相关的数据点,而不是只显示单个数据点的信息。 轮播 tooltip配置通常涉及到以下步骤: 1. **设置 tooltip 类型**:在地图配置中,指定 tooltip 的类型为 `map`,并设置 `show` 为 `true`。 ```javascript option = { tooltip: { type: 'map', show: true, trigger: 'item', // 或者 'emphasis' axisPointer: { // 鼠标移动到地图上时的指示线 type: 'shadow' }, formatter: function (params) { // 自定义 tooltip 内容显示 return params.name + '<br>' + params.value; } }, ... }; ``` 2. **关联地理编码信息**:在地图数据中,每个区域需要有一个 `name` 属性对应地图上的名称,并可能包含其他用于轮播的数据,如 `data` 数组。 ```javascript series: [{ name: '地图数据', type: 'map', mapType: 'yourMapType', // 例如 'world', 'china' 等 data: [ { name: '区域1', value: value1, // 区域1的数据 } { name: '区域2', value: value2, // 区域2的数据 } ... ], ... }] ``` 3. **轮播配置**:ECharts 提供了 `formatter` 函数,你可以自定义这个函数,使其根据数据内容动态展示。如果数据数组较大,你可以控制 tooltip 显示哪些数据点,例如,可以通过索引或轮播显示前几项。 ```javascript formatter: function (params) { let content = ''; for (let i = 0; i < params.data.length && i < 3; i++) { // 轮播3个数据点 content += `<div>${params.data[i].name}: ${params.data[i].value}</div>`; } return content; } ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小生鲜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值