chore: 补充官网阶梯图demo (#2000)

* chore: 补充官网阶梯图demo

* chore: 修复曲线单测

---------

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>

Author: tangying1027

packages/f2/test/components/line/line.test.tsx

@@ -383,6 +383,44 @@ describe('折线图', () => {
     });
 
     it('曲线', async () => {
+      const data = [
+        {
+          time: '2016-08-08 00:00:00',
+          tem: 10,
+        },
+        {
+          time: '2016-08-08 00:10:00',
+          tem: 22,
+        },
+        {
+          time: '2016-08-08 00:30:00',
+          tem: 20,
+        },
+        {
+          time: '2016-08-09 00:35:00',
+          tem: 26,
+        },
+        {
+          time: '2016-08-09 01:00:00',
+          tem: 20,
+        },
+        {
+          time: '2016-08-09 01:20:00',
+          tem: 26,
+        },
+        {
+          time: '2016-08-10 01:40:00',
+          tem: 28,
+        },
+        {
+          time: '2016-08-10 02:00:00',
+          tem: 20,
+        },
+        {
+          time: '2016-08-10 02:20:00',
+          tem: 18,
+        },
+      ];
       const context = createContext('曲线');
       const chartRef = { current: null };
       const lineRef = { current: null };

site/.dumi/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "**/*"
+  ]
+}

site/examples/line/line/demo/meta.json

@@ -19,6 +19,11 @@
       "title": "曲线",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_4f0ff1/afts/img/A*LU4qRJrOSQkAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "step.jsx",
+      "title": "阶梯",
+      "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/nnBatWjRpi6HtWmjwdPd4/line_test_tsx_zhexiantu_jichuzhexiantu_jietitu_1_snap.png"
+    },
     {
       "filename": "pan.jsx",
       "title": "折线图平移",

site/examples/line/line/demo/step.jsx

@@ -0,0 +1,70 @@
+import { Axis, Canvas, Chart, Line } from '@antv/f2';
+
+const data = [];
+
+[
+  {
+    time: '2016-08-01',
+    tem: 15,
+    type: 'start',
+  },
+  {
+    time: '2016-08-02',
+    tem: 22,
+    type: 'start',
+  },
+  {
+    time: '2016-08-03',
+    tem: 15,
+    type: 'start',
+  },
+  {
+    time: '2016-08-04',
+    tem: 26,
+    type: 'start',
+  },
+  {
+    time: '2016-08-05',
+    tem: 20,
+    type: 'start',
+  },
+  {
+    time: '2016-08-06',
+    tem: 26,
+    type: 'start',
+  },
+].map((d) => {
+  data.push(d);
+  data.push({ ...d, tem: d.tem + 15, type: 'middle' });
+  data.push({ ...d, tem: d.tem + 30, type: 'end' });
+});
+
+const context = document.getElementById('container').getContext('2d');
+const { props } = (
+  <Canvas context={context}>
+    <Chart data={data}>
+      <Axis
+        field="time"
+        tickCount={2}
+        style={{
+          label: {
+            align: 'between',
+          },
+        }}
+      />
+      <Axis field="tem" tickCount={5} max={60} />
+      <Line
+        x="time"
+        y="tem"
+        color="type"
+        shape={{
+          field: 'type',
+          range: ['step-start', 'step-middle', 'step-end'],
+        }}
+      />
+    </Chart>
+  </Canvas>
+);
+
+const canvas = new Canvas(props);
+canvas.render();