From 7e13e8f28030af39db4b00d65d627deb7d471fb7 Mon Sep 17 00:00:00 2001
From: hustcc <i@hust.cc>
Date: Tue, 24 Sep 2024 18:21:07 +0800
Subject: [PATCH] docs: add national day image

---
 .../interesting/interesting/demo/meta.json    |  8 ++++
 .../interesting/interesting/demo/national.ts  | 47 +++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 site/examples/interesting/interesting/demo/national.ts

diff --git a/site/examples/interesting/interesting/demo/meta.json b/site/examples/interesting/interesting/demo/meta.json
index 0b08660b16..6b6f654715 100644
--- a/site/examples/interesting/interesting/demo/meta.json
+++ b/site/examples/interesting/interesting/demo/meta.json
@@ -35,6 +35,14 @@
         "en": "Timeline"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NUHAS79kw-kAAAAAAAAAAAAADmJ7AQ/fmt.webp"
+    },
+    {
+      "filename": "national.ts",
+      "title": {
+        "zh": "国庆节头像",
+        "en": "National Image"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8RvJQJzRMMsAAAAAAAAAAAAADmJ7AQ/fmt.webp"
     }
   ]
 }
diff --git a/site/examples/interesting/interesting/demo/national.ts b/site/examples/interesting/interesting/demo/national.ts
new file mode 100644
index 0000000000..42a0ed9654
--- /dev/null
+++ b/site/examples/interesting/interesting/demo/national.ts
@@ -0,0 +1,47 @@
+import { Chart } from '@antv/g2';
+
+const SIZE = 256;
+
+const chart = new Chart({
+  container: 'container',
+  width: SIZE,
+  height: SIZE,
+});
+
+const FLAG_TEMPLATE = [
+  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*FpxcQI7WEusAAAAAAAAAAAAADmJ7AQ/original',
+  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rx6ST7V6cA0AAAAAAAAAAAAADmJ7AQ/original',
+  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7rKcTJiP1rMAAAAAAAAAAAAADmJ7AQ/original',
+  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*_GUISa64kgYAAAAAAAAAAAAADmJ7AQ/original',
+  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Wwy8TJAoCeUAAAAAAAAAAAAADmJ7AQ/original',
+  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DphFRIpOYWQAAAAAAAAAAAAADmJ7AQ/original',
+];
+
+// 换成你自己的，可以使用远程 CDN 地址，也可以使用 Base64 编码
+const MY_PHOTO =
+  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*vYY6RrxEWKwAAAAAAAAAAAAADmJ7AQ/original';
+
+chart
+  .image()
+  .data([{ x: 0.5, y: 0.5 }])
+  .encode('x', 'x')
+  .encode('y', 'y')
+  .encode('src', MY_PHOTO)
+  .encode('size', SIZE)
+  .axis(false)
+  .tooltip(false);
+
+chart
+  .image()
+  .data([{ x: 0.5, y: 0.5 }])
+  .encode('x', 'x')
+  .encode('y', 'y')
+  .encode(
+    'src',
+    () => FLAG_TEMPLATE[Math.floor(Math.random() * FLAG_TEMPLATE.length)],
+  )
+  .encode('size', SIZE)
+  .axis(false)
+  .tooltip(false);
+
+chart.render();