[Bug] TypeError: api.coord is not a function

[srinathmerugu]

Version

5.3.0

Link to Minimal Reproduction

No response

Steps to Reproduce

Using Draw polygons on map echarts example https://echarts.apache.org/examples/en/editor.html?c=map-polygon

Current Behavior

Getting an error like this Uncaught TypeError: api.coord is not a function, where .coord is not an inner method of api

And also I've attached an image below which says there's an error exists in echarts example itself, you can find it on bottom right side of the image

Expected Behavior

Polygon should be plotted on the map

Environment

- OS: Windows 10
- Browser: Chrome
- Framework:

Any additional comments?

I couldn't see coord method inside my api object and if i try removing api.coord method it says TypeError: Cannot read properties of undefined (reading 'x') i.e., x: params.coordSys.x,

[plainheart]

This example uses Baidu Map. Please make sure you can use this service in your area.

[srinathmerugu]

can u share few samples which doesn't use baidu map as it is restricted in our area

[plainheart]

Currently, only Baidu Map is officially supported. But there are also some extensions for Google Map and Leaflet contributed by the community. You can take it a try.

[srinathmerugu]

Thanks, with leaflet now I'm able to plot map. Is there a way to create my own custom type in series type? Now for point type maps i see scatter and effectScatter as type to plot points Suppose if i want to use a marker icon like google maps to plot my points, how to create and use it with echarts?

[plainheart]

You may use images as scatter symbols to get a similar effect like map marker. Please refer to https://echarts.apache.org/option.html#series-scatter.symbol

[srinathmerugu]

Can i have events on echart labels? If it's possible, please share an example

[plainheart]

@srinathmerugu Please refer to these two documents.

• https://echarts.apache.org/handbook/en/concepts/event
• https://echarts.apache.org/en/api.html#events

chart.on('click', { seriesName: 'SERIES NAME' }, e => {
  // do something here
})

[srinathmerugu]

I tried them but i was getting this below error

[plainheart]

Can you show me more details?

[srinathmerugu]

It's working now, but i need event on the label, the links which shared by you is having events on component type, subtype, data etc. I need an event to be fired if i click on label. And also is it possible to show multiple markers/symbols on same coordinate? Suppose if i need a circle on top of diamond which shares same latlngs, how can i achieve it?

[plainheart]

I need an event to be fired if i click on label.

You can determine if it's triggered by labels via e.event.topTarget.type or e.event.topTarget.style.text.

chart.on('click', { seriesName: 'SERIES NAME' }, e => {
  const target = e.event.topTarget;
  if (target.type === 'tspan') {
     // triggered by label
  }
  // Or
  if (target.style.text) {
      // ...
   }
})

And also is it possible to show multiple markers/symbols on same coordinate?

I have no good idea about this. But based on the information returned by the event, I think you can give some tips by customizing tooltip content or using graphic component or custom series to draw symbols that share the same coordinate.

[srinathmerugu]

Thanks, but still I'm not able to fire an event even if i use target.style.text. Event is getting fired only if i click on marker/symbol, need to raise an event if only clicked on label but not on the marker.

[srinathmerugu]

I'm using scatter type to plot the markers/symbols and I'm able to show multiple markers along with labels but labels are getting overlapping, you can see it in the image below

I even tried labelLayout: {hideOverlap : true}, this is also not working

[plainheart]

Event is getting fired only if i click on marker/symbol, need to raise an event if only clicked on label but not on the marker. I even tried labelLayout: {hideOverlap : true}, this is also not working

What version are you using? Please make sure it's greater than or equal to v5.0.0 as this feature is introduced in v5.0.0.

[srinathmerugu]

I'm currently using v5.3.0

[plainheart]

Are these markers in the same series? labelLayout currently doesn't work in different series.

[srinathmerugu]

Yes, they're in the same series

[plainheart]

I tried it with Baidu Map. Both label event and hideOverlap work well.

[srinathmerugu]

Can you pls share that example here? Or code snippet?

[plainheart]

I still remember it's unavailable in your area.

[srinathmerugu]

Yes map is unavailable, but atleast i can see your code and correct mine if you can share

[srinathmerugu]

This is what I'm trying to do with my code

[plainheart]

Please see this codepen: https://codepen.io/plainheart/pen/WNXZKjK

[srinathmerugu]

Thanks, now both label event and labelLayout are working

[srinathmerugu]

I have huge data about 2.85L markers data, i want to plot them quicker, but with default echarts rendering it's loading chunk by chunk So, I've put large as true, now points are rendering faster but i'm losing my itemStyle i.e., color applied to each individual marker Is there a way to render markers faster as well as not losing my itemStyle?

[plainheart]

I'm afraid you can't enable large if you hope to customize the symbols. Please refer to the tip for this.

But when the optimization enabled, the style of single data item can't be customized any more.

This is also the reason why it renders faster when large is enabled.

[srinathmerugu]

Hi, when I'm trying to access leaflet with echarts i'm getting this below error

And this is how i'm initialising echarts and leaflet var myChart = echarts.init(document.getElementById('echarts-leaflet')); var leafletComponent = myChart.getModel().getComponent('leaflet'); var map = leafletComponent.getLeaflet();

[plainheart]

You should call setOption first before getting the leaflet component.

var myChart = echarts.init(document.getElementById('echarts-leaflet'));
myChart.setOption(option);
var leafletComponent = myChart.getModel().getComponent('leaflet');
var map = leafletComponent.getLeaflet();

[srinathmerugu]

my leaflet option is being set but in the component if i see there's no such property with leaflet, you can see it in the image below, Hence I'm getting an error like this ERROR TypeError: Cannot read properties of undefined (reading 'getLeaflet')

[srinathmerugu]

HI plainheart, is there a way in which multiple layers can be added on a single map when using echarts-leaflet package. I have a requirement where i want to render the polygon shapes of a state / country and then on top of that plot some location icons. Is this possible, if yes then please share a sample for the sample. Thanks in advance.

[plainheart]

There are two ways to draw polygon shapes.

• Leaflet API Polygon / GeoJSON
• ECharts custom series. You can refer to this example.

[srinathmerugu]

Hi, I'm currently plotting points using scatter type with my custom symbol using echarts-leaflet But whenever i zoom in, zoom out and drag on map, i can see there's a delay on map for plotting points. Points are being displaced and then sets back on the coordinates which doesn't give a good user experience. I tried by setting animation option as false, even though still i can see some delay while dragging map. I'm sharing the screenshots below of points getting delayed

• zoom in

• zoom out

• drag

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!