Version
5.0.1
Steps to reproduce
- 先绘制中国地图
- 点击某个省之后，重新注册对应省的地图数据并再次调用 setOption
What is expected?
能像 4.x 版本一样向下钻取地图时候有过渡动画效果
What is actually happening?
没有过渡动画效果
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<GeoJsonCity> {
listen(true);
const res = await fetch(proxy(`/areas/bound/geojson?code=${code (full ? '_full' : '')}`))
listen(false);
return res.json()
}
Version
5.0.1
Steps to reproduce
What is expected?
能像 4.x 版本一样向下钻取地图时候有过渡动画效果
What is actually happening?
没有过渡动画效果