diff --git a/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md b/docs/assets/examples/en/pictogram-chart/pictogram-guwen.md
index 86fd02b5f8..9332ec46a8 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: '#fff',
+      fontSize: 34,
+      fontFamily: font2,
+      stroke: '#228822',
+      strokeOpacity: 1,
+      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..2a54a7c893 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: '#fff',
+      fontSize: 34,
+      fontFamily: font2,
+      stroke: '#228822',
+      strokeOpacity: 1,
+      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 {