最近在使用echarts5.0版本中的地图遇到tooltips不显示的问题
不显示时的代码
this.myChart.setOption( { //地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。 //要显示散点图，必须填写这个配置 geo: { show: false, name: "map", map: "Map", //使用 roam: false, center: this.parentInfo.length === 1 ? ["104.69095124218748", "37.17174920352349"] : false, label: { normal: { show: false, color: "rgb(249, 249, 249)", //省份标签字体颜色 formatter: (p) => { switch (p.name) { case "内蒙古自治区": p.name = "内蒙古"; break; case "西藏自治区": p.name = "西藏"; break; case "新疆维吾尔自治区": p.name = "新疆"; break; case "宁夏回族自治区": p.name = "宁夏"; break; case "广西壮族自治区": p.name = "广西"; break; case "香港特别行政区": p.name = "香港"; break; case "澳门特别行政区": p.name = "澳门"; break; default: break; } return p.name; }, }, }, zoom: this.parentInfo.length === 1 ? 1.4 : 1.1, //缩放比例 }, series: [ { type: "effectScatter", //样试 coordinateSystem: "geo", //该系列使用的坐标系 data: scatterData, tooltip: { trigger: "item", show: false, confine: true, formatter: (p) => { //自定义提示信息 let dataCon = p.data; let div = ""; div += "<p>客户名称：<span>" + dataCon.crName + "</span></p>"; div += "<p>设备型号：<span>" + dataCon.emName + "</span></p>"; div += "<p>设备名称：<span>" + dataCon.name + "</span></p>"; div += "<p>设备状态：<span>" + dataCon.csStatus + "</span></p>"; return div; }, backgroundColor: "rgba(0, 0, 0, 0.7)", borderWidth: 0, textStyle: { color: "#fff", }, }, label: { normal: { formatter: "{b}", position: "right", show: false, }, }, //标记的大小,可以设置数组或者函数返回值的形式 symbolSize: 10, rippleEffect: { //涟漪特效相关配置。 brushType: "stroke", //波纹的绘制方式 }, hoverAnimation: true, //鼠标移入放大圆 }, { name: "地图", type: "map", center: this.parentInfo.length === 1 ? ["104.69095124218748", "37.17174920352349"] : false, map: "Map", roam: false, //是否可缩放 zoom: this.parentInfo.length === 1 ? 1.4 : 1.1, //缩放比例 data: mapData, label: { normal: { show: true, color: "rgb(249, 249, 249)", //省份标签字体颜色 formatter: (p) => { switch (p.name) { case "内蒙古自治区": p.name = "内蒙古"; break; case "西藏自治区": p.name = "西藏"; break; case "新疆维吾尔自治区": p.name = "新疆"; break; case "宁夏回族自治区": p.name = "宁夏"; break; case "广西壮族自治区": p.name = "广西"; break; case "香港特别行政区": p.name = "香港"; break; case "澳门特别行政区": p.name = "澳门"; break; default: break; } return p.name; }, }, }, itemStyle: { areaColor: "rgba(36, 207, 244,0.2)", borderColor: "#53D9FF", borderWidth: 0.5, shadowBlur: 25, shadowColor: "#8dd7fc", shadowOffsetX: 7, shadowOffsetY: 6, emphasis: { areaColor: "#8dd7fc", borderWidth: 1.6, shadowBlur: 25, }, }, }, ], }, true );
这个配置发现鼠标悬停在地图单点上没有显示相应的信息，后来查看了echarts5.0文档，tooltips要全局设置和单独设置。下面的是可以显示的代码。
this.myChart.setOption( { //地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。 //要显示散点图，必须填写这个配置 geo: { show: false, name: "map", map: "Map", //使用 roam: false, center: this.parentInfo.length === 1 ? ["104.69095124218748", "37.17174920352349"] : false, label: { normal: { show: false, color: "rgb(249, 249, 249)", //省份标签字体颜色 formatter: (p) => { switch (p.name) { case "内蒙古自治区": p.name = "内蒙古"; break; case "西藏自治区": p.name = "西藏"; break; case "新疆维吾尔自治区": p.name = "新疆"; break; case "宁夏回族自治区": p.name = "宁夏"; break; case "广西壮族自治区": p.name = "广西"; break; case "香港特别行政区": p.name = "香港"; break; case "澳门特别行政区": p.name = "澳门"; break; default: break; } return p.name; }, }, }, zoom: this.parentInfo.length === 1 ? 1.4 : 1.1, //缩放比例 }, series: [ { type: "effectScatter", //样试 coordinateSystem: "geo", //该系列使用的坐标系 data: scatterData, tooltip: { show: true, }, label: { normal: { formatter: "{b}", position: "right", show: false, }, }, //标记的大小,可以设置数组或者函数返回值的形式 symbolSize: 10, rippleEffect: { //涟漪特效相关配置。 brushType: "stroke", //波纹的绘制方式 }, hoverAnimation: true, //鼠标移入放大圆 }, { name: "地图", type: "map", center: this.parentInfo.length === 1 ? ["104.69095124218748", "37.17174920352349"] : false, map: "Map", roam: false, //是否可缩放 zoom: this.parentInfo.length === 1 ? 1.4 : 1.1, //缩放比例 data: mapData, label: { normal: { show: true, color: "rgb(249, 249, 249)", //省份标签字体颜色 formatter: (p) => { switch (p.name) { case "内蒙古自治区": p.name = "内蒙古"; break; case "西藏自治区": p.name = "西藏"; break; case "新疆维吾尔自治区": p.name = "新疆"; break; case "宁夏回族自治区": p.name = "宁夏"; break; case "广西壮族自治区": p.name = "广西"; break; case "香港特别行政区": p.name = "香港"; break; case "澳门特别行政区": p.name = "澳门"; break; default: break; } return p.name; }, }, }, itemStyle: { areaColor: "rgba(36, 207, 244,0.2)", borderColor: "#53D9FF", borderWidth: 0.5, shadowBlur: 25, shadowColor: "#8dd7fc", shadowOffsetX: 7, shadowOffsetY: 6, emphasis: { areaColor: "#8dd7fc", borderWidth: 1.6, shadowBlur: 25, }, }, }, ], tooltip: { trigger: "item", show: false, confine: true, formatter: (p) => { //自定义提示信息 let dataCon = p.data; let div = ""; div += "<p>客户名称：<span>" + dataCon.crName + "</span></p>"; div += "<p>设备型号：<span>" + dataCon.emName + "</span></p>"; div += "<p>设备名称：<span>" + dataCon.name + "</span></p>"; div += "<p>设备状态：<span>" + dataCon.csStatus + "</span></p>"; return div; }, backgroundColor: "rgba(0, 0, 0, 0.7)", borderWidth: 0, textStyle: { color: "#fff", }, }, }, true );
该配置是全局设置显示和不显示，如果不设置则不显示。全局设置show为false，单独设置show为true。
