VChart
VChart copied to clipboard
VisActor
[Bug] 水波图动画问题
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
