VChart
VChart copied to clipboard
Published
20 hours ago •
VisActor
VisActor
[Bug] bug of update animtion when update data of AreaChart
Version
no
Link to Minimal Reproduction
no need
Steps to Reproduce
const spec = {
type: "area",
animation: true,
color: {
specified: {
A: "#FFA41A",
B: "#49C9C9",
},
},
padding: {
top: 36,
right: 18,
bottom: 27.9,
},
point: {
visible: false,
},
stack: false,
animationAppear: {
point: false,
type: "clipIn",
duration: 1000,
easing: "linear",
},
animationEnter: {
point: false,
type: "clipIn",
duration: 1000,
easing: "linear",
},
animationUpdate: {
point: false,
line: {
customParameters: {
newPointAnimateType: 'clip',
},
duration: 1000,
easing: 'linear',
},
area: {
customParameters: {
newPointAnimateType: 'clip',
},
duration: 1000,
easing: 'linear',
},
},
area: {
visible: true,
style: {
fill: {
gradient: "linear",
x0: 0,
y0: 0,
x1: 0,
y1: 1,
stops: [
{
offset: 0,
color: "rgba(255, 164, 26, 0.7)",
},
{
offset: 1,
color: "rgba(73, 201, 201, 0.2)",
},
],
},
},
},
data: [
{
id: "id0",
values: [],
},
],
xField: "dist",
yField: "value",
seriesField: "type",
tooltip: {
visible: true,
trigger: ["hover", "click"],
triggerOff: "none",
activeType: ["dimension"],
},
line: {
style: {
lineWidth: 1.8,
curveType: "monotone",
},
},
crosshair: {
followTooltip: true,
xField: {
visible: true,
line: {
type: "line",
style: {
lineWidth: 1,
opacity: 1,
stroke: "#fff",
lineDash: [1, 1],
},
},
bindingAxesIndex: [1],
label: {
visible: false,
},
},
yField: {
visible: false,
},
},
axes: [
{
type: "linear",
orient: "left",
nice: true,
width: 32,
softMax: 120,
tick: {
tickCount: 6,
},
label: {
style: {
fontSize: 9,
fontFamily: "D-DIN Exp",
},
},
grid: {},
},
{
type: "linear",
orient: "bottom",
max: 0,
min: 20000,
grid: {
visible: false,
},
trimPadding: true,
domainLine: {
style: {
stroke: "rgba(255, 255,255, 0.16)",
},
},
label: {
visible: false,
},
},
],
};
const data = [
{
"dist": 19975,
"value": "114.2",
"t": 1719888115048
},
{
"dist": 19848,
"value": "114.3",
"t": 1719888115008
},
{
"dist": 19721,
"value": "114.4",
"t": 1719888114968
},
{
"dist": 19594,
"value": "114.4",
"t": 1719888114928
},
{
"dist": 19466,
"value": "114.3",
"t": 1719888114888
},
{
"dist": 19339,
"value": "114.3",
"t": 1719888114848
},
{
"dist": 19212,
"value": "114.2",
"t": 1719888114808
},
{
"dist": 19085,
"value": "114.1",
"t": 1719888114768
},
{
"dist": 18958,
"value": "113.9",
"t": 1719888114728
},
{
"dist": 18832,
"value": "113.8",
"t": 1719888114688
},
{
"dist": 18705,
"value": "113.5",
"t": 1719888114648
},
{
"dist": 18579,
"value": "113.3",
"t": 1719888114608
},
{
"dist": 18453,
"value": "113",
"t": 1719888114568
},
{
"dist": 18328,
"value": "112.8",
"t": 1719888114528
},
{
"dist": 18202,
"value": "112.5",
"t": 1719888114488
},
{
"dist": 18077,
"value": "112.3",
"t": 1719888114448
},
{
"dist": 17953,
"value": "112",
"t": 1719888114408
},
{
"dist": 17828,
"value": "111.8",
"t": 1719888114368
},
{
"dist": 17704,
"value": "111.5",
"t": 1719888114328
},
{
"dist": 17580,
"value": "111.4",
"t": 1719888114288
},
{
"dist": 17456,
"value": "111.1",
"t": 1719888114248
},
{
"dist": 17333,
"value": "110.8",
"t": 1719888114208
},
{
"dist": 17210,
"value": "110.7",
"t": 1719888114168
},
{
"dist": 17087,
"value": "110.4",
"t": 1719888114128
},
{
"dist": 16964,
"value": "110",
"t": 1719888114088
},
{
"dist": 16842,
"value": "109.7",
"t": 1719888114048
},
{
"dist": 16720,
"value": "109.5",
"t": 1719888114008
},
{
"dist": 16599,
"value": "109.3",
"t": 1719888113968
},
{
"dist": 16477,
"value": "109",
"t": 1719888113928
},
{
"dist": 16356,
"value": "108.7",
"t": 1719888113888
},
{
"dist": 16236,
"value": "108.4",
"t": 1719888113848
},
{
"dist": 16115,
"value": "108.2",
"t": 1719888113808
},
{
"dist": 15995,
"value": "108",
"t": 1719888113768
},
{
"dist": 15875,
"value": "107.7",
"t": 1719888113728
},
{
"dist": 15755,
"value": "107.4",
"t": 1719888113688
},
{
"dist": 15636,
"value": "107.2",
"t": 1719888113648
},
{
"dist": 15517,
"value": "106.9",
"t": 1719888113608
},
{
"dist": 15398,
"value": "106.6",
"t": 1719888113568
},
{
"dist": 15280,
"value": "106.3",
"t": 1719888113528
},
{
"dist": 15162,
"value": "106.1",
"t": 1719888113488
},
{
"dist": 15044,
"value": "105.8",
"t": 1719888113448
},
{
"dist": 14927,
"value": "105.5",
"t": 1719888113408
},
{
"dist": 14810,
"value": "105.2",
"t": 1719888113368
},
{
"dist": 14693,
"value": "105",
"t": 1719888113330
},
{
"dist": 14576,
"value": "104.7",
"t": 1719888113288
},
{
"dist": 14460,
"value": "104.4",
"t": 1719888113248
},
{
"dist": 14344,
"value": "104.1",
"t": 1719888113208
},
{
"dist": 14228,
"value": "103.8",
"t": 1719888113170
},
{
"dist": 14113,
"value": "103.5",
"t": 1719888113128
},
{
"dist": 13998,
"value": "103.1",
"t": 1719888113088
},
{
"dist": 13884,
"value": "102.9",
"t": 1719888113053
},
{
"dist": 13769,
"value": "102.7",
"t": 1719888113008
},
{
"dist": 13655,
"value": "102.4",
"t": 1719888112968
},
{
"dist": 13542,
"value": "102.1",
"t": 1719888112928
},
{
"dist": 13428,
"value": "101.8",
"t": 1719888112888
},
{
"dist": 13315,
"value": "101.6",
"t": 1719888112848
},
{
"dist": 13202,
"value": "101.3",
"t": 1719888112808
},
{
"dist": 13090,
"value": "101",
"t": 1719888112768
},
{
"dist": 12978,
"value": "100.6",
"t": 1719888112728
},
{
"dist": 12866,
"value": "100.3",
"t": 1719888112691
},
{
"dist": 12755,
"value": "100",
"t": 1719888112648
},
{
"dist": 12644,
"value": "99.7",
"t": 1719888112608
},
{
"dist": 12533,
"value": "99.4",
"t": 1719888112568
},
{
"dist": 12423,
"value": "99.1",
"t": 1719888112528
},
{
"dist": 12313,
"value": "98.7",
"t": 1719888112488
},
{
"dist": 12203,
"value": "98.5",
"t": 1719888112448
},
{
"dist": 12094,
"value": "98.3",
"t": 1719888112408
},
{
"dist": 11984,
"value": "97.9",
"t": 1719888112369
},
{
"dist": 11876,
"value": "97.5",
"t": 1719888112328
},
{
"dist": 11768,
"value": "97.2",
"t": 1719888112288
},
{
"dist": 11660,
"value": "97",
"t": 1719888112248
},
{
"dist": 11552,
"value": "96.7",
"t": 1719888112208
},
{
"dist": 11445,
"value": "96.4",
"t": 1719888112168
},
{
"dist": 11338,
"value": "96",
"t": 1719888112128
},
{
"dist": 11231,
"value": "95.6",
"t": 1719888112088
},
{
"dist": 11125,
"value": "95.3",
"t": 1719888112048
},
{
"dist": 11019,
"value": "95",
"t": 1719888112008
},
{
"dist": 10914,
"value": "94.7",
"t": 1719888111968
},
{
"dist": 10809,
"value": "94.4",
"t": 1719888111931
},
{
"dist": 10704,
"value": "94.1",
"t": 1719888111888
},
{
"dist": 10600,
"value": "93.8",
"t": 1719888111848
},
{
"dist": 10496,
"value": "93.4",
"t": 1719888111808
},
{
"dist": 10392,
"value": "93",
"t": 1719888111768
},
{
"dist": 10289,
"value": "92.7",
"t": 1719888111728
},
{
"dist": 10186,
"value": "92.4",
"t": 1719888111688
},
{
"dist": 10083,
"value": "92",
"t": 1719888111648
},
{
"dist": 9981,
"value": "91.8",
"t": 1719888111610
},
{
"dist": 9879,
"value": "91.4",
"t": 1719888111568
},
{
"dist": 9778,
"value": "91",
"t": 1719888111528
},
{
"dist": 9677,
"value": "90.7",
"t": 1719888111488
},
{
"dist": 9576,
"value": "90.3",
"t": 1719888111448
},
{
"dist": 9476,
"value": "90.1",
"t": 1719888111408
},
{
"dist": 9376,
"value": "89.7",
"t": 1719888111368
},
{
"dist": 9276,
"value": "89.3",
"t": 1719888111328
},
{
"dist": 9177,
"value": "89",
"t": 1719888111289
},
{
"dist": 9079,
"value": "88.7",
"t": 1719888111248
},
{
"dist": 8980,
"value": "88.3",
"t": 1719888111208
},
{
"dist": 8882,
"value": "87.9",
"t": 1719888111168
},
{
"dist": 8785,
"value": "87.5",
"t": 1719888111128
},
{
"dist": 8688,
"value": "87.1",
"t": 1719888111088
},
{
"dist": 8591,
"value": "86.8",
"t": 1719888111048
},
{
"dist": 8495,
"value": "86.4",
"t": 1719888111008
},
{
"dist": 8399,
"value": "86",
"t": 1719888110968
},
{
"dist": 8304,
"value": "85.7",
"t": 1719888110928
},
{
"dist": 8209,
"value": "85.4",
"t": 1719888110888
},
{
"dist": 8114,
"value": "85",
"t": 1719888110848
},
{
"dist": 8019,
"value": "84.6",
"t": 1719888110808
},
{
"dist": 7926,
"value": "84.2",
"t": 1719888110768
},
{
"dist": 7832,
"value": "83.8",
"t": 1719888110728
},
{
"dist": 7739,
"value": "83.5",
"t": 1719888110688
},
{
"dist": 7647,
"value": "83.2",
"t": 1719888110648
},
{
"dist": 7554,
"value": "82.7",
"t": 1719888110608
},
{
"dist": 7463,
"value": "82.3",
"t": 1719888110568
},
{
"dist": 7371,
"value": "81.9",
"t": 1719888110532
},
{
"dist": 7280,
"value": "81.5",
"t": 1719888110488
},
{
"dist": 7190,
"value": "81.1",
"t": 1719888110448
},
{
"dist": 7100,
"value": "80.7",
"t": 1719888110408
},
{
"dist": 7011,
"value": "80.3",
"t": 1719888110368
},
{
"dist": 6922,
"value": "79.9",
"t": 1719888110328
},
{
"dist": 6833,
"value": "79.5",
"t": 1719888110288
},
{
"dist": 6745,
"value": "79.1",
"t": 1719888110248
},
{
"dist": 6657,
"value": "78.8",
"t": 1719888110210
},
{
"dist": 6570,
"value": "78.3",
"t": 1719888110168
},
{
"dist": 6483,
"value": "77.9",
"t": 1719888110128
},
{
"dist": 6397,
"value": "77.4",
"t": 1719888110088
},
{
"dist": 6311,
"value": "77",
"t": 1719888110048
},
{
"dist": 6226,
"value": "76.6",
"t": 1719888110008
},
{
"dist": 6141,
"value": "76.2",
"t": 1719888109968
},
{
"dist": 6056,
"value": "75.8",
"t": 1719888109929
},
{
"dist": 5972,
"value": "75.4",
"t": 1719888109889
},
{
"dist": 5889,
"value": "74.9",
"t": 1719888109848
},
{
"dist": 5806,
"value": "74.5",
"t": 1719888109808
},
{
"dist": 5723,
"value": "74.1",
"t": 1719888109768
},
{
"dist": 5641,
"value": "73.7",
"t": 1719888109728
},
{
"dist": 5559,
"value": "73.2",
"t": 1719888109688
},
{
"dist": 5478,
"value": "72.7",
"t": 1719888109648
},
{
"dist": 5398,
"value": "72.2",
"t": 1719888109608
},
{
"dist": 5318,
"value": "71.7",
"t": 1719888109568
},
{
"dist": 5238,
"value": "71.3",
"t": 1719888109528
},
{
"dist": 5159,
"value": "70.9",
"t": 1719888109488
},
{
"dist": 5080,
"value": "70.4",
"t": 1719888109448
},
{
"dist": 5002,
"value": "69.9",
"t": 1719888109408
},
{
"dist": 4925,
"value": "69.4",
"t": 1719888109368
},
{
"dist": 4848,
"value": "69",
"t": 1719888109328
},
{
"dist": 4772,
"value": "68.5",
"t": 1719888109288
},
{
"dist": 4696,
"value": "68",
"t": 1719888109248
},
{
"dist": 4620,
"value": "67.5",
"t": 1719888109208
},
{
"dist": 4546,
"value": "67",
"t": 1719888109168
},
{
"dist": 4472,
"value": "66.5",
"t": 1719888109130
},
{
"dist": 4398,
"value": "66",
"t": 1719888109088
},
{
"dist": 4325,
"value": "65.6",
"t": 1719888109048
},
{
"dist": 4252,
"value": "65.1",
"t": 1719888109008
},
{
"dist": 4180,
"value": "64.7",
"t": 1719888108968
},
{
"dist": 4108,
"value": "64.3",
"t": 1719888108928
},
{
"dist": 4037,
"value": "63.7",
"t": 1719888108888
},
{
"dist": 3966,
"value": "63.1",
"t": 1719888108848
},
{
"dist": 3897,
"value": "62.6",
"t": 1719888108808
},
{
"dist": 3827,
"value": "62",
"t": 1719888108768
},
{
"dist": 3759,
"value": "61.5",
"t": 1719888108729
},
{
"dist": 3691,
"value": "61",
"t": 1719888108688
},
{
"dist": 3623,
"value": "60.5",
"t": 1719888108648
},
{
"dist": 3556,
"value": "60",
"t": 1719888108609
},
{
"dist": 3490,
"value": "59.5",
"t": 1719888108568
},
{
"dist": 3424,
"value": "58.9",
"t": 1719888108528
},
{
"dist": 3359,
"value": "58.3",
"t": 1719888108488
},
{
"dist": 3294,
"value": "57.8",
"t": 1719888108448
},
{
"dist": 3230,
"value": "57.2",
"t": 1719888108408
},
{
"dist": 3167,
"value": "56.7",
"t": 1719888108368
},
{
"dist": 3104,
"value": "56.2",
"t": 1719888108329
},
{
"dist": 3042,
"value": "55.7",
"t": 1719888108288
},
{
"dist": 2980,
"value": "55.2",
"t": 1719888108248
},
{
"dist": 2919,
"value": "54.6",
"t": 1719888108208
},
{
"dist": 2858,
"value": "54",
"t": 1719888108168
},
{
"dist": 2799,
"value": "53.4",
"t": 1719888108128
},
{
"dist": 2740,
"value": "52.8",
"t": 1719888108088
},
{
"dist": 2681,
"value": "52.3",
"t": 1719888108048
},
{
"dist": 2612,
"value": "51.7",
"t": 1719888108008
},
{
"dist": 2566,
"value": "51.2",
"t": 1719888107968
},
{
"dist": 2510,
"value": "50.6",
"t": 1719888107928
},
{
"dist": 2454,
"value": "50.1",
"t": 1719888107888
},
{
"dist": 2398,
"value": "49.5",
"t": 1719888107849
},
{
"dist": 2344,
"value": "48.9",
"t": 1719888107808
},
{
"dist": 2290,
"value": "48.3",
"t": 1719888107768
},
{
"dist": 2236,
"value": "47.7",
"t": 1719888107728
},
{
"dist": 2173,
"value": "47.1",
"t": 1719888107688
},
{
"dist": 2132,
"value": "46.5",
"t": 1719888107648
},
{
"dist": 2080,
"value": "45.9",
"t": 1719888107608
},
{
"dist": 2030,
"value": "45.3",
"t": 1719888107568
},
{
"dist": 1980,
"value": "44.8",
"t": 1719888107528
},
{
"dist": 1930,
"value": "44.2",
"t": 1719888107494
},
{
"dist": 1881,
"value": "43.7",
"t": 1719888107448
},
{
"dist": 1833,
"value": "43.1",
"t": 1719888107408
},
{
"dist": 1786,
"value": "42.4",
"t": 1719888107368
},
{
"dist": 1739,
"value": "41.8",
"t": 1719888107328
},
{
"dist": 1693,
"value": "41.2",
"t": 1719888107288
},
{
"dist": 1647,
"value": "40.5",
"t": 1719888107248
},
{
"dist": 1602,
"value": "40",
"t": 1719888107208
},
{
"dist": 1558,
"value": "39.4",
"t": 1719888107168
},
{
"dist": 1515,
"value": "38.8",
"t": 1719888107128
},
{
"dist": 1472,
"value": "38.2",
"t": 1719888107088
},
{
"dist": 1430,
"value": "37.6",
"t": 1719888107048
},
{
"dist": 1388,
"value": "37.1",
"t": 1719888107008
},
{
"dist": 1347,
"value": "36.5",
"t": 1719888106968
},
{
"dist": 1307,
"value": "35.9",
"t": 1719888106928
},
{
"dist": 1268,
"value": "35.3",
"t": 1719888106888
},
{
"dist": 1229,
"value": "34.6",
"t": 1719888106848
},
{
"dist": 1191,
"value": "34.1",
"t": 1719888106808
},
{
"dist": 1153,
"value": "33.5",
"t": 1719888106771
},
{
"dist": 1117,
"value": "32.8",
"t": 1719888106728
},
{
"dist": 1080,
"value": "32.2",
"t": 1719888106688
},
{
"dist": 1045,
"value": "31.6",
"t": 1719888106648
},
{
"dist": 1010,
"value": "31",
"t": 1719888106608
},
{
"dist": 976,
"value": "30.4",
"t": 1719888106568
},
{
"dist": 943,
"value": "29.8",
"t": 1719888106528
},
{
"dist": 910,
"value": "29.2",
"t": 1719888106488
},
{
"dist": 878,
"value": "28.6",
"t": 1719888106452
},
{
"dist": 846,
"value": "28",
"t": 1719888106408
},
{
"dist": 816,
"value": "27.4",
"t": 1719888106368
},
{
"dist": 786,
"value": "26.8",
"t": 1719888106328
},
{
"dist": 756,
"value": "26.2",
"t": 1719888106288
},
{
"dist": 727,
"value": "25.6",
"t": 1719888106248
},
{
"dist": 699,
"value": "25",
"t": 1719888106208
},
{
"dist": 672,
"value": "24.4",
"t": 1719888106168
},
{
"dist": 645,
"value": "23.8",
"t": 1719888106130
},
{
"dist": 619,
"value": "23.2",
"t": 1719888106088
},
{
"dist": 594,
"value": "22.6",
"t": 1719888106048
},
{
"dist": 569,
"value": "22",
"t": 1719888106008
},
{
"dist": 545,
"value": "21.4",
"t": 1719888105968
},
{
"dist": 521,
"value": "20.8",
"t": 1719888105928
},
{
"dist": 494,
"value": "20.2",
"t": 1719888105888
},
{
"dist": 476,
"value": "19.6",
"t": 1719888105848
},
{
"dist": 455,
"value": "19",
"t": 1719888105808
},
{
"dist": 434,
"value": "18.5",
"t": 1719888105768
},
{
"dist": 414,
"value": "17.9",
"t": 1719888105728
},
{
"dist": 394,
"value": "17.4",
"t": 1719888105688
},
{
"dist": 375,
"value": "16.9",
"t": 1719888105648
},
{
"dist": 357,
"value": "16.3",
"t": 1719888105608
},
{
"dist": 339,
"value": "15.8",
"t": 1719888105568
},
{
"dist": 322,
"value": "15.3",
"t": 1719888105528
},
{
"dist": 305,
"value": "14.8",
"t": 1719888105488
},
{
"dist": 289,
"value": "14.2",
"t": 1719888105448
},
{
"dist": 273,
"value": "13.7",
"t": 1719888105408
},
{
"dist": 258,
"value": "13.3",
"t": 1719888105368
},
{
"dist": 244,
"value": "12.8",
"t": 1719888105328
},
{
"dist": 230,
"value": "12.3",
"t": 1719888105288
},
{
"dist": 216,
"value": "11.9",
"t": 1719888105248
},
{
"dist": 203,
"value": "11.4",
"t": 1719888105208
},
{
"dist": 191,
"value": "11",
"t": 1719888105168
},
{
"dist": 179,
"value": "10.5",
"t": 1719888105128
},
{
"dist": 168,
"value": "10.1",
"t": 1719888105088
},
{
"dist": 157,
"value": "9.7",
"t": 1719888105048
},
{
"dist": 146,
"value": "9.3",
"t": 1719888105008
},
{
"dist": 136,
"value": "8.9",
"t": 1719888104973
},
{
"dist": 126,
"value": "8.5",
"t": 1719888104928
},
{
"dist": 117,
"value": "8.1",
"t": 1719888104888
},
{
"dist": 108,
"value": "7.7",
"t": 1719888104848
},
{
"dist": 100,
"value": "7.4",
"t": 1719888104808
},
{
"dist": 92,
"value": "7",
"t": 1719888104768
},
{
"dist": 84,
"value": "6.7",
"t": 1719888104731
},
{
"dist": 77,
"value": "6.3",
"t": 1719888104688
},
{
"dist": 70,
"value": "6",
"t": 1719888104648
},
{
"dist": 64,
"value": "5.6",
"t": 1719888104608
},
{
"dist": 58,
"value": "5.3",
"t": 1719888104568
},
{
"dist": 52,
"value": "5",
"t": 1719888104528
},
{
"dist": 46,
"value": "4.6",
"t": 1719888104488
},
{
"dist": 41,
"value": "4.3",
"t": 1719888104448
},
{
"dist": 37,
"value": "4",
"t": 1719888104408
},
{
"dist": 32,
"value": "3.7",
"t": 1719888104368
},
{
"dist": 29,
"value": "3.4",
"t": 1719888104328
},
{
"dist": 25,
"value": "3.1",
"t": 1719888104288
},
{
"dist": 22,
"value": "2.8",
"t": 1719888104248
},
{
"dist": 19,
"value": "2.5",
"t": 1719888104209
},
{
"dist": 16,
"value": "2.3",
"t": 1719888104168
},
{
"dist": 14,
"value": "2",
"t": 1719888104128
},
{
"dist": 11,
"value": "1.8",
"t": 1719888104088
},
{
"dist": 10,
"value": "1.6",
"t": 1719888104048
},
{
"dist": 8,
"value": "1.4",
"t": 1719888104008
},
{
"dist": 6,
"value": "1.2",
"t": 1719888103968
},
{
"dist": 5,
"value": "1",
"t": 1719888103928
},
{
"dist": 4,
"value": "0.9",
"t": 1719888103888
},
{
"dist": 3,
"value": "0.7",
"t": 1719888103848
},
{
"dist": 2,
"value": "0.6",
"t": 1719888103808
},
{
"dist": 1,
"value": "0.4",
"t": 1719888103728
}
]
const App = () => {
return (
<div className="content">
<VChart spec={spec} onReady={(vchart) => {
let i = 0;
setInterval(() => {
vchart.updateData('id0', data.slice(0, i))
i += 50;
}, 800)
}} />
</div>
);
};
export default App;
Current Behavior
动画卡顿
Expected Behavior
动画不卡顿
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
