cuocuo-46 commented on issue #20357:
URL: https://github.com/apache/echarts/issues/20357#issuecomment-3551779253
> ### 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_
你好，想请教下最后有解决方案吗？
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
