helgasoft / echarty

Minimal R/Shiny Interface to ECharts.js
https://helgasoft.github.io/echarty/
88 stars 3 forks source link

Method for initializing echart with highlighted series applied? #20

Closed yogat3ch closed 2 years ago

yogat3ch commented 2 years ago

Hi @helgasoft, I've been scouring the echarts options to find an option that can be set on a parallel chart that will style a particular series line as bold, similar to how the dispatchAction({type:'highlight', seriesName: 'Series1'}) method does. Do you know of a way to make a particular seriesName highlighted upon instantiation that can later be unhighlighted by the downplay action?

helgasoft commented 2 years ago

It's a dirty game of event handling. Here is one example, not with series, but with series' lines. Two lines are chosen and their indexes are saved in a JS array. Then, thru events, once the mouse hits any chart line, both pre-highlighted lines will be downplayed.

p <- ec.init( js= 'window.idxs = [3,10];',
   parallelAxis= ec.paxis(mtcars, cols=c('gear','cyl','hp','carb')),
   series= list(list(
     type= 'parallel', smooth=TRUE, colorBy= 'data',
     emphasis= list(lineStyle= list(width=4, opacity= 1)),
     data= ec.data(mtcars)
   ))
) |> ec.theme('dark-mushroom')
p$x$on <- list(
  list(event= 'finished', handler= htmlwidgets::JS("function (event) {
    if (window.idxs.length>0)
      this.dispatchAction({ type: 'highlight', dataIndex: window.idxs }); 
    }")
  ),
  list(event='mousemove', handler=htmlwidgets::JS("function (event) {
    if (window.idxs.length>0)
      this.dispatchAction({ type: 'downplay', dataIndex: window.idxs });
    window.idxs= []; }")
  )
)
p
yogat3ch commented 2 years ago

@helgasoft Ahhh, thanks for the reprex! I didn't realize it could only be enabled by the dispatchAction event. The p$x$on feature is super useful to know about for performing an action once it's loaded.

Thank you so much 🙏