[Bug] 水波图动画问题
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 221
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 26
Description
Version
2.0.1-alpha.5
Link to Minimal Reproduction
vscreen
Steps to Reproduce
配置1:
const spec = {
theme: {},
type: 'liquid',
valueField: 'measurePercent',
data: [
{
id: 'data',
values: [
{
current: 0.8138999999999998,
name: 'Sales Proportion',
emptyName: '',
percent: '-',
measurePercent: 0.8138999999999998,
measureValue: 0.8138999999999998
}
]
}
],
reverse: false,
indicator: {
pickable: false,
visible: true,
fixed: true,
title: {
space: 5,
visible: false,
style: {
visible: false,
text: '-',
fontSize: 12,
fill: '#FFF',
fontWeight: 'normal',
fontFamily: 'D-DIN',
pickable: false
}
},
content: [
{
space: 5,
visible: true,
style: {
visible: true,
text: '81.39%',
fontSize: 28,
fill: '#FFF',
fontWeight: 'bold',
fontFamily: 'D-DIN-Bold',
pickable: false
}
},
{
space: 5,
visible: true,
style: {
visible: true,
text: 'Sales Proportion',
fontSize: 14,
fill: '#FFF',
fontWeight: 'normal',
fontFamily: 'D-DIN',
pickable: false
}
}
]
},
maskShape: 'circle',
liquidBackground: {
style: {
fill: 'rgba(5,10,21,0.2)',
lineDash: [0],
lineWidth: 1,
fillOpacity: 1,
stroke: 'rgba(255, 255, 255, 0.3)',
scaleX: 1,
scaleY: 1,
scaleCenter: ['50%', '50%']
}
},
liquidOutline: {
style: {
lineDash: [0],
lineWidth: 1,
stroke: 'rgba(255, 255, 255, 0.15)',
scaleX: 1,
scaleY: 1,
scaleCenter: ['50%', '50%']
}
},
outlineMargin: 0,
outlinePadding: 20,
region: [
{
clip: true
}
],
background: 'rgba(0, 0, 0, 1)',
animation: true,
tooltip: {
visible: true,
renderMode: 'canvas',
mark: {
visible: true
},
style: {
panel: {
padding: {
top: 5,
bottom: 10,
left: 10,
right: 10
},
backgroundColor: 'rgba(8, 28, 48, 0.95)',
border: {
color: '#CFCFCF',
width: 0,
radius: 2
},
shadow: {
x: 0,
y: 4,
blur: 12,
spread: 0,
color: 'rgba(0, 0, 0, 0.2)'
}
},
titleLabel: {
fontSize: 14,
fontColor: '#FFF',
fontWeight: 'bold',
fontFamily: 'D-DIN',
align: 'left',
lineHeight: 18
},
keyLabel: {
fontSize: 12,
fontColor: 'rgba(255,255,255,0.65)',
fontWeight: 'normal',
fontFamily: 'SourceHanSansCN-Normal',
align: 'left',
lineHeight: 18
},
valueLabel: {
fontSize: 12,
fontColor: '#FFF',
fontWeight: 'normal',
fontFamily: 'D-DIN',
align: 'right',
lineHeight: 18
},
shape: {
size: 10,
spacing: 10,
shapeLineWidth: 0
},
spaceRow: 10
},
dimension: {
visible: true
}
},
crosshair: {
xField: {
line: {
style: {
fillOpacity: 1,
fill: 'rgba(80,156,255,0.1)'
}
},
visible: false
},
yField: {
line: {
style: {
fillOpacity: 1,
fill: 'rgba(80,156,255,0.1)'
}
},
visible: false
}
},
morph: {
enable: false
},
plotLayout: {
clip: false
},
padding: 15,
select: {
enable: true
},
liquid: {
style: {
fill: {
gradient: 'linear',
x0: 0,
x1: 0,
y1: 0,
y0: 1,
stops: [
{
offset: 0,
color: 'rgba(0,110,255,0.2)'
},
{
offset: 1,
color: 'rgb(0,110,255)'
}
]
}
}
},
animationAppear: {
liquid: {
loop: false,
duration: 1000,
easing: 'circInOut',
channel: {
wave: {
from: 0,
to: 1
},
height: {
from: 0
}
}
},
liquidGroup: {
loop: false,
duration: 1000,
easing: 'circInOut',
channel: {
dy: {}
}
}
},
animationNormal: {
liquid: {
loop: true,
startTime: 0,
delayAfter: 0,
duration: 1000,
easing: 'circInOut',
controlOptions: {
immediatelyApply: false
},
channel: {
wave: {
from: 0,
to: 1
}
}
}
},
animationEnter: false,
animationUpdate: false,
animationExit: {},
hash: '4818fdb7fb2a00d92afc00d55121b2fa',
width: 400,
height: 225
};
配置2:
const spec1 = {
theme: {},
type: 'liquid',
valueField: 'measurePercent',
data: [
{
id: 'data',
values: [
{
current: 0.8138999999999998,
name: 'Sales Proportion',
emptyName: '',
percent: '-',
measurePercent: 0.8138999999999998,
measureValue: 0.8138999999999998
}
]
}
],
reverse: false,
indicator: {
pickable: false,
visible: true,
fixed: true,
title: {
space: 5,
visible: false,
style: {
visible: false,
text: '-',
fontSize: 12,
fill: '#FFF',
fontWeight: 'normal',
fontFamily: 'D-DIN',
pickable: false
}
},
content: [
{
space: 5,
visible: true,
style: {
visible: true,
text: '81.39%',
fontSize: 28,
fill: '#FFF',
fontWeight: 'bold',
fontFamily: 'D-DIN-Bold',
pickable: false
}
},
{
space: 5,
visible: true,
style: {
visible: true,
text: 'Sales Proportion',
fontSize: 14,
fill: '#FFF',
fontWeight: 'normal',
fontFamily: 'D-DIN',
pickable: false
}
}
]
},
maskShape: 'circle',
liquidBackground: {
style: {
fill: 'rgba(5,10,21,0.2)',
lineDash: [0],
lineWidth: 1,
fillOpacity: 1,
stroke: 'rgba(255, 255, 255, 0.3)',
scaleX: 1,
scaleY: 1,
scaleCenter: ['50%', '50%']
}
},
liquidOutline: {
style: {
lineDash: [0],
lineWidth: 1,
stroke: 'rgba(255, 255, 255, 0.15)',
scaleX: 1,
scaleY: 1,
scaleCenter: ['50%', '50%']
}
},
outlineMargin: 0,
outlinePadding: 20,
region: [
{
clip: true
}
],
background: 'rgba(0, 0, 0, 1)',
animation: true,
tooltip: {
visible: true,
renderMode: 'canvas',
mark: {
visible: true
},
style: {
panel: {
padding: {
top: 5,
bottom: 10,
left: 10,
right: 10
},
backgroundColor: 'rgba(8, 28, 48, 0.95)',
border: {
color: '#CFCFCF',
width: 0,
radius: 2
},
shadow: {
x: 0,
y: 4,
blur: 12,
spread: 0,
color: 'rgba(0, 0, 0, 0.2)'
}
},
titleLabel: {
fontSize: 14,
fontColor: '#FFF',
fontWeight: 'bold',
fontFamily: 'D-DIN',
align: 'left',
lineHeight: 18
},
keyLabel: {
fontSize: 12,
fontColor: 'rgba(255,255,255,0.65)',
fontWeight: 'normal',
fontFamily: 'SourceHanSansCN-Normal',
align: 'left',
lineHeight: 18
},
valueLabel: {
fontSize: 12,
fontColor: '#FFF',
fontWeight: 'normal',
fontFamily: 'D-DIN',
align: 'right',
lineHeight: 18
},
shape: {
size: 10,
spacing: 10,
shapeLineWidth: 0
},
spaceRow: 10
},
dimension: {
visible: true
}
},
crosshair: {
xField: {
line: {
style: {
fillOpacity: 1,
fill: 'rgba(80,156,255,0.1)'
}
},
visible: false
},
yField: {
line: {
style: {
fillOpacity: 1,
fill: 'rgba(80,156,255,0.1)'
}
},
visible: false
}
},
morph: {
enable: false
},
plotLayout: {
clip: false
},
padding: 15,
select: {
enable: true
},
liquid: {
style: {
fill: {
gradient: 'linear',
x0: 0,
x1: 0,
y1: 0,
y0: 1,
stops: [
{
offset: 0,
color: 'rgba(0,110,255,0.2)'
},
{
offset: 1,
color: 'rgb(0,110,255)'
}
]
}
}
},
animationAppear: {
liquid: {
loop: false,
duration: 1000,
easing: 'circInOut',
channel: {
wave: {
from: 0,
to: 1
}
}
}
},
animationNormal: {
liquid: {
loop: true,
startTime: 0,
delayAfter: 0,
duration: 1000,
easing: 'circInOut',
controlOptions: {
immediatelyApply: false
},
channel: {
wave: {
from: 0,
to: 1
},
height: {
from: 0
}
}
},
liquidGroup: {
loop: true,
startTime: 0,
delayAfter: 0,
duration: 1000,
easing: 'circInOut',
controlOptions: {
immediatelyApply: false
},
channel: {
dy: {
from: params => {
console.log('params----', params);
let liquidY = 0;
const { height: liquidBackHeight, startY } = chartInstance
.getChart()
.getAllSeries()[0]
._markAttributeContext.getLiquidBackPosAndSize();
if (spec.reverse) {
liquidY = 0;
} else {
liquidY = liquidBackHeight;
}
return liquidY + startY;
}
}
}
}
},
animationEnter: false,
animationUpdate: false,
animationExit: {},
hash: 'c5a892f7372a76be5fdd76a2367aa9e6',
width: 400,
height: 225
};
Current Behavior
配置1效果：
配置2效果：
Expected Behavior
生长动画从下往上
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the two TypeScript liquid-chart configurations in the issue and compare their animationAppear, animationNormal, and liquidGroup settings. Reproduce the behavior using the provided VChart version and minimal reproduction, then trace the liquid animation entry point. Done means the growth animation consistently proceeds from bottom to top for the reported configuration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100