最终做出来的效果是这样的：
最近做项目时，遇到这样的需求：
1、toolTip上的数据根据后台动态渲染
2、鼠标移入地图涟漪点时显示tootTip，点击toolTip上的文字，携带动态数据id进行路由跳转
3、鼠标移入地图涟漪点，与涟漪点相关的省份多区域联动高亮
这么多问题，不要慌，办法都是人想出来的，我们先从第一个问题来开整：
一、众所周知，echart的toolTip有自己的显示样式，但是在实际开发中需要自定义html结构才能满足需求，如我遇到的动态渲染，于是我这样做：
let initOption = {
tooltip: {
show: false, // 提示框
triggerOn: "mousemove|click", //必须使用这种方式，因为tooltip需要有点击事件，同时移入effectScatter点区域联动
extraCssText: "border:none;",//清除tooltip自带的边框颜色
// alwaysShowContent: true,//提示框不消失
hideDelay: 2000, //提示框移出或点击2秒后消失
},
//使用这种方式添加tooltip的formatter，便于点击事件的获取
initOption.tooltip.formatter = function (params) {
if (params.seriesType === `effectScatter`) {
this.proviesName = [];
const theData = params.data?.theData;
//省份集合value
let provies = [];
theData.map((item) => {
provies.push(...item.businessArea.split(","));
});
//遍历匹配得到省份合集
provies?.map((item) => {
mapCenterData.map((ite) => {
if (item == ite.value) this.proviesName.push(ite.name);
});
});
//数组去重
this.proviesName = Array.from(new Set(this.proviesName));
let before = "";
let center = "";
// 格式化提示框信息
theData.map((item) => {
item.recruitmentInfoList.map((ite) => {
center += `
<div style="width: 15vw;display: flex;justify-content: space-between;padding: 0 10px; font-size: 14px; margin: 10px 0;">
${ite.title}
</div>
`;
});
before +=
`
<div style="position: relative;z-index: 100000000000000000000000;">
<div style="font-weight: bold;display: flex;padding: 0 5px;justify-content: space-between;margin-bottom: 20px;">
<div style="font-weight: bold;color: #348df2;font-size: 16px;z-index:100;">${item.shortName}</div>
</div>` +
center +
`
<div style="width: 15vw;display: flex;justify-content: flex-end;padding: 0 10px; font-size: 14px;" >
<div style="align-items: flex-end;display: flex;align-items: center;color:#3da2ff;pointer-events: auto;" class="toJoin-${
item.id
}">
<p οnclick="${this.getMoreJob(item.id)}">更多</p>
<svg style="width:20px;height:20px;margin-left: 10px;" t="1672020296882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2518" width="200" height="200"><path d="M1024.2048 512c0 6.656-2.4576 13.2608-7.5264 18.2784l-325.8368 325.8368a25.6 25.6 0 1 1-36.1984-36.1984l282.5216-282.5216H25.8048a25.6 25.6 0 1 1 0-51.2h910.9504l-282.112-282.112a25.6 25.6 0 1 1 36.1984-36.1984l325.8368 325.8368c4.608 4.608 7.5264 11.008 7.5264 18.0736V512z" fill="#3ca1fe" p-id="2519"></path></svg>
</div>
</div>
</div>
`;
});
return before;
}
}.bind(this);
}tooTip对象是放在初始化的echart对象中，相信聪明的你肯定知道。这样写就能实现toolTip中html自定义。
二、点击文字，携带参数的路由跳转，由于tooltip中不能使用vue语法，只能使用原生点击事件（onclick），大家可以参考上面代码
<p οnclick="${this.getMoreJob(item.id)}">更多</p> //这里可以获取到定义在vue中的方法三、移入地图涟漪点省份区域联动，实现思路就是在initOption对象中添加：
let initOption = {
// 设置高亮颜色
dataRange: {
show: false,
x: "left",
y: "bottom",
splitList: [
{ start: 5, end: 5, color: "#007aff" }, //当值为5时，区域背景(值随便设置)
],
},
}然后在ehcart的移入事件中这么写：
//移入显示区域联动
this.chart.on("mouseover", (params) => {
if (params.seriesType == "effectScatter") {
this.seriesData = [];
this.proviesName.map((item) => {
this.seriesData.push({
name: item + "省",//这里名字得与联动的省份的名字对应，不然没效果
value: 5, //随便写的值，主要是与dataRange中设置的值相对应，这样就能实现区域联动高亮
});
this.chart.setOption({ series: [{}, { data: this.seriesData }] });
});
}
});鼠标移出还得操作一手，为了除高亮：文章来源：https://www.toymoban.com/news/detail-486412.html
//鼠标移出，清除联动高亮
this.chart.on("mouseout", (params) => {
if (params.seriesType == "effectScatter") {
this.seriesData = [];
this.chart.setOption({ series: [{}, { data: this.seriesData }] });
}
});最后，废话不多说，上完整代码：文章来源地址https://www.toymoban.com/news/detail-486412.html
//初始化图表
initChart() {
this.chart = echarts.init(this.$refs.map);
let initOption = {
grid: {
bottom: "0%",
top: "10%",
left: "10%",
right: "10%",
},
// 设置高亮颜色
dataRange: {
show: false,
x: "left",
y: "bottom",
splitList: [
{ start: 5, end: 5, color: "#007aff" }, //当值为5时，区域背景
],
},
tooltip: {
show: false, // 提示框
triggerOn: "mousemove|click", //必须使用这种方式，因为tooltip需要有点击事件，同时移入effectScatter点区域联动
extraCssText: "border:none;",//清除tooltip自带颜色
// alwaysShowContent: true,//提示框不消失
hideDelay: 2000, //提示框2秒后小时
},
geo: {
show: true,
map: "china",
zoom: 1.1, // 地图比例
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
roam: false,
itemStyle: {
normal: {
areaColor: "#01215c",
borderWidth: 5, //设置外层边框
borderColor: "transparent",
shadowColor: "#add7ff",
shadowBlur: 30,
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
},
series: [
{
type: "effectScatter",
coordinateSystem: "geo",
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
scale: 5,
period: 2, // 秒数
},
symbolSize: 12,
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
position: "right",
show: true,
},
},
zlevel: 1,
tooltip: {
show: true, // 提示框
triggerOn: "click",
},
},
{
type: "map",
map: "china",
aspectScale: 0.75,
zoom: 1.1, // 地图比例
itemStyle: {
normal: {
areaColor: "#ebf6fd",
borderColor: "#a1cffb",
shadowColor: "rgba(255, 230, 175,0.5)",
borderWidth: 1,
},
emphasis: {
areaColor: "#52C5F7",
},
},
emphasis: {
label: {
show: true,
},
},
},
],
};
//添加tooltip对象
initOption.tooltip.formatter = function (params) {
if (params.seriesType === `effectScatter`) {
this.proviesName = [];
const theData = params.data?.theData;
//省份集合value
let provies = [];
theData.map((item) => {
provies.push(...item.businessArea.split(","));
});
//遍历匹配得到省份合集
provies?.map((item) => {
mapCenterData.map((ite) => {
if (item == ite.value) this.proviesName.push(ite.name);
});
});
//数组去重
this.proviesName = Array.from(new Set(this.proviesName));
let before = "";
let center = "";
// 格式化提示框信息
theData.map((item) => {
item.recruitmentInfoList.map((ite) => {
center += `
<div style="width: 15vw;display: flex;justify-content: space-between;padding: 0 10px; font-size: 14px; margin: 10px 0;">
${ite.title}
</div>
`;
});
before +=
`
<div style="position: relative;z-index: 100000000000000000000000;">
<div style="font-weight: bold;display: flex;padding: 0 5px;justify-content: space-between;margin-bottom: 20px;">
<div style="font-weight: bold;color: #348df2;font-size: 16px;z-index:100;">${item.shortName}</div>
</div>` +
center +
`
<div style="width: 15vw;display: flex;justify-content: flex-end;padding: 0 10px; font-size: 14px;" >
<div style="align-items: flex-end;display: flex;align-items: center;color:#3da2ff;pointer-events: auto;" class="toJoin-${
item.id
}">
<p οnclick="${this.getMoreJob(item.id)}">更多</p>
<svg style="width:20px;height:20px;margin-left: 10px;" t="1672020296882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2518" width="200" height="200"><path d="M1024.2048 512c0 6.656-2.4576 13.2608-7.5264 18.2784l-325.8368 325.8368a25.6 25.6 0 1 1-36.1984-36.1984l282.5216-282.5216H25.8048a25.6 25.6 0 1 1 0-51.2h910.9504l-282.112-282.112a25.6 25.6 0 1 1 36.1984-36.1984l325.8368 325.8368c4.608 4.608 7.5264 11.008 7.5264 18.0736V512z" fill="#3ca1fe" p-id="2519"></path></svg>
</div>
</div>
</div>
`;
});
return before;
}
}.bind(this);
this.chart.setOption(initOption);
//移入显示区域联动
this.chart.on("mouseover", (params) => {
if (params.seriesType == "effectScatter") {
this.seriesData = [];
this.proviesName.map((item) => {
this.seriesData.push({
name: item + "省",
value: 5,
});
this.chart.setOption({ series: [{}, { data: this.seriesData }] });
});
}
});
//鼠标移出，清除联动高亮
this.chart.on("mouseout", (params) => {
if (params.seriesType == "effectScatter") {
this.seriesData = [];
this.chart.setOption({ series: [{}, { data: this.seriesData }] });
}
});
},注意：初始化图表的数据都来原于后台接口请求，涟漪点的数据，与地图每个区域的数据，需要各位根据实际情况渲染到地图上，然后才会有上面的3个问题的出现
最后：原创不易，转载请注明出处
到了这里，关于vue+echarts 实现地图tooltip点击事件；toolTip数据动态渲染；同时鼠标滑过涟漪点时实现地图多区域联动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
