Incubator-echarts: [feature] [topic] label enhance

Created on 28 Oct 2019 · 5Comments · Source: apache/incubator-echarts

Since there are many problems with the label, we should do some unified work to enhance the user experience of label. The issues referenced below are mainly related to three aspects question:

label overlapping
label show automatically with zoom
multiple label, the label configuration is an array
add click event for the label

For example, the following picture shows the label overlapping in themeRiver:
themeRiver_overlapping

en new-feature label

Source

deqingli

👍1

Most helpful comment

Thanks @deqingli

The enhacement of label is a long game. The final destination of label enhacement is all labels on the view are clear enough to represent the data.

Here are some of my thoughts about how to achieve it:

First of all we should separate label creation from the data elements. That means all labels are all individual elements and can be handled easier.
Provide label guide line(currently we call it labelLine) for all series.
A general label layout algorithm which has following rules:
- Labels won't overlap. And may have a gap between labels.
- Labels have local minimum distance to the original position after layouted.
- Align labels based on given configuration.
- Calculate a priority for all labels and hide the unimportant labels if the space is not enough for displaying all.

pissang on 5 Nov 2019

👍6 🚀1 ❤1 🎉1

All 5 comments

Thanks @deqingli

The enhacement of label is a long game. The final destination of label enhacement is all labels on the view are clear enough to represent the data.

Here are some of my thoughts about how to achieve it:

First of all we should separate label creation from the data elements. That means all labels are all individual elements and can be handled easier.
Provide label guide line(currently we call it labelLine) for all series.
A general label layout algorithm which has following rules:
- Labels won't overlap. And may have a gap between labels.
- Labels have local minimum distance to the original position after layouted.
- Align labels based on given configuration.
- Calculate a priority for all labels and hide the unimportant labels if the space is not enough for displaying all.

pissang on 5 Nov 2019

👍6 🚀1 ❤1 🎉1

Any progress?
I definitely need a way to automatically hide/show labels automatically when zooming bar charts.

zevero on 23 Sep 2020

Hi @zevero, It has been implemented in https://github.com/apache/incubator-echarts/pull/12911

pissang on 24 Sep 2020

❤1 👍1

Great! I tested in 5.0.0-alpha.2

Smarter label placement in Pie:
It looks so much nicer now! But the algorithm is not so smart. It does not take into account the _pie chunk size_. Currently it discards just those labels, that would overlap. However in my opinion the algorithm should rank the pie chunk size and prioritize labels for the biggest ones. Afterwards it could allow smaller ones to be included...

Bar chart hideOverlap option.
So much better. However label: { padding, height, width } options seem to be ignored, as I wanted to have a bit more space and thereby viewer labels.
Additionally mouseover tooltip disappears directly over the label.

zevero on 2 Oct 2020

👍1

Sorry for the late replay. Thanks a lot for the suggestions. @zevero

It looks so much nicer now! But the algorithm is not so smart. It does not take into account the pie chunk size. Currently it discards just those labels, that would overlap. However in my opinion the algorithm should rank the pie chunk size and prioritize labels for the biggest ones. Afterwards it could allow smaller ones to be included...

Currently, there is a strategy that ranks the bounding box of the element. Perhaps sectors in pie are not suitable in this ranking strategy. Will improve it in the next version.