[Help wanted] The best practice for highlight selection for graphic element

[尹超 <yi...@163.com>]

Hi，ECharts community:

Sorry for the interruption. I'm working on a dataviz project recently, and I found the ECharts is a great pleasure to use, thanks for your awesome work.

Then I got a little problem, most of the charts in my project need to selectable, that is, their graphic elements should be able to change to a "highlight" state and keep that state if selected (as the image shows below, the "environment" link is highlighted):

The highlight 1. need to change both color and border; 2. the label should be selectable; 3. support bar, donut and sankey, treemap diagram

I checked the doc and the search engine, but got no luck for a perfect solution, Here are my findings combined with my ideas:

- Use the event ('click') API and use 'setOption' to change property like 'itemStyle'

    - Only a limited set of grahpic element is supported; the border style can not be applied for some diagram types; the label may not be clickable.

- Use a canvas/DOM overlay, or custom series to draw custom graphic element

    - The shape data may be not easy to get for diagrams like sankey (not as easy as "barLayout"); The cost is high; The layer management may be tricky

- Tap into the ZRender and change the existing element

    - I thought this is more promising, In fact, I have written a demo: https://codesandbox.io/s/echarts-selection-visik?fontsize=14&hidenavigation=1&theme=dark, however, this method still has some problem: 

       -  In this demo I use a lot of undocumented API, and the way to access graphic element is very different for other diagram types.

       - The label won't receive click event, so I still can't do the selection :(




So in conslusion, my question are:

1. Is there a better way (or best practice) to highlight(change the style of) the graphic element for different type of diagram? 

2. The label of some diagram types is not clickable, any solution for this?




Thank you so much

Charles Yin




Stay hungry, stay foolish. ——Steve Jobs(1955~2011)

Re: [Help wanted] The best practice for highlight selection for graphic element

[Ovilia <ov...@gmail.com>]

Hi Chao,

The demo seems quite near to the solution. Basically, you need to listen to
the click events and call setOption to update the colors and border colors.
If you find some chart types that don't have an option for certain colors,
please let me know.

Click events on labels are not provided for now and there is no easy way to
do so. We are considering providing such function in the next major release
which still takes a few more months. So I'm afraid for now we don't have a
better solution for this.

Thanks

Wenli


On Sun, Feb 9, 2020 at 12:43 PM 尹超 <yi...@163.com> wrote:

> Hi，ECharts community:
>
> Sorry for the interruption. I'm working on a dataviz project recently, and
> I found the ECharts is a great pleasure to use, thanks for your awesome
> work.
>
> Then I got a little problem, most of the charts in my project need to
> selectable, that is, their graphic elements should be able to change to a
> "highlight" state and keep that state if selected (as the image shows
> below, the "environment" link is highlighted):
>
> The highlight *1. need to change both color and border; 2. the label
> should be selectable; 3. support bar, donut and sankey, treemap **diagram*
>
> I checked the doc and the search engine, but got no luck for a perfect
> solution, Here are my findings combined with my ideas:
>
> - Use the event ('click') API and use 'setOption' to change property like
> 'itemStyle'
>
>     - Only a limited set of grahpic element is supported; the border style
> can not be applied for some diagram types; the label may not be clickable.
>
> - Use a canvas/DOM overlay, or custom series to draw custom graphic element
>
>     - The shape data may be not easy to get for diagrams like sankey (not
> as easy as "barLayout"); The cost is high; The layer management may be
> tricky
>
> - Tap into the ZRender and change the existing element
>
>     - I thought this is more promising, In fact, I have written a demo:
> https://codesandbox.io/s/echarts-selection-visik?fontsize=14&hidenavigation=1&theme=dark,
> however, this method still has some problem:
>
>        -  In this demo I use a lot of undocumented API, and the way to
> access graphic element is very different for other diagram types.
>
>        - The label won't receive click event, so I still can't do the
> selection :(
>
>
> *So in conslusion, my question are:*
>
> 1. Is there a better way (or best practice) to highlight(change the style
> of) the graphic element for different type of diagram?
>
> 2. The label of some diagram types is not clickable, any solution for this?
>
>
> Thank you so much
>
> Charles Yin
>
>
> *Stay hungry, stay foolish. ——Steve Jobs(1955~2011)*
>