[Bug] map3D实现的地图，想高亮特定的某个区域并展示相应的toolTip, 使用myChart.dispatchAction未生效

[queena2013]

Version

"echarts": "^5.5.1", "echarts-gl": "^2.0.9",

Link to Minimal Reproduction

1

Steps to Reproduce

import { useState, useEffect } from "react"; import * as echarts from "echarts"; import "echarts-gl";

const getJSON = (adcode) => { return new Promise((resolve) => { fetch( https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${adcode}_full ) .then((response) => response.json()) .then((geojson) => { console.log("adcode", adcode, geojson); resolve(geojson); }) .catch(() => { resolve(false); }); }); };

const hightlightStyle = { itemStyle: { color: "#28ffff", }, }; export default () => { const [regions, setRegions] = useState([]); const [myChart, setMyChart] = useState(null);

// 动态高亮 function highlightRegion(index) { console.log("hightlight", index, regions[index]); // 高亮当前区域 myChart.dispatchAction({ type: "highlight", seriesIndex: 0, // name: regions[index], dataIndex: index, }); // 显示 tooltip myChart.dispatchAction({ type: "showTip", seriesIndex: 0, // name: regions[index], dataIndex: index, }); }

const mapInit = async () => { const geoJson: any = await getJSON(100000); // 注册地图 echarts.registerMap("myMap", geoJson); const nowRegions = geoJson.features.map((item) => { return item.properties.name; }); setRegions(nowRegions); // 初始化ECharts实例 const chart = echarts.init(document.getElementById("mapWrap")); // 设置高亮区域 const options = { tooltip: { show: true, backgroundColor: "rgba(50, 50, 50, 0.7)", // 提示框背景颜色 textStyle: { color: "#fff", fontSize: 14, }, padding: [5, 10], formatter(params) { if (params.name === "北京市") { console.log("params", params); } return params.name; }, }, series: [ { type: "map3D", map: "myMap", zoom: 1, // 地图的颜色 itemStyle: { color: "rgba(69,93,128,0.5)", // 地图板块的颜色 opacity: 0.95, // 图形的不透明度 [ default: 1 ] borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 borderColor: "#8ca3b6", // 图形描边的颜色 }, // 标签的相关设置 label: { show: true, // (地图上的城市名称)是否显示标签 align: "center", verticalAlign: "middle", distance: 5, formatter: function (params) { return params.name ? params.name : " "; }, textStyle: { // 标签的字体样式 color: "#fff", // 地图初始化区域字体颜色 fontSize: 12, // 字体大小 }, }, // 鼠标 hover/高亮时图形和标签的样式 emphasis: { label: { // label 高亮时的配置 show: true, textStyle: { color: "#fff", // 高亮时标签颜色变为 白色 fontSize: 18, // 高亮时标签字体 变大 fontFamily: "PingFangSC", backgroundColor: "transparent", borderRadius: 10, padding: 8, }, }, itemStyle: { color: "#28ffff", // 高亮时地图板块颜色改变 }, }, viewControl: { distance: 120, // 默认视角距离主体的距离 center: [0, 0, 0], alpha: 75, // 视角绕 x 轴，即上下旋转的角度 beta: 0, // 视角绕 y 轴，即左右旋转的角度 otateSensitivity: 1, projection: "perspective", // 投影方式 minAlpha: 75, maxAlpha: 75, minBeta: 0, maxBeta: 0, }, }, ], }; // 使用设定的配置项和数据显示图表 chart.setOption(options); setMyChart(chart); };

const handleResize = () => { if (myChart) { myChart.resize(); } };

useEffect(() => { if (myChart && regions?.length) { highlightRegion(30); } }, [myChart, regions]);

useEffect(() => { mapInit(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []);

return ( <div id="mapWrap" style={{ width: ${window.innerWidth}px, height: ${window.innerHeight}px, }} /> ); };

Current Behavior

不能高亮展示某个区域并展示当前区域的toolTip

Expected Behavior

希望toolTip轮播展示, 首先先控制某个区域的toolTip展示

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response