From 2c109aba8a04172fc06bf8d8239bfef25d7ad154 Mon Sep 17 00:00:00 2001
From: Howard Zhang <zamhown@live.com>
Date: Mon, 31 Mar 2025 21:04:47 +0800
Subject: [PATCH 1/3] feat: add a title to guwen demo

---
 .../en/pictogram-chart/pictogram-guwen.md     | 32 +++++++++++++++----
 .../zh/pictogram-chart/pictogram-guwen.md     | 32 +++++++++++++++----
 2 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md b/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
index 86fd02b5f8..e2c3473e0c 100644
--- a/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
+++ b/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
@@ -42,7 +42,7 @@ VCHART_MODULE.registerPictogramChart();
 /** --Delete the above code when using in business context-- */
 
 // Use the fetch API to get SVG graphic data
-const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/lisao.svg');
+const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/lisao_2.svg');
 const shape = await response.text();
 
 const base_data = [
@@ -119,12 +119,15 @@ const data = [
   }
 ];
 
+const font1 = 'DFKai-SB, BiauKai, KaiTi, STKaiti, "楷体", "楷体_GB2312", serif';
+const font2 = 'serif, "楷体", "楷体_GB2312", "KaiTi"';
+
 const spec = {
   type: 'pictogram',
-  width: 373.5,
+  width: 418.5,
   height: 500.4,
   background: {
-    image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/lisao.png'
+    image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/lisao_2.png'
   },
   padding: 0,
   data: {
@@ -163,7 +166,7 @@ const spec = {
     filter: false,
     layoutType: 'absolute',
     top: 5,
-    right: 0,
+    right: 45,
     background: {
       visible: true,
       style: {
@@ -195,6 +198,21 @@ const spec = {
       }
     }
   },
+  title: {
+    text: ['离', '骚'],
+    orient: 'right',
+    layoutType: 'absolute',
+    top: 196,
+    right: 0,
+    textStyle: {
+      fill: '#555',
+      fontSize: 34,
+      fontFamily: font2,
+      stroke: '#009A00',
+      strokeOpacity: 0.2,
+      lineWidth: 2
+    }
+  },
   tooltip: {
     enterable: true,
     updateElement: (tooltipElement, actualTooltip, params) => {
@@ -206,7 +224,7 @@ const spec = {
           iframeDoc.body.innerHTML = `
     <style>
       html{
-        font-family: "楷体", "楷体_GB2312", "KaiTi", serif;
+        font-family: ${font2};
       }
       body{
         margin: 0;
@@ -228,10 +246,10 @@ const spec = {
       h1{
         margin: 8px 0;
         text-align: center;
-        font-family: DFKai-SB, BiauKai, KaiTi, STKaiti, "楷体", "楷体_GB2312", serif;
+        font-family: ${font1};
         font-size: 32;
         span {
-          font-family: "楷体", "楷体_GB2312", "KaiTi", serif;
+          font-family: ${font2};
           font-size: 18;
         }
         a {
diff --git a/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md b/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md
index f88031cb9e..72541ffcdf 100644
--- a/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md
+++ b/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md
@@ -44,7 +44,7 @@ VCHART_MODULE.registerPictogramChart();
 /** --在业务中使用时请删除以上代码-- */
 
 // 加载SVG文件（确保路径正确）
-const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/lisao.svg');
+const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/lisao_2.svg');
 const shape = await response.text();
 
 const base_data = [
@@ -121,12 +121,15 @@ const data = [
   }
 ];
 
+const font1 = 'DFKai-SB, BiauKai, KaiTi, STKaiti, "楷体", "楷体_GB2312", serif';
+const font2 = 'serif, "楷体", "楷体_GB2312", "KaiTi"';
+
 const spec = {
   type: 'pictogram',
-  width: 373.5,
+  width: 418.5,
   height: 500.4,
   background: {
-    image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/lisao.png'
+    image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/lisao_2.png'
   },
   padding: 0,
   data: {
@@ -165,7 +168,7 @@ const spec = {
     filter: false,
     layoutType: 'absolute',
     top: 5,
-    right: 0,
+    right: 45,
     background: {
       visible: true,
       style: {
@@ -197,6 +200,21 @@ const spec = {
       }
     }
   },
+  title: {
+    text: ['离', '骚'],
+    orient: 'right',
+    layoutType: 'absolute',
+    top: 196,
+    right: 0,
+    textStyle: {
+      fill: '#555',
+      fontSize: 34,
+      fontFamily: font2,
+      stroke: '#009A00',
+      strokeOpacity: 0.2,
+      lineWidth: 2
+    }
+  },
   tooltip: {
     enterable: true,
     updateElement: (tooltipElement, actualTooltip, params) => {
@@ -208,7 +226,7 @@ const spec = {
           iframeDoc.body.innerHTML = `
     <style>
       html{
-        font-family: "楷体", "楷体_GB2312", "KaiTi", serif;
+        font-family: ${font2};
       }
       body{
         margin: 0;
@@ -230,10 +248,10 @@ const spec = {
       h1{
         margin: 8px 0;
         text-align: center;
-        font-family: DFKai-SB, BiauKai, KaiTi, STKaiti, "楷体", "楷体_GB2312", serif;
+        font-family: ${font1};
         font-size: 32;
         span {
-          font-family: "楷体", "楷体_GB2312", "KaiTi", serif;
+          font-family: ${font2};
           font-size: 18;
         }
         a {

From 7eeb371869c55230be7846151da869b2027ee908 Mon Sep 17 00:00:00 2001
From: Howard Zhang <zamhown@live.com>
Date: Mon, 31 Mar 2025 21:05:43 +0800
Subject: [PATCH 2/3] fix: add a title to guwen demo

---
 docs/assets/examples/en/pictogram-chart/pictogram-guwen.md | 2 +-
 docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md b/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
index e2c3473e0c..26bdc03e8c 100644
--- a/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
+++ b/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
@@ -205,7 +205,7 @@ const spec = {
     top: 196,
     right: 0,
     textStyle: {
-      fill: '#555',
+      fill: '#777',
       fontSize: 34,
       fontFamily: font2,
       stroke: '#009A00',
diff --git a/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md b/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md
index 72541ffcdf..cd0ca573ff 100644
--- a/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md
+++ b/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md
@@ -207,7 +207,7 @@ const spec = {
     top: 196,
     right: 0,
     textStyle: {
-      fill: '#555',
+      fill: '#777',
       fontSize: 34,
       fontFamily: font2,
       stroke: '#009A00',

From 5d417406af000de65f4f3a0b5875d7d0a822ca02 Mon Sep 17 00:00:00 2001
From: Howard Zhang <zamhown@live.com>
Date: Mon, 31 Mar 2025 21:12:10 +0800
Subject: [PATCH 3/3] fix: add a title to guwen demo

---
 docs/assets/examples/en/pictogram-chart/pictogram-guwen.md | 6 +++---
 docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md b/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
index 26bdc03e8c..9332ec46a8 100644
--- a/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
+++ b/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
@@ -205,11 +205,11 @@ const spec = {
     top: 196,
     right: 0,
     textStyle: {
-      fill: '#777',
+      fill: '#fff',
       fontSize: 34,
       fontFamily: font2,
-      stroke: '#009A00',
-      strokeOpacity: 0.2,
+      stroke: '#228822',
+      strokeOpacity: 1,
       lineWidth: 2
     }
   },
diff --git a/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md b/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md
index cd0ca573ff..2a54a7c893 100644
--- a/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md
+++ b/docs/assets/examples/zh/pictogram-chart/pictogram-guwen.md
@@ -207,11 +207,11 @@ const spec = {
     top: 196,
     right: 0,
     textStyle: {
-      fill: '#777',
+      fill: '#fff',
       fontSize: 34,
       fontFamily: font2,
-      stroke: '#009A00',
-      strokeOpacity: 0.2,
+      stroke: '#228822',
+      strokeOpacity: 1,
       lineWidth: 2
     }
   },