docs: optimize demo

docs/assets/examples/en/pictogram-chart/pictogram-bagua.md

@@ -10,7 +10,7 @@ option: pictogramChart
 
 # SVG Taiji Bagua Symbol Diagram
 
-Contributed by [xilzy](https://github.com/xilzy)
+> Contributed by [xilzy](https://github.com/xilzy)
 
 The Taiji Bagua Symbol Diagram illustrates the elements of the Early Heaven Bagua (Xiantian Bagua). At its core lies the Taiji symbol, surrounded by a middle layer of eight trigram symbols and an outermost layer displaying their corresponding symbolic patterns. Each trigram symbol pattern corresponds to a specific Five Elements attribute. By using the pictographic diagram, viewers can quickly grasp the layout and elemental distribution of the Early Heaven Bagua, offering a valuable reference for its study and analysis. Hovering the mouse over the legend reveals the distribution of a particular elemental attribute, while hovering over the shapes in the diagram displays the name of the element associated with that shape.
 
@@ -112,8 +112,8 @@ const spec = {
       },
       stroke: '#000000', // Border color: Black
       lineWidth: 2,
-      pickable: datum => datum.name !== 'line',
-      visible: datum => datum.id !== 'path-198'
+      pickable: datum => datum.name !== 'Line',
+      visible: datum => datum => !datum.attributes?.d?.startsWith('M0 0L1024 0L1024 1024L0 1024')
     },
     state: {
       active: {

docs/assets/examples/en/pictogram-chart/pictogram-chinamap.md

@@ -1,7 +1,7 @@
 ---
 category: examples
 group: pictogram chart
-title: Map of China eating spicy degree pictograph  
+title: Map of China eating spicy degree pictograph
 keywords: pictogramChart,map,comparison,china
 order: 26-6
 cover: https://cdn.jsdelivr.net/gh/UC-web291/picture_storing/5.gif
@@ -10,11 +10,12 @@ option: pictogramChart
 
 # Chinese Map Pictogram - A Glance at the Spiciness Level in Chinese Provinces
 
-contributed by Qian_Shark
+> Contributed by Qian_Shark
 
 The classification information of different regions in China can be displayed through pictograms, and color mapping can be carried out according to different categories of spicy food, from strong to weak colors, more and more cold tones, while supporting legend hover interactive display of province information.
 
 ## Key Configurations
+
 - In the SVG file, configure the name attribute for the graphic elements. Then, in the chart configuration, you can specify the element styles through the name configuration.
 - Register SVG resources using the VChart.registerSVG interface.
 - Declare the registered SVG name using the svg attribute.
@@ -75,123 +76,123 @@ const chinamap_data = [
   { name: '澳门特别行政区', category: 'bronze', level: '🌶' },
   { name: '台湾省', category: 'bronze', level: '🌶' }
 ];
-      const spec = {
-        // The chart type is pictograph
-        type: 'pictogram',
-        padding: 0,
-        data: {
-          // Unique identifier of the data
-          id: 'data',
-          // Data value
-          values: chinamap_data,
-        },
-        color: {
-          specified: {
-             // master
-            MVP:'rgb(73, 3, 3)',
-            // diamond
-            diamond:'rgb(250, 8, 8)',
-            //  gold
-            gold:'rgb(250, 77, 8)',
-            // silver
-            silver:'rgb(228, 170, 64)',
-            // bronze
-            bronze:'rgb(198, 238, 53)',
-            // The color of undefined categories is white
-            undefined: 'white'
-          },
-          // Series fields are categories
-          field: 'category'
-        },
-        // Series fields are categories
-        seriesField: 'category',
-        //  The name field is the name
-        nameField: 'name',
-        valueField: 'level',
-        // SVG graphic name used
-        svg: 'chinamap',
-        pictogram: {
-          style: {
-            fill: {
-              // Fill color Use color to map the color. The fields are categories
-              scale: 'color',
-              field: 'category'
-            },
-          cursor: 'pointer'
-          },
-          state: {
-            //  The fill color of the legend hover is white
-            legend_hover_reverse: {
-              fill: 'white',
-            },
-            // The effect of making the province map "spit out" when hovering
-            hover: {
-            lineWidth: 3,
-            stroke:'rgb(0, 0, 0)',
-            shadowBlur: 80, 
-            shadowColor: 'rgb(0, 0, 0)', 
-          },
-          hover_reverse:{
-            opacity: 0.1
-          }
-        }
+const spec = {
+  // The chart type is pictograph
+  type: 'pictogram',
+  padding: 0,
+  data: {
+    // Unique identifier of the data
+    id: 'data',
+    // Data value
+    values: chinamap_data
+  },
+  color: {
+    specified: {
+      // master
+      MVP: 'rgb(73, 3, 3)',
+      // diamond
+      diamond: 'rgb(250, 8, 8)',
+      //  gold
+      gold: 'rgb(250, 77, 8)',
+      // silver
+      silver: 'rgb(228, 170, 64)',
+      // bronze
+      bronze: 'rgb(198, 238, 53)',
+      // The color of undefined categories is white
+      undefined: 'white'
+    },
+    // Series fields are categories
+    field: 'category'
+  },
+  // Series fields are categories
+  seriesField: 'category',
+  //  The name field is the name
+  nameField: 'name',
+  valueField: 'level',
+  // SVG graphic name used
+  svg: 'chinamap',
+  pictogram: {
+    style: {
+      fill: {
+        // Fill color Use color to map the color. The fields are categories
+        scale: 'color',
+        field: 'category'
+      },
+      cursor: 'pointer'
+    },
+    state: {
+      //  The fill color of the legend hover is white
+      legend_hover_reverse: {
+        fill: 'white'
+      },
+      // The effect of making the province map "spit out" when hovering
+      hover: {
+        lineWidth: 3,
+        stroke: 'rgb(0, 0, 0)',
+        shadowBlur: 80,
+        shadowColor: 'rgb(0, 0, 0)'
+      },
+      hover_reverse: {
+        opacity: 0.1
+      }
+    }
+  },
+
+  //  Chart title
+  title: {
+    text: 'Spicy food in China at a glance'
+  },
+  legends: [
+    {
+      orient: 'top',
+      position: 'middle',
+      padding: {
+        bottom: 12
       },
-
-        //  Chart title
-        title: {
-          text: 'Spicy food in China at a glance'
-        },
-        legends: [
-          {
-            orient: 'top',
-            position: 'middle',
-            padding: {
-              bottom: 12
-            },
-            visible: true,
-            field: 'category',
-            filter: false,
-            select: false,
-            data: items => {
-              return items.map(item => {
-                item.shape.outerBorder = {
-                  stroke: item.shape.fill,
-                  distance: 2,
-                  lineWidth: 1
-                };
-                return item;
-              });
-            },
-          }
-        ],
-      };
-
-      // VChart.registerPictogramChart();
-      // VChart.default.registerSVG('chinamap', shape);
-
-      VChart.registerSVG('chinamap', shape);
-
-      const vchart = new VChart(spec, { dom: CONTAINER_ID  });
-      // Listen for legend item hover events
-      vchart.on('legendItemHover', e => {
-        // Gets the legend item name of the hover
-        const hoveredName = e?.value?.data?.label;
-        if (hoveredName) {
-          // Update the chart status by setting the color of the legend item that is not hovering
-          vchart.updateState({
-            legend_hover_reverse: {
-              filter: d => {
-                // Finds the category of the current data item
-                const category = chinamap_data.find(chinamap_data => chinamap_data.name === d.data?.name)?.category;
-                // Return true if the class exists and is not equal to the legend item name of the hover, fals
-                return category && category!== hoveredName;
-              }
-          }
+      visible: true,
+      field: 'category',
+      filter: false,
+      select: false,
+      data: items => {
+        return items.map(item => {
+          item.shape.outerBorder = {
+            stroke: item.shape.fill,
+            distance: 2,
+            lineWidth: 1
+          };
+          return item;
         });
       }
+    }
+  ]
+};
+
+// VChart.registerPictogramChart();
+// VChart.default.registerSVG('chinamap', shape);
+
+VChart.registerSVG('chinamap', shape);
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+// Listen for legend item hover events
+vchart.on('legendItemHover', e => {
+  // Gets the legend item name of the hover
+  const hoveredName = e?.value?.data?.label;
+  if (hoveredName) {
+    // Update the chart status by setting the color of the legend item that is not hovering
+    vchart.updateState({
+      legend_hover_reverse: {
+        filter: d => {
+          // Finds the category of the current data item
+          const category = chinamap_data.find(chinamap_data => chinamap_data.name === d.data?.name)?.category;
+          // Return true if the class exists and is not equal to the legend item name of the hover, fals
+          return category && category !== hoveredName;
+        }
+      }
     });
+  }
+});
 
-  // Listen for the legend item unhover event
+// Listen for the legend item unhover event
 vchart.on('legendItemUnHover', e => {
   // Update the chart state to restore the color of all legend items to the original color
   vchart.updateState({

docs/assets/examples/en/pictogram-chart/pictogram-heart.md

@@ -10,7 +10,7 @@ option: pictogramChart
 
 # Pictogram - Medical Schematic Diagram of the Heart
 
-Contributed by [Zero1017](https://github.com/Eomnational)
+> Contributed by [Zero1017](https://github.com/Eomnational)
 
 A pictogram is a form of data visualization that uses graphic symbols (usually in SVG format) to represent specific values or categories in data. This example demonstrates how to use a pictogram to present a medical schematic diagram of the heart, distinguishing different parts of the heart by different colors.
 

docs/assets/examples/en/pictogram-chart/pictogram-mall.md

@@ -10,6 +10,8 @@ option: pictogramChart
 
 # SVG Shopping Mall Tenant Layout
 
+> Contributed by Echo
+
 Shopping Mall Tenant Layout pictogram displays the distribution of different business formats within the mall. Each business format is represented by a specific shape, and the color of the shape indicates the type of business format. By using pictograms, we can quickly understand the mall's layout and business format distribution, providing a reference for mall operation and management. Hovering the mouse over the legend reveals the distribution of a specific business format; hovering the mouse over a shape in the diagram displays the name of the store corresponding to that shape.
 
 ## Key Configurations
@@ -105,7 +107,7 @@ const mall_data = [
   { name: 'Kmart', category: 'shopping' },
   { name: 'AMC Theatres', category: 'entertainment' },
   { name: 'Sears', category: 'shopping' }
-]
+];
 
 // Define the chart configuration object
 const spec = {
@@ -115,7 +117,7 @@ const spec = {
     // The unique identifier of the data
     id: 'data',
     // The value of the data
-    values: mall_data,
+    values: mall_data
   },
   color: {
     specified: {
@@ -134,7 +136,7 @@ const spec = {
       // The color of the infrastructure category is dark olive green
       infrastructure: '#556B2F',
       // The color of the undefined category is white
-      undefined: 'white',
+      undefined: 'white'
     },
     // The field for color mapping is category
     field: 'category'
@@ -156,7 +158,7 @@ const spec = {
     state: {
       // The fill color of the legend item when hovering is gray
       legend_hover_reverse: {
-        fill: '#ccc',
+        fill: '#ccc'
       }
     }
   },
@@ -185,9 +187,9 @@ const spec = {
           };
           return item;
         });
-      },
+      }
     }
-  ],
+  ]
 };
 
 VChart.registerSVG('mall', shape);

docs/assets/examples/zh/pictogram-chart/pictogram-bagua.md

@@ -10,7 +10,7 @@ option: pictogramChart
 
 # 象形图-太极八卦图
 
-Contributed by [xilzy](https://github.com/xilzy)
+> 由 [xilzy](https://github.com/xilzy) 贡献
 
 太极八卦象图展示了先天八卦的各个元素。核心位置为太极图案，中间层为 8 个卦象，最外层为八个卦象的符号图案。卦象符号图案都有对应的五行属性。通过使用象形图，我们可以快速了解先天八卦的布局和元素分布情况，为先天八卦研究和分析提供参考。 鼠标悬停在图例上，可以显示一类属性元素的分布；鼠标悬停在图中的形状上，可以显示该形状对应的元素名称。
 
@@ -114,8 +114,8 @@ const spec = {
       },
       stroke: '#000000', // 边框颜色为黑色
       lineWidth: 2,
-      pickable: datum => datum.name !== 'line',
-      visible: datum => datum.id !== 'path-198'
+      pickable: datum => datum.name !== 'Line',
+      visible: datum => datum => !datum.attributes?.d?.startsWith('M0 0L1024 0L1024 1024L0 1024')
     },
     state: {
       active: {