当前位置：首页 > news >正文

echarts 地图 tooltip内部添加点击事件

news 来源：原创 2025/6/14 7:23:47

需求：echarts 地图 tooltip内部添加点击事件，进行跳转
在这里插入图片描述

地图tooltip里面的配置

注意添加类名clTic
为了获取到内部的值添加 data-param=“${params.data.type}”

tooltip: {show: true,trigger: 'item',enterable: true,extraCssText: 'z-index:100',fontSize: 25,borderWidth: 0,padding: 0,backgroundColor: 'rgba(0,0,0,0)',formatter: (params) => {return `<div class="tooltip-box"><div class="flex mt-3"><div class="tooltip-button flex justify-center items-center clTic" data-param="${params.data.type}">前往查看 ></div></div>`;},},

<template><div ref="chartRef" :style="{ height, width }"></div>
</template>const chartRef = ref<HTMLDivElement | null>(null);//地图tooltip点击跳转页面onMounted(async () => {const myChart = echarts.init(chartRef.value as HTMLElement);myChart.on('showTip', () => {const tooltipContent = document.querySelector('.clTic');if (tooltipContent) {tooltipContent.addEventListener('click', (e) => {const target = e.target as HTMLElement;const res = target.getAttribute('data-param'); //获取tooltip内部的值});}});});

参考笔记