echarts icon indicating copy to clipboard operation
echarts copied to clipboard

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

Open caoxiemeihao opened this issue 4 years ago • 11 comments

Version

5.0.1

Steps to reproduce

  1. 先绘制中国地图
  2. 点击某个省之后,重新注册对应省的地图数据并再次调用 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()
  }

caoxiemeihao avatar Jan 19 '21 01:01 caoxiemeihao

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

echarts-bot[bot] avatar Jan 19 '21 01:01 echarts-bot[bot]

我也希望能把这个过渡加回来,不然地图下钻切换真的很生硬。 亲测最后一个支持过渡效果的版本是4.3.0。 无过渡版本: 4 有过渡版本: 有过渡版本

anzhou99 avatar Sep 08 '21 07:09 anzhou99

请问现在默认支持过渡动画吗?已经是5.3版本了

YunyChan avatar Jun 16 '22 09:06 YunyChan

这个过渡动画还会加上吗?或者有其他的办法吗

Shenzm72 avatar Dec 08 '22 07:12 Shenzm72

请问有解决方案吗,目前版本是 5.4.1

rtpacks avatar Mar 14 '23 03:03 rtpacks

同,有办法在新版本开启过度动画吗?

LXRWH avatar Jun 14 '23 08:06 LXRWH

请问解决了吗?

fanhualuoye avatar Aug 25 '23 03:08 fanhualuoye

请问解决了吗,3d地图下钻有动画但是会有残留

Mr-bean-z avatar Feb 07 '24 03:02 Mr-bean-z

都2024年了,这个问题依旧存在

yanrome avatar Apr 07 '24 08:04 yanrome

Can you solve this problem? I want animation, but I don't want the switching between maps to be so rigid

GOAT7c avatar May 10 '24 06:05 GOAT7c