apache / apache/echarts

制作钻取地图,向下钻取时没有过渡动画了?

Open
#14,069 12 comments 0 reactions 0 assignees View on GitHub
bug pending waiting-for: community
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version
5.0.1

### Steps to reproduce
1. 先绘制中国地图
2. 点击某个省之后,重新注册对应省的地图数据并再次调用 setOption

### What is expected?
能像 4.x 版本一样向下钻取地图时候有过渡动画效果

### What is actually happening?
没有过渡动画效果

---

```typescript
const myCharts = init(document.getElementById(id) as HTMLDivElement);
let currentGeoJson: GeoJsonCity = GeoChina as any; // 当前绘制数据

// 监听点击事件
myCharts.on('click', params => {
const ev = params as EchartEvent
const item = currentGeoJson.features.find(geo => geo.properties.name === ev.name)
get_geoJSON_byCode(item?.properties.adcode as string, {
listen(load) { load ? myCharts.showLoading() : myCharts.hideLoading() }
}).then(geoJson => {
currentGeoJson = geoJson;
const { properties } = geoJson.features[0]
drawMap({
charts: myCharts,
name: `${properties.name}-${properties.adcode}`,
geoJson,
});
})
});

// 绘制地图函数
function drawMap({
charts,
name = '中国',
geoJson = GeoChina as any,
}: {
charts: ECharts;
name?: string;
geoJson?: GeoJsonProvice | GeoJsonCity;
}) {
if (!getMap(name)) {
// 向 echarts 注入地图数据;name 为 series 中使用时候的标识
registerMap(name, geoJson as any);
}

// 绘制地图
charts.setOption({
geo: {
map: name,
zoom: 1.1999,
animation: true,
animationDuration: 1999,
},
});

return charts;
}

drawMap({ charts: myCharts });

/**
* 根据 adcode 获取 geo 数据;localhost 会被反爬 - 用 proxy 或者改 host
* @param code adcode
*/
export async function get_geoJSON_byCode(
code: string | number,
{ full = true, listen = (bool: boolean) => { } } = {},
): Promise {
listen(true);
const res = await fetch(proxy(`/areas/bound/geojson?code=${code (full ? '_full' : '')}`))
listen(false);
return res.json()
}
```

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.