echarty announcements and temporary notes

notes

#'  This gist is for echarty announcements and notes
#'  Comments are temporary, periodically deleted.
#'  If you like echarty, please consider granting a Github star ⭐.

remotes::install_github('helgasoft/echarty')  # get latest
library(echarty)

#------ segmentedDoughnut with ECharts v.6+ -----
ec.init(
  load= 'https://cdn.jsdelivr.net/gh/apache/echarts-custom-series@main/custom-series/segmentedDoughnut/dist/index.auto.js',
  ask= 'loadRemote',
  series.param= list(
    type= 'custom', renderItem= 'segmentedDoughnut',
    coordinateSystem= 'none',
    itemPayload= list(
      radius= list('50%','65%'), segmentCount= 8,
      label= list(show=T, formatter= '{c}/{b}', fontSize=35, color= '#555')
    ),
    data= list(5) )
)

echarty is on WebR - see the Coder.
Live R-code execution inside a single web page. No Rmd. No server. No installation. Wow!
Thanks to: @seanbirchall for the idea and @timelyportfolio for the solution 💐👑

@tomroh, the ECharts documentation is incomplete. Point coordinates are in pixels, so your coordinates have to be converted to pixels through Javascript. Here is how this is done with echarty.
However, this conversion must be done every time the chart is resized, so a custom chart is a better option (=more JS too).

library(echarty)
df <- data.frame(
  x = rnorm(20),
  y = rnorm(20)
)
jsCode <- "opt = chart.getOption();
 opt.graphic[0].elements[0].shape.points.forEach((value, idx, arr) => 
    { arr[idx] = chart.convertToPixel({ seriesIndex:0 }, value); })
  chart.setOption(opt); "
df |> ec.init( js= jsCode, 
  title= list(text="Scatter plot with a custom polygon"),
  graphic= list( list(type='polygon', z=2,
    shape= list(
      points = list(
        c(-2, 1), 
        c(0, 0),  
        c(2, 1)   
      )
    ),
    style = list( 
      fill = "#5470c6", 
      opacity = 0.5 )
  ))
)

If you like echarty, please consider granting a Github star ⭐.

Thanks! What's the code with echarts4r?

No idea how echarts4r could handle it.
Here is how to make a responsive custom polygon with echarty.

renit <- "function(params, api) {
      // Get the current data item (one vertex)
      const x = api.value(0, params.dataIndexInside);
      const y = api.value(1, params.dataIndexInside);
      if (!Number.isNaN(x)) {
        // collect points until ['the','end']
        polypnts.push(api.coord([x,y])); 
        return;
      }
      locp = echarts.util.clone(polypnts);
      polypnts = [];  // prepare to rerender on resize
      return {
        type: 'polygon',
        shape: { points: locp },
        style: api.style({
          fill: api.visual('color'),
          stroke: 'red',
          lineWidth: 2
        })
      };
    }"
df <- data.frame(
  x= c(100,350,100,NA),
  y= c(100,100,200,NA)
)
ec.init( df,
  js= c('window.polypnts=[];','',''),  # init points storage in JS
  series.param= list(type= 'custom', renderItem= ec.clmn(renit) )
)