From 0056ca6b795b0adb54b273f54f1d28634f1f1c35 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Sun, 8 Oct 2023 20:16:22 +0800
Subject: [PATCH] chore(charts): Add autoFit demo for Line

---
 packages/charts/src/Line/demo/auto-fit.tsx | 36 ++++++++++++++++++++++
 packages/charts/src/Line/index.md          |  2 ++
 2 files changed, 38 insertions(+)
 create mode 100644 packages/charts/src/Line/demo/auto-fit.tsx

diff --git a/packages/charts/src/Line/demo/auto-fit.tsx b/packages/charts/src/Line/demo/auto-fit.tsx
new file mode 100644
index 000000000..81b1eca78
--- /dev/null
+++ b/packages/charts/src/Line/demo/auto-fit.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import { Line } from '@oceanbase/charts';
+
+export default () => {
+  const [data, setData] = useState([]);
+  const asyncFetch = () => {
+    fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
+      .then(response => response.json())
+      .then(json => setData(json))
+      .catch(error => {
+        console.log('fetch data failed', error);
+      });
+  };
+  useEffect(() => {
+    asyncFetch();
+  }, []);
+  const config = {
+    data,
+    xField: 'year',
+    yField: 'value',
+    seriesField: 'category',
+    xAxis: {
+      type: 'time',
+    },
+    yAxis: {
+      label: {
+        // 数值格式化为千分位
+        formatter: v => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, s => `${s},`),
+      },
+    },
+    style: {
+      height: '50vh',
+    },
+  };
+  return <Line {...config} />;
+};
diff --git a/packages/charts/src/Line/index.md b/packages/charts/src/Line/index.md
index 857d6bce5..149dc8eed 100644
--- a/packages/charts/src/Line/index.md
+++ b/packages/charts/src/Line/index.md
@@ -13,6 +13,8 @@ nav:
 
 <code src="./demo/multiple.tsx" title="多折线图"></code>
 
+<code src="./demo/auto-fit.tsx" title="自适应容器高度" description="调整浏览器窗口高度即可验证"></code>
+
 <code src="./demo/tooltip-scrollable.tsx" title="Tooltip 可滚动" description="适用于 Tooltip 项较多、超出图表的场景，可通过 `tooltip.scrollable: true` 配置进行开启。"></code>
 
 ## API