feat(line): endLabel animation #13246
Merged
+1,348
−215
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…allbacks
BREAKING CHANGE: May not be compatible with 4.x.
Since default symbol animation with line charts has been changed in 5.0 to be
displayed when the clipPath of the line goes through the data point,
animationDelay callback now has two meanings:
animationDelay: function (i) { return ... }
(1) If `i` is `null`, the callback should return the delay of the overall
series animation, that is, the delay before the line clipPath starts
changing.
(2) If `i` is a `number`, the callback should return the delay of the certain
delay of each data item.
In ECharts 4.x, however, since the label animation shows along with the line
animation, only the `number` form is used.
echarts-bot
bot
added
the
PR: awaiting doc
|
Congratulations! Your PR has been merged. Thanks for your contribution! 👍 |
|
@pissang @Ovilia 2.将图例和曲线一并显示，可读性更高一些，比如阿里在g2-plot中是这样处理的： 在面积图又是这样的效果（https://g2plot-v1.antv.vision/zh/examples/area/stacked#area-label ）： 3.目前5.0的尾部跟随效果在开/关 legend时对应的数据序列不会关闭。例如下图在关闭series0时，对应数据未隐藏，同时series1的曲线图及辅助点错位，tooltip也不正。另外 endLabel的formatter不支持富文本。
代码如下 <html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/facePrint.js"></script>
</head>
<body>
<style>
html,
body {
width: 100%;
height:100vh;
}
#main0 {
width: 100%;
height: 600px;
}
</style>
<div id="main0"></div>
<script>
require(["echarts"], function (echarts) {
var chart = echarts.init(document.getElementById("main0"));
var config = {
type: "line",
endLabel: {
show: true,
valueAnimation: true,
formatter: (param) =>
`${param.seriesName}: ${param.value}`,
},
emphasis: {
endLabel: {
color: "red",
},
},
};
var option = {
xAxis: {
data: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
],
},
yAxis: {},
tooltip:{
trigger:'axis'
},
legend:{},
series: [
{
name: "series0",
data: [
645,
-271,
-550,
-1580,
-2295,
"-",
-1195,
-2295,
-1799,
-1188,
-354,
459,
],
...config,
},
{
name: "series11",
data: [
472,
828,
1679,
"-",
2818,
2220,
2220,
2220,
1570,
1109,
'-',
],
...config,
},
],
};
chart.setOption(option);
});
</script>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Brief Information
This pull request is in the type of:
What does this PR do?
Support line
endLabelanimation so as to show the data changes over time.Note the difference between
connectNullsbeingtrueandfalse.Situation A:
connectNulls: falseendLabelis displayed on the last non-NaN data (that is'-'for data in option) whenconnectNullsis false.Situation B:
connectNulls: trueendLabelis displayed on the interpolated internal data whenconnectNullsis false.Line Series ClipPath Fixing
This PR also fixes the clipPath used for initial animation.
Usage
Are there any API changes?
A new option
series(line).endLabelis supported, which is almost the same asseries.labelonly that it has the following default values:showis for enablingendLabelvalueAnimationis for value interpolationdistanceis the distance between label text to the symbol itemRelated test cases or examples to use the new APIs
Added a new test case
test/line-endLabel.htmland updatedtest/line-animation.html.Others
Merging options
TODOs
Limitations
These things should be fixed in future PRs.
endLabeldoes not support polar system for this PR because I didn't find enough use case for this.smoothistrue.