docs: add demo (#2367)

Co-authored-by: lkd01632719 <[email protected]>

Author: i11I04i

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

@@ -75,6 +75,14 @@
         "en": "Slider"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*xZAVSKcWzrwAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "style-callback.js",
+      "title": {
+        "zh": "通过回调函数指定折线样式",
+        "en": "Set line style through callback"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*p1n4RI9YynkAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

site/examples/statistics/line/demo/style-callback.js

@@ -0,0 +1,45 @@
+import { Line } from '@ant-design/plots';
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoLine = () => {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    asyncFetch();
+  }, []);
+
+  const asyncFetch = () => {
+    fetch('https://gw.alipayobjects.com/os/bmw-prod/c48dbbb1-fccf-4a46-b68f-a3ddb4908b68.json')
+      .then((response) => response.json())
+      .then((json) => setData(json))
+      .catch((error) => {
+        console.log('fetch data failed', error);
+      });
+  };
+  const config = {
+    data,
+    xField: 'date',
+    yField: 'value',
+    colorField: 'type',
+    axis: {
+      y: {
+        labelFormatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
+      },
+    },
+    scale: { color: { range: ['#30BF78', '#F4664A', '#FAAD14'] } },
+    style: {
+      lineWidth: 2,
+      lineDash: (data) => {
+        if (data[0].type === 'register') return [4, 4];
+      },
+      opacity: (data) => {
+        if (data[0].type !== 'register') return 0.5;
+      },
+    },
+  };
+
+  return <Line {...config} />;
+};
+
+ReactDOM.render(<DemoLine />, document.getElementById('container'));