You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/07/05 07:23:48 UTC
[GitHub] [incubator-echarts] pissang opened a new pull request #12911: [5.0][FEATURE] Label enhancement and state transition
pissang opened a new pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911
# [5.0][FEATURE] Label enhancement and state transition
## Brief Information
This pull request introduces following main features:
1. Better displayed labels.
2. Introduce `labelLayout` for more flexible label layouting.
3. Support `labelLine` on all series.
4. State transition.
State transition feature is developed in this branch because it's related to label on many codes.
## 1. Better displayed labels.
It includes several strategies to make sure th labels is displayed nice and neat by default in most cases.
### 1) Smarter color strategy
It has better strategy to calculate the `fill` and `stroke` color based on the color of underlying elements, background color and label position.
#### Text inside the rect
<img src="https://user-images.githubusercontent.com/841551/86526867-ca4e7780-becb-11ea-96a8-9ec38e5e2976.gif" width="600" />
#### Text outside
<img src="https://user-images.githubusercontent.com/841551/86526877-e8b47300-becb-11ea-8382-c041b05ba679.gif" width="600" />
### 2) Smarter label placement in Pie.
Related issues:
[#6050](https://github.com/apache/incubator-echarts/issues/6050)
#### An extreme case from Gallery
Case from https://gallery.echartsjs.com/editor.html?c=xSkDzAue4G
##### Before:
<img src="https://user-images.githubusercontent.com/841551/86513570-c411ba00-be3d-11ea-88f2-e5d87a53ead4.png" width="700" />
##### After:
<img src="https://user-images.githubusercontent.com/841551/86513588-f1f6fe80-be3d-11ea-8ec0-aeb724fa12ab.png" width="700" />
##### GIF to show how labels will be hidden or truncated when it's overlapped or overflow the container.
<img src="https://user-images.githubusercontent.com/841551/86513757-61b9b900-be3f-11ea-9b71-cf5a9cbc7aa2.gif" width="700" />
## 2. Introduce `labelLayout` for more flexible overall label layout.
`labelLayout` provides more abilities for developers to tweak the labels layout after it's originally positioned by the chart itself.
It's available for all series.
### Interface Defninition
```ts
{
/**
* Overall label layout option in label layout stage.
* All series can use this config.
*/
labelLayout?: LabelLayoutOption | LabelLayoutOptionCallback
}
interface LabelLayoutOption {
/**
* If move the overlapped label. If label is still overlapped after moved.
* It will determine if to hide this label with `hideOverlap` policy.
*
* shift-x/y will keep the order on x/y
* shuffle-x/y will move the label around the original position randomly.
*/
moveOverlap?: 'shift-x'
| 'shift-y'
| 'shuffle-x'
| 'shuffle-y'
/**
* If hide the overlapped label. It will be handled after move.
* @default false
*/
hideOverlap?: boolean
/**
* If label is draggable.
* @default false
*/
draggable?: boolean
/**
* Can be absolute px number or percent string.
*/
x?: number | string
y?: number | string
/**
* offset on x based on the original position.
*/
dx?: number
/**
* offset on y based on the original position.
*/
dy?: number
/**
* Rotate degree
*/
rotate?: number
align?: ZRTextAlign
verticalAlign?: ZRTextVerticalAlign
width?: number
height?: number
// Points of label line
labelLinePoints?: number[][]
}
interface LabelLayoutOptionCallbackParams {
dataIndex: number,
dataType: string,
seriesIndex: number,
text: string
align: ZRTextAlign
verticalAlign: ZRTextVerticalAlign
/**
* Rect of related graphic element.
*/
rect: RectLike
/**
* Rect of label.
*/
labelRect: RectLike
// The original points of label line. Available in pie/funnel
labelLinePoints?: number[][]
// x: number
// y: number
}
type LabelLayoutOptionCallback = (params: LabelLayoutOptionCallbackParams) => LabelLayoutOption;
```
### Use cases of `labelLayout`
#### 1) Hide overlapped labels.
##### Usage
```js
labelLayout: {
hideOverlap: true
}
```
That's all.
##### 📈 Line Chart
Related issue [#8554](https://github.com/apache/incubator-echarts/issues/8554)
**Before**
<img src="https://user-images.githubusercontent.com/841551/86527024-6331c280-becd-11ea-982f-3e360dab4e72.png" width="600" />
**After**
<img src="https://user-images.githubusercontent.com/841551/86527009-44cbc700-becd-11ea-8566-84fe49eb2a23.png" width="600" />
##### 📊 Bar
Related issue: [#6514](https://github.com/apache/incubator-echarts/issues/6514)
**Before**
<img src="https://user-images.githubusercontent.com/31307585/29659399-c109f790-88db-11e7-8fcd-6399373ad147.png" width="600" />
**After**
<img src="https://user-images.githubusercontent.com/841551/86526987-0cc48400-becd-11ea-9202-7a850480e348.png" width="600" />
##### Graph
<img width="700" alt="graph" src="https://user-images.githubusercontent.com/841551/86525690-13e39600-bebd-11ea-9493-ee628e77b4be.gif" />
#### 2) Align labels on top.
<img width="700" alt="align-top" src="https://user-images.githubusercontent.com/841551/86525756-e6e3b300-bebd-11ea-968e-a8b36e46c478.png" />
```js
{
type: 'scatter',
...
labelLayout: {
// All label is 20px to the top edge
y: 20,
align: 'center',
// Shift on x axis sequently if label overlapped.
moveOverlap: 'shift-x',
// Hide overlapped label
hideOverlap: true
},
labelLine: {
// All series supports labelLine now.
show: true,
// length2 defines the second segement length of labelLine.
length2: 5
}
}
```
#### 3) Align labels on right.
<img width="562" alt="align-right" src="https://user-images.githubusercontent.com/841551/86525772-0975cc00-bebe-11ea-8403-bdfe58dab38b.png">
```js
{
type: 'scatter',
...
labelLayout: {
x: 500,
// Shift on y axis sequently if label overlapped.
moveOverlap: 'shift-y',
// Hide overlapped label
hideOverlap: true
},
labelLine: {
show: true,
length2: 5
}
}
```
#### 4) Adjust labelLine
If we wan't to move the labelLine under the text in pie. Like following:
<img src="https://user-images.githubusercontent.com/841551/86527159-dbe54e80-bece-11ea-8d38-370968ba882e.png" width="400" />
```js
labelLayout: function (params) {
const isLeft = params.labelRect.x < chart.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
}
}
```
Based on this callback, we can tweak the label position in a few lines. For example, add a gap between the line end and label.
```js
labelLayout: function (params) {
const isLeft = params.labelRect.x < chart.getWidth() / 2;
const points = params.labelLinePoints;
const gap = 5;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x - gap
: params.labelRect.x + params.labelRect.width + gap;
return {
labelLinePoints: points
}
}
```
<img src="https://user-images.githubusercontent.com/841551/86527206-6463ef00-becf-11ea-965c-4dc049fb53a9.png" width="400" />
#### 5) Draggable label.
## 3. Support `labelLine` on all series.
Related issues: [#11534](https://github.com/apache/incubator-echarts/issues/11534)
Label line is very useful for guiding element to related labels when labels are moved far away, like the aligned labels case above.
### 1) Auto calculated labelLine points.
The points of labelLine is calculated based on the position of label and shape of the element. To make sure the display of labelLine is nice and neat.
### 2) Support limiting labelLine angle
### 3) Optimizing smooth algorithm
## 4. State transition
It provides smoooth state transition when mouse entered / leaved the element.
#### Before:
<img alt="map-state-no-transition" src="https://user-images.githubusercontent.com/841551/86527514-04227c80-bed2-11ea-8099-ed15972dc9d4.gif" width="600" />
#### After:
<img alt="map-state-transition" src="https://user-images.githubusercontent.com/841551/86527509-efde7f80-bed1-11ea-9e7e-b7b6e22b26f0.gif" width="600" />
### Interface:
```ts
stateAnimation?: {
duration?: number
easing?: AnimationEasing
delay?: number
}
```
## 5. Other optimizations
### 1) Pie animation optimization
Related issue: [#12553](https://github.com/apache/incubator-echarts/issues/12553)
### 2) Bar animation optimization
Related issue: [#12543](https://github.com/apache/incubator-echarts/issues/12543)
### 3) Introduce dark mode.
The dark mode is inferenced from the background automatically by default. We can also specify it manually if we have image background which echarts can't pick color from.
```js
option = {
darkMode: true
}
```
As described above, the color of label will be different in dark mode.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] ducthiennguyen edited a comment on pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
ducthiennguyen edited a comment on pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911#issuecomment-716413335
Thank you @pissang for this great enhancement. I am afraid that I cannot get the `moveOverlap` to work for bar chart. Is there any way that I can use this feature with bar chart? Thank you.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] echarts-bot[bot] commented on pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911#issuecomment-654174310
Congratulations! Your PR has been merged. Thanks for your contribution! 👍
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] echarts-bot[bot] commented on pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911#issuecomment-653852418
Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout [the coding standard](https://echarts.apache.org/en/coding-standard.html) and Wiki about [How to make a pull request](https://github.com/apache/incubator-echarts/wiki/How-to-make-a-pull-request).
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] ducthiennguyen removed a comment on pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
ducthiennguyen removed a comment on pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911#issuecomment-716413335
Thank you @pissang for this great enhancement. I am afraid that I cannot get the `moveOverlap` to work for bar chart. Is there any way that I can use this feature with bar chart? Thank you.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang commented on pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
pissang commented on pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911#issuecomment-716330517
@zevero Hi, sorry for the late reply. Didn't notice it.
We have fixed this issue in the latest version.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang merged pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
pissang merged pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] ducthiennguyen commented on pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
ducthiennguyen commented on pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911#issuecomment-716416116
Thank you @pissang for this great enhancement. I am afraid that I cannot get the `moveOverlap` to work for bar chart. Is there any way that I can use this feature with bar chart? Thank you.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] pissang edited a comment on pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911#issuecomment-716330517
@zevero Hi, sorry for the late reply.
We have fixed this issue in the latest version.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] zevero commented on pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
zevero commented on pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911#issuecomment-702663605
The new label feature with hideOverlap is very cool!!!
But in version 5.0.0-alpha.2 my bar chart has a small problem. My tooltip appears only when hovering over the bar itself. It disappears when hovering on the label (which is placed in the center of the bar).
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] ducthiennguyen commented on pull request #12911: [5.0][FEATURE] Label enhancement and state transition
Posted by GitBox <gi...@apache.org>.
ducthiennguyen commented on pull request #12911:
URL: https://github.com/apache/incubator-echarts/pull/12911#issuecomment-716413335
Thank you @pissang for this great enhancement. I notice that the `moveOverlap` property is available for pie chart only, is there any way that I can do the same thing with bar chart? Thank you.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org