apache / apache/echarts

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

Open
#20,357 2 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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 (


);
};

### Current Behavior

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

### Expected Behavior

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

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.