feat: new theme guide

docs/assets/guide/menu.json

@@ -544,18 +544,25 @@
             "en": "Theme"
           },
           "children": [
+            {
+              "path": "Theme_Concept_and_Design_Rules",
+              "title": {
+                "zh": "主题概念和设计规范",
+                "en": "Theme Concept and Design Rules"
+              }
+            },
             {
               "path": "Theme",
               "title": {
-                "zh": "图表主题",
-                "en": "Chart Theme"
+                "zh": "主题配置",
+                "en": "Theme Configuration"
               }
             },
             {
               "path": "Color_Theme",
               "title": {
-                "zh": "色板",
-                "en": "Color Palette"
+                "zh": "色板配置",
+                "en": "Color Palette Configuration"
               }
             },
             {

docs/assets/guide/zh/tutorial_docs/Theme/Theme.md

@@ -1,6 +1,6 @@
-# 图表主题
+# 主题配置
 
-图表主题（Theme）是 VChart 的一种强大特性，它提供了统一的配置方式来控制图表的全局样式、色板、图元、系列和组件样式等。使用图表主题能够让你的图表样式在整个项目中更具有统一性和可复用性，提升开发效率。
+如上节所述，图表主题（Theme）是 VChart 的一种强大特性，它提供了统一的配置方式来控制图表的全局样式、色板、图元、系列和组件样式等。使用图表主题能够让你的图表样式在整个项目中更具有统一性和可复用性，提升开发效率。
 
 下面将详细介绍 VChart 的图表主题配置。
 
@@ -120,7 +120,7 @@ interface ITheme {
   }
   ```
   在 VChart 内部逻辑中，`ITheme.mark`的每个成员将**按照图元类型**合并到每个系列的各个图元的 spec 中。
-- `ITheme.markByName`: 全局 mark 样式属性，按 mark 名称索引，优先级更高。  
+- `ITheme.markByName`: 全局 mark 样式属性，按 mark 名称索引，优先级更高。
   这个配置项十分便于对多个系列的一些公共配置进行修改。其类型`IGlobalMarkThemeByName`定义如下：
 
   ```ts

docs/src/markdown.tsx

@@ -9,6 +9,7 @@ import hljs from 'highlight.js';
 import 'highlight.js/styles/atom-one-light.css';
 
 const markdownParser = MarkdownIt({
+  html: true,
   highlight: function (str, lang) {
     if (lang && hljs.getLanguage(lang)) {
       try {

packages/vchart/__tests__/runtime/browser/test-page/pie.ts

@@ -1,3 +1,4 @@
+import { isMobile } from 'react-device-detect';
 import { default as VChart } from '../../../../src/index';
 
 const spec = {
@@ -317,296 +318,16 @@ const spec = {
   rose: {
     clipByLayout: true
   },
-  dataKey: ['20001']
+  dataKey: ['20001'],
+  tooltip: {
+    renderMode: 'canvas'
+  }
 };
 
-const vchart = new VChart(spec as any, { dom: document.getElementById('chart') as HTMLElement });
+const vchart = new VChart(spec as any, {
+  dom: document.getElementById('chart') as HTMLElement,
+  mode: isMobile ? 'mobile-browser' : 'desktop-browser'
+});
 vchart.renderAsync();
 
 window['vchart'] = vchart;
-
-setTimeout(() => {
-  vchart.updateSpec({
-    type: 'pie',
-    categoryField: '20001',
-    valueField: '230719190940041',
-    data: [
-      {
-        id: 'data',
-        values: [
-          {
-            '20001': '器具-东北',
-            '230719190940041': '407333.6141357422',
-            '230719190940044': '器具',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '椅子-东北',
-            '230719190940041': '366799.0764160156',
-            '230719190940044': '椅子',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '复印机-东北',
-            '230719190940041': '337993.04010009766',
-            '230719190940044': '复印机',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '书架-东北',
-            '230719190940041': '295175.3292236328',
-            '230719190940044': '书架',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '电话-东北',
-            '230719190940041': '280637.64530944824',
-            '230719190940044': '电话',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '桌子-东北',
-            '230719190940041': '184567.76220703125',
-            '230719190940044': '桌子',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '配件-东北',
-            '230719190940041': '180783.90380859375',
-            '230719190940044': '配件',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '收纳具-东北',
-            '230719190940041': '162163.54042816162',
-            '230719190940044': '收纳具',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '设备-东北',
-            '230719190940041': '136781.42694091797',
-            '230719190940044': '设备',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '用具-东北',
-            '230719190940041': '74156.23627090454',
-            '230719190940044': '用具',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '信封-东北',
-            '230719190940041': '50332.65993499756',
-            '230719190940044': '信封',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '用品-东北',
-            '230719190940041': '47610.72386550903',
-            '230719190940044': '用品',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '纸张-东北',
-            '230719190940041': '47254.48011779785',
-            '230719190940044': '纸张',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '装订机-东北',
-            '230719190940041': '45179.95973491669',
-            '230719190940044': '装订机',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '美术-东北',
-            '230719190940041': '25795.55990600586',
-            '230719190940044': '美术',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '系固件-东北',
-            '230719190940041': '23673.776067733765',
-            '230719190940044': '系固件',
-            '230719190940047': '东北'
-          },
-          {
-            '20001': '标签-东北',
-            '230719190940041': '15328.740070343018',
-            '230719190940044': '标签',
-            '230719190940047': '东北'
-          }
-        ],
-        transform: [
-          {
-            type: 'fields',
-            options: {
-              fields: {
-                '20001': {
-                  alias: '图例项 ',
-                  domain: [
-                    '器具-东北',
-                    '椅子-东北',
-                    '复印机-东北',
-                    '书架-东北',
-                    '电话-东北',
-                    '桌子-东北',
-                    '配件-东北',
-                    '收纳具-东北',
-                    '设备-东北',
-                    '用具-东北',
-                    '信封-东北',
-                    '用品-东北',
-                    '纸张-东北',
-                    '装订机-东北',
-                    '美术-东北',
-                    '系固件-东北',
-                    '标签-东北'
-                  ]
-                },
-                '230719190940041': {
-                  alias: '销售额'
-                },
-                '230719190940044': {
-                  alias: '子类别'
-                },
-                '230719190940047': {
-                  alias: '地区'
-                }
-              }
-            }
-          }
-        ]
-      }
-    ],
-    outerRadius: 0.75,
-    label: {
-      visible: true,
-      overlap: {
-        hideOnHit: true
-      },
-      style: {},
-      color: null,
-      strokeOpacity: 1,
-      strokeWidth: 0,
-      position: 'outside'
-    },
-    color: {
-      field: '20001',
-      type: 'ordinal',
-      range: [
-        '#2E62F1',
-        '#4DC36A',
-        '#FF8406',
-        '#FFCC00',
-        '#4F44CF',
-        '#5AC8FA',
-        '#003A8C',
-        '#B08AE2',
-        '#FF6341',
-        '#98DD62',
-        '#07A199',
-        '#87DBDD',
-        '#2E62F1',
-        '#4DC36A',
-        '#FF8406',
-        '#FFCC00',
-        '#4F44CF'
-      ],
-      specified: {}
-    },
-    legends: [
-      {
-        type: 'discrete',
-        orient: 'right',
-        position: 'start',
-        visible: true,
-        maxWidth: 257,
-        hover: false,
-        maxCol: 1,
-        title: {
-          textStyle: {
-            fontSize: 12,
-            fill: '#6F6F6F'
-          }
-        },
-        item: {
-          spaceRow: 0,
-          spaceCol: 0,
-          padding: {
-            top: 4,
-            bottom: 4,
-            left: 4,
-            right: 22
-          },
-          background: {
-            style: {
-              fillOpacity: 0.001
-            }
-          },
-          label: {
-            style: {
-              fontSize: 12,
-              fill: '#6F6F6F'
-            }
-          },
-          shape: {
-            style: {
-              symbolType: 'square'
-            }
-          }
-        },
-        pager: {
-          textStyle: {},
-          handler: {
-            style: {},
-            state: {
-              disable: {}
-            }
-          }
-        },
-        padding: {
-          top: 0,
-          bottom: 0,
-          left: 16,
-          right: 0
-        }
-      }
-    ],
-    hover: {
-      enable: true
-    },
-    select: {
-      enable: true
-    },
-    pie: {
-      state: {
-        hover: {
-          cursor: 'pointer',
-          fillOpacity: 0.8,
-          stroke: '#58595B',
-          lineWidth: 1,
-          zIndex: 500,
-          outerRadius: 0.8
-        },
-        selected: {
-          cursor: 'pointer',
-          fillOpacity: 1,
-          stroke: '#58595B',
-          lineWidth: 1,
-          outerRadius: 0.8
-        },
-        selected_reverse: {
-          fillOpacity: 0.3,
-          strokeWidth: 0.3
-        }
-      },
-      clipByLayout: true
-    },
-    background: 'rgba(255, 255, 255, 0)',
-    rose: {
-      clipByLayout: true
-    },
-    dataKey: ['20001']
-  });
-}, 1000);