[Bug] Zoom on line with band: band static or disappears and does not zoom appropriately

[yogat3ch]

Hi @JohnCoene,
I believe this is an issue with echarts rather than with echarts4r, but I'm posting here to ask for guidance on how/if there's a means of outputting/finding the echarts JS code that renders an echart in the DOM such that I can produce a reprex for the Echarts issues.

The combination of line and band in the same chart causes the band to not respond appropriately to the zooming, whether the zoom is initiated by the timeline or the toolbox.

Any ideas on how to reproduce this with typical echarts JS for submission to the echarts issues?

Reprex:

Video:

df <- tibble::tribble(
   ~year,  ~median,    ~lower,    ~upper,
   2022L,  1052.34, 1045.2835, 1073.0685,
   2023L,  1040.43,  1028.419,  1073.874,
   2024L, 1034.285, 1009.4145, 1077.0795,
   2025L, 1029.835, 1000.5545, 1093.1705,
   2026L,  1031.61,  1006.218,   1096.22,
   2027L,  1035.68,   999.872,  1109.535
 )
 
 p <- echarts4r::e_charts(df, x = year) |>
   echarts4r::e_datazoom() |> 
   echarts4r::e_line(median, symbol = "none") |> 
   echarts4r::e_band2(lower = lower, upper = upper, itemStyle = list(opacity = .6)) |> 
   echarts4r::e_toolbox_feature(feature = c("saveAsImage" , "dataZoom", "restore")) |> 
   echarts4r::e_x_axis(
     scale = TRUE,
     type = "value",
     name = "Year",
     nameLocation = "middle",
     nameTextStyle = list(padding = rep(0, 4)),
     nameGap = 35,
     formatter = htmlwidgets::JS(
       "function(value, index){
         return typeof value == 'number' ? parseFloat(value) : value;
      }"
     ),
     rotate = 45
   )

[JohnCoene]

I'm not sure it's with echarts.js, e_band2 is a custom renderer, see here I believe it was originally written by @helgasoft

I don't think we need to do anything to support the zoom, I might be wrong

[yogat3ch]

Huh, interesting... the band doesn't move with the timeline or the box zoom at all. Any ideas on solutions for that?