apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.44k stars 19.61k forks source link

<image> tags in Geo SVGs are not loading #15597

Closed sioh89 closed 3 years ago

sioh89 commented 3 years ago

Version

5.1.2

Reproduction link

https://codesandbox.io/s/echarts-geo-map-with-image-wfvvn?file=/src/index.js

Steps to reproduce

  1. Register map using an svg that contains an <image> tag where the href property is a url
  2. Set option with a heatmap series with { coordinateSystem: "geo" }

What is expected?

Expect to see heatmap points rendered on top of the image in the svg similar to this: this

What is actually happening?

The data points are being plotted correctly, but the <image> is not being loaded.


Our team is considering migrating to Echarts. We'd love to be able to plot the heatmap series on some map images and have that image scale and translate according to the chart's zoom level using the { roam: true } option. The data points represent coordinates associated with the map image. These maps are stored as png files in our server and not as an asset in the frontend because the available map images are dynamic.

Here is an abstracted example that is similar to our codebase: https://codesandbox.io/s/echarts-geo-map-with-image-wfvvn?file=/src/index.js

I thought maybe the problem is that the svg is being drawn onto the canvas before the image is done loading so I tried registering the map after load. That didn't work either. Example: https://codesandbox.io/s/echarts-geo-map-with-image-registermap-after-image-load-iq1wn

echarts-bot[bot] commented 3 years ago

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 it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

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 dev@echarts.apache.org. Please attach the issue link if it's a technical question.

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

Have a nice day! 🍵

plainheart commented 3 years ago

As a workaround, you could use the xlink:href attribute to avoid this issue.

svgimg.setAttribute("xlink:href", HREF);

https://github.com/ecomfe/zrender/blob/master/src/tool/parseSVG.ts#L482