feat(scene4): add scatter chart

VisActor · May 28, 2024 · 5586005 · 5586005
1 parent 3bbe7f6
commit 5586005
Show file tree

Hide file tree

Showing 3 changed files with 236 additions and 2 deletions.
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx
@@ -1189,7 +1189,7 @@ export const scene3: ISceneSpec = {
       characterActions: [
         {
           action: 'disappear',
-          startTime: 3500,
+          startTime: 6500,
           duration: 700,
           payload: {
             animation: {

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx
@@ -9,6 +9,9 @@ import RectTexture from '../../assets/scene4/matrix.png';
 import DecorationImage from '../../assets/scene4/decoration.png';
 import BgDecorationImage from '../../assets/scene4/bg-decoration.png';
 
+const getCurve = (x: number) => {
+  return 0.0694 * x * x - 9.3056 * x + 321.1111; // 回归方程
+};
 export const scene4Characters: ICharacterSpec[] = [
   {
     type: 'ImageComponent',
@@ -116,6 +119,93 @@ export const scene4Characters: ICharacterSpec[] = [
       }
     }
   },
+  {
+    type: 'ScatterChart',
+    id: 'scatter',
+    zIndex: 1,
+    position: {
+      left: 200,
+      top: 320,
+      width: 500,
+      height: 120
+    },
+    options: {
+      panel: {
+        fill: '#ffffff',
+        stroke: 'black',
+        lineWidth: 1
+      },
+      data: [
+        {
+          id: 'data',
+          values: [
+            { x: 104, y: 10, type: 'A' },
+            { x: 98, y: 10, type: 'A' },
+            { x: 93, y: 10, type: 'A' },
+            { x: 90, y: 10, type: 'A' },
+            { x: 76, y: 10, type: 'A' },
+            { x: 70, y: 10, type: 'A' },
+            { x: 63, y: 10, type: 'A' }
+          ]
+        }
+      ],
+      seriesSpec: [
+        {
+          matchInfo: { specIndex: 'all' },
+          spec: {
+            background: 'white',
+            xField: 'x',
+            yField: 'y',
+            seriesField: 'type',
+            point: {
+              style: {
+                size: 8,
+                fill: `#E05F38`
+              }
+            },
+            axes: [
+              {
+                orient: 'bottom',
+                bandPadding: 0
+              }
+            ],
+            animationUpdate: {
+              easing: 'cubicInOut',
+              duration: 1000
+            }
+          }
+        }
+      ],
+      componentSpec: [
+        {
+          specKey: 'axes',
+          matchInfo: { orient: 'bottom', bandPadding: 0, paddingInner: 0, paddingOuter: 0 },
+          spec: {
+            bandPadding: 0,
+            paddingInner: 0,
+            paddingOuter: 0,
+            min: 0,
+            max: 110,
+            type: 'linear',
+            tick: { visible: false },
+            label: { visible: false },
+            grid: { visible: false },
+            domainLine: { visible: true, style: { stroke: 'black', lineWidth: 4 } }
+          }
+        },
+        {
+          specKey: 'axes',
+          matchInfo: { orient: 'left' },
+          spec: {
+            visible: false,
+            min: 0,
+            max: 100
+          }
+        }
+      ],
+      attribute: {}
+    }
+  },
   {
     type: 'LineComponent',
     id: 'scene4-text-zh-line',
@@ -219,6 +309,22 @@ export const scene4Characters: ICharacterSpec[] = [
       }
     }
   },
+  {
+    type: 'ImageComponent',
+    id: 'scene4-bg-decoration',
+    zIndex: 1,
+    position: {
+      left: 180,
+      top: 680,
+      width: 1200,
+      height: 140
+    },
+    options: {
+      graphic: {
+        image: BgDecorationImage
+      }
+    }
+  },
   {
     type: 'ImageComponent',
     id: 'scene4-bg-decoration',
@@ -374,6 +480,33 @@ export const scene4: ISceneSpec = {
               easing: 'easeInOutQuad'
             }
           }
+        },
+        {
+          // TODO: startOffset
+          startTime: 2500,
+          duration: 700,
+          action: 'disappear',
+          payload: {
+            graphic: {
+              width: 500,
+              height: 120
+            },
+            animation: {
+              duration: 700
+            }
+          }
+        },
+        {
+          // TODO: startOffset
+          startTime: 5000,
+          duration: 500,
+          action: 'appear',
+          payload: {
+            animation: {
+              duration: 500,
+              effect: 'fade'
+            }
+          }
         }
       ]
     },
@@ -546,6 +679,107 @@ export const scene4: ISceneSpec = {
           }
         }
       ]
+    },
+    {
+      characterId: 'scatter',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 2500,
+          duration: 500,
+          payload: {
+            animation: {
+              duration: 500,
+              easing: 'cubicOut',
+              fade: {
+                opacity: 1,
+                isBaseOpacity: true,
+                easing: 'linear'
+              }
+            }
+          }
+        },
+        {
+          action: 'update',
+          startTime: 3500,
+          duration: 1000,
+          payload: {
+            id: 'data',
+            data: [
+              { x: 104, y: 10, type: 'A' },
+              { x: 98, y: 10, type: 'A' },
+              { x: 93, y: 10, type: 'A' },
+              { x: 90, y: 10, type: 'A' },
+              { x: 76, y: 10, type: 'A' },
+              { x: 70, y: 10, type: 'A' },
+              { x: 63, y: 10, type: 'A' }
+            ].map(v => {
+              return {
+                sourceValue: v,
+                targetValue: {
+                  ...v,
+                  y: getCurve(v.x)
+                }
+              };
+            })
+          }
+        },
+        {
+          action: 'disappear',
+          startTime: 5000,
+          duration: 500,
+          payload: {
+            animation: {
+              duration: 500,
+              effect: 'fade'
+            }
+          }
+        }
+      ]
     }
   ]
 };
+
+scene4.actions.forEach(({ characterActions }) => {
+  characterActions.push({
+    action: 'disappear',
+    startTime: 6000,
+    duration: 500,
+    payload: {
+      animation: {
+        duration: 500,
+        effect: 'fade'
+      }
+    }
+  });
+});
+
+scene4.actions.push({
+  characterId: 'scene3-background',
+  characterActions: [
+    {
+      action: 'style',
+      startTime: 6000,
+      duration: 500,
+      payload: {
+        graphic: {
+          scaleY: 0
+        },
+        animation: {
+          duration: 500
+        }
+      }
+    },
+    {
+      action: 'disappear',
+      startTime: 6000,
+      duration: 500,
+      payload: {
+        animation: {
+          duration: 500,
+          effect: 'fade'
+        }
+      }
+    }
+  ]
+});
diff --git a/packages/vstory/src/dsl/story-processor/processorMap/scatter.ts b/packages/vstory/src/dsl/story-processor/processorMap/scatter.ts
@@ -9,7 +9,7 @@ import { bounceProcessor } from '../vchart/bounce';
 export const scatterProcessorMap = {
   add: addProcessor,
   addPatch: addProcessor,
-  updateProcessor,
+  update: updateProcessor,
 
   bounce: bounceProcessor,