apache / echarts

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

[Feature] Option to change cursor in maps when dragging #20152

Open jgoncab-arte opened 4 months ago

jgoncab-arte commented 4 months ago

What problem does this feature solve?

In first place, other series are able to change the cursor but series.map does not have that option. Moreover, it is common that the cursor changes while dragging so there should be another option for those cases.

What does the proposed API look like?

{
  geo: {
    cursor: "",
    dragCursor: ""
  },
  series: {
    type: "map",
    cursor: "",
    dragCursor: ""
  }
}

cursor and dragCursor should have the same possible values ​​as the 'cursor' property of other series. Another properties could be zoomCursor and draggableCursor because I could see that some places without anything drawn are not draggable.

plainheart commented 4 months ago

Currently, there is no such direct option to control the dragging cursor. A workaround is to listen to the georoam event and change the cursor of the painter element. Demo

myChart.on('georoam', () => {
    myChart.getZr().painter.getViewportRoot().style.cursor = 'move';
});
jgoncab-arte commented 4 months ago

I did something like that but I added a condition to prevent changing the cursor if the event is caused by zoom and listened to the 'mouseup' event to change the cursor again to normal. I works for now but I still think this is a good feature. One problem I have with this approach is that changing the cursor overrides the cursor set for the visualmap.