Update index.js

* test: fix e2e test errors

* style: fix eslint error

* fix: fix empty string title can be visible

.all-contributorsrc

@@ -573,6 +573,51 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "RanierYu",
+      "name": "Ranier Yu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/62528887?v=4",
+      "profile": "https://github.com/RanierYu",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Zcating",
+      "name": "Zcating",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13329558?v=4",
+      "profile": "https://github.com/Zcating",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "trueLoving",
+      "name": "Aoi Kaze",
+      "avatar_url": "https://avatars.githubusercontent.com/u/44056372?v=4",
+      "profile": "https://github.com/trueLoving",
+      "contributions": [
+        "test"
+      ]
+    },
+    {
+      "login": "Simon-He95",
+      "name": "Simon He",
+      "avatar_url": "https://avatars.githubusercontent.com/u/57086651?v=4",
+      "profile": "http://simonhe.me",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "zhangpaopao0609",
+      "name": "zhangpaopao",
+      "avatar_url": "https://avatars.githubusercontent.com/u/44194929?v=4",
+      "profile": "https://study.linlove.cn/",
+      "contributions": [
+        "tool"
+      ]
     }
   ],
   "contributorsPerLine": 8,

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     'vue/no-unused-refs': 'off',
     'vue/require-component-is': 'off',
     'vue/singleline-html-element-content-newline': 'off',
+    'vue/no-v-for-template-key-on-child': 'off',
     'curly': 'off',
     'sort-imports': 'off',
     'prefer-template': 'off',
@@ -48,6 +49,7 @@ module.exports = {
     '@typescript-eslint/restrict-plus-operands': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/restrict-template-expressions': 'off',
-    '@typescript-eslint/no-invalid-this': 'off'
+    '@typescript-eslint/no-invalid-this': 'off',
+    'vue/no-deprecated-dollar-scopedslots-api': 'off'
   }
 }

.github/workflows/dispatch-renderless-theme-publish.yml

@@ -7,7 +7,7 @@ on:
       components:
         description: |
           输入需要打包的模块名称，多个以英文逗号分隔,
-          例如： `theme,renderless`
+          例如： `theme,renderless,runtime`
         required: true
         type: string
 concurrency:
@@ -80,6 +80,10 @@ jobs:
         if: contains(inputs.components, 'theme-mobile') == true
         run: pnpm build:themeMobile
 
+      - name: Run Build Runtime
+        if: contains(inputs.components, 'runtime') == true
+        run: pnpm build:runtime
+
       - name: Publish
         run: |
           pnpm pub:all

.github/workflows/test-e2e-all.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
 
       - name: Get pnpm store directory
         id: pnpm-cache
@@ -67,7 +67,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - name: Install dependencies
         run: |
           npm install -g @playwright/test

.github/workflows/test-e2e-dispatch.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
 
       - name: Get pnpm store directory
         id: pnpm-cache

.github/workflows/test-e2e-pr.yml

@@ -93,7 +93,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - name: Cache Playwright Installation
         uses: actions/cache@v3
         with:

.gitignore

@@ -18,6 +18,12 @@ test-results
 /packages/vue-icon-saas/src
 /packages/vue-icon-saas/index.ts
 
+/packages/vue-runtime/pc.ts
+/packages/vue-runtime/mobile.ts
+/packages/vue-runtime/mobile-first.ts
+/packages/vue-runtime/all.ts
+/packages/vue-runtime/simple.ts
+
 /packages/react/index.ts
 /packages/react/pc.ts
 /packages/react/mobile.ts

CONTRIBUTING.md

@@ -66,8 +66,8 @@ The commit message should be in the form of a `type(scope): description of the m
 3. Example title:
 
 - Supplement alert component document: `docs(alert): [alert] xxxxxxxxxxxxxxx`, `docs(site): [alert] xxxxxxxxxxxxxxx`
-- Supplement alet component test case: `test(alert): [alert] xxxxxxxxxxxxxx`
-- Fixed bug in alet component @opentiny/vue-renderless: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
+- Supplement alert component test case: `test(alert): [alert] xxxxxxxxxxxxxx`
+- Fixed bug in alert component @opentiny/vue-renderless: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
 
 #### Pull Request Description
 
@@ -135,3 +135,14 @@ If you have submitted Issue or PR to OpenTiny, you can comment on Issue or Pull
 ```
 
 For detailed rules, please refer to [https://allcontributors.org/docs/en/bot/usage](https://allcontributors.org/docs/en/bot/usage)
+
+## Contributors
+
+We sincerely thank all the contributors who have participated in the TinyVue project!
+In recognition of the contributions of our contributors, we have added a 'Contributors' section at the bottom of each component documentation, displaying the GitHub information of each contributor, including their profile picture, username, and GitHub personal page.
+Due to the current manpower constraints, only information of internal members (or former members) of the TinyVue team is currently being recorded. Open source contributors are welcome to supplement their own information.
+The file that record contributors info is:
+
+```
+/examples/sites/src/data/contributorMap.js
+```

CONTRIBUTING.zh-CN.md

@@ -66,8 +66,8 @@ commit 信息要以 `type(scope): 描述信息` 的形式填写，例如 `fix(vu
 3. 标题示例:
 
 - 补充 alert 组件文档： `docs(alert): [alert] xxxxxxxxxxxxxxx`, `docs(site): [alert] xxxxxxxxxxxxxxx`
-- 补充 alet 组件测试用例: `test(alert): [alert] xxxxxxxxxxxxxx`
-- 修复 alet 组件 @opentiny/vue-renderless 下的缺陷: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
+- 补充 alert 组件测试用例: `test(alert): [alert] xxxxxxxxxxxxxx`
+- 修复 alert 组件 @opentiny/vue-renderless 下的缺陷: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
 
 #### Pull Request 的描述
 
@@ -135,3 +135,13 @@ pnpm dev:vue2
 ```
 
 详细规则可以参考：[https://allcontributors.org/docs/en/bot/usage](https://allcontributors.org/docs/en/bot/usage)
+
+## 贡献者
+
+我们诚挚感谢每位参与过TinyVue项目的贡献者们！
+为彰显贡献者们的付出，我们在每个组件文档底部增加“贡献者”模块，陈列各位贡献者的github信息，包括头像、昵称、github个人主页等。由于当前团队人力较为紧张，目前只录入TinyVue团队内部成员（或前组员）信息，欢迎各位开源贡献者自行补充信息。
+贡献者信息记录的文件路径为：
+
+```
+/examples/sites/src/data/contributorMap.js
+```

README.md

@@ -162,6 +162,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="12.5%"><a href="https://github.com/Floyd-bit"><img src="https://avatars.githubusercontent.com/u/59243597?v=4?s=100" width="100px;" alt="Floyd"/><br /><sub><b>Floyd</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Floyd-bit" title="Code">💻</a></td>
       <td align="center" valign="top" width="12.5%"><a href="https://github.com/Jevin0"><img src="https://avatars.githubusercontent.com/u/69580637?v=4?s=100" width="100px;" alt="Jevin"/><br /><sub><b>Jevin</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Jevin0" title="Code">💻</a></td>
       <td align="center" valign="top" width="12.5%"><a href="https://github.com/HAOUEHF"><img src="https://avatars.githubusercontent.com/u/107133502?v=4?s=100" width="100px;" alt="星河"/><br /><sub><b>星河</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=HAOUEHF" title="Code">💻</a></td>
+      <td align="center" valign="top" width="12.5%"><a href="https://github.com/RanierYu"><img src="https://avatars.githubusercontent.com/u/62528887?v=4?s=100" width="100px;" alt="Ranier Yu"/><br /><sub><b>Ranier Yu</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=RanierYu" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="12.5%"><a href="https://github.com/Zcating"><img src="https://avatars.githubusercontent.com/u/13329558?v=4?s=100" width="100px;" alt="Zcating"/><br /><sub><b>Zcating</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zcating" title="Code">💻</a></td>
+      <td align="center" valign="top" width="12.5%"><a href="https://github.com/trueLoving"><img src="https://avatars.githubusercontent.com/u/44056372?v=4?s=100" width="100px;" alt="Aoi Kaze"/><br /><sub><b>Aoi Kaze</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=trueLoving" title="Tests">⚠️</a></td>
+      <td align="center" valign="top" width="12.5%"><a href="http://simonhe.me"><img src="https://avatars.githubusercontent.com/u/57086651?v=4?s=100" width="100px;" alt="Simon He"/><br /><sub><b>Simon He</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Simon-He95" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="12.5%"><a href="https://study.linlove.cn/"><img src="https://avatars.githubusercontent.com/u/44194929?v=4?s=100" width="100px;" alt="zhangpaopao"/><br /><sub><b>zhangpaopao</b></sub></a><br /><a href="#tool-zhangpaopao0609" title="Tools">🔧</a></td>
     </tr>
   </tbody>
 </table>

examples/docs/newsrc/mobile-first.vue

@@ -23,11 +23,9 @@
           <div v-html="state.currDemo?.desc['zh-CN']"></div>
         </div>
         <!-- 预览 -->
-        <!-- modeState.demoId === 'preview-in-dialog' 修复preview-in-dialog demo弹窗内容被遮罩层遮挡 -->
         <div
           :id="state.currDemo?.demoId"
           class="rel px20 minh200"
-          :style="{ transform: modeState.demoId === 'preview-in-dialog' ? '' : 'translateX(0)' }"
         >
           <config-provider :design="design">
             <component :is="state.comp"></component>

examples/react-site/package.json

@@ -32,7 +32,7 @@
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^17.0.45",
-    "@unocss/preset-icons": "^0.38.2",
+    "@unocss/preset-icons": "^0.61.9",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/compiler-sfc": "^3.2.37",
@@ -55,7 +55,7 @@
     "prettier": "^2.7.1",
     "stylelint": "^14.9.1",
     "stylelint-config-standard": "^26.0.0",
-    "unocss": "^0.39.3",
+    "unocss": "^0.61.9",
     "unplugin-auto-import": "0.8.7",
     "unplugin-vue-components": "^0.19.9",
     "uslug": "^1.0.4",

examples/react-site/src/tools/utils.js

@@ -17,13 +17,13 @@ const $split = (target, splitor = '/', pos = 0) => target.split(splitor).slice(p
 
 /**
  * 延时函数
- * @example $delay(300).then(()=>{   })
+ * @example $delay(300).then(() =>{   })
  */
 const $delay = time => new Promise(resolve => setTimeout(resolve, time));
 
 /**
  * 空闲函数
- * @example $idle().then(()=>{   })
+ * @example $idle().then(() =>{   })
  */
 const $idle = () => new Promise(resolve => (window.requestIdleCallback || window.requestAnimationFrame)(resolve));
 

examples/sites/demos/apis/action-menu.js

@@ -165,11 +165,11 @@ export default {
       type: 'interface',
       code: `
 interface IItemData {
-  label: string           // 菜单项文本
-  disabled: boolean       // 是否禁用
-  divided: boolean        // 是否显示分割线
-  children: IItemData[]   // 菜单项子集
-  icon: Component      // 菜单项图标
+  label?: string           // 菜单项文本
+  disabled?: boolean       // 是否禁用
+  divided?: boolean        // 是否显示分割线
+  children?: IItemData[]   // 菜单项子集
+  icon?: Component      // 菜单项图标
 }
 `
     },

examples/sites/demos/apis/action-sheet.js

@@ -132,7 +132,7 @@ export default {
             'en-US': 'Panel Title'
           },
           mode: ['mobile-first'],
-          mfDemo: 'actoin'
+          mfDemo: 'action'
         },
         {
           name: 'type',

examples/sites/demos/apis/autocomplete.js

@@ -22,7 +22,7 @@ export default {
           defaultValue: '300',
           desc: {
             'zh-CN': '获取输入建议的去抖延时',
-            'en-US': 'Obtain the recommended input dejitter delay.'
+            'en-US': 'Obtain the recommended input debounce delay'
           },
           mode: ['pc'],
           pcDemo: 'debounce'
@@ -90,7 +90,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '等价于原生 input aria-label 属性',
-            'en-US': 'Equiphorus input aria-label attribute'
+            'en-US': 'Equals input aria-label attribute'
           },
           mode: ['pc'],
           pcDemo: ''
@@ -319,6 +319,7 @@ export default {
     {
       name: 'IAutocompleteFetchSuggestions',
       type: 'type',
+      depTypes: ['IAutocompleteSuggestionItem'],
       code: `type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: IAutocompleteSuggestionItem[]) => void) => void`
     }
   ]

examples/sites/demos/apis/base-select.js

@@ -0,0 +1,896 @@
+export default {
+  mode: ['pc', 'mobile-first'],
+  apis: [
+    {
+      name: 'base-select',
+      type: 'component',
+      props: [
+        {
+          name: 'all-text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当下拉中显示全部时，自定义全部的显示文本。不指定时，则默认显示"全部"',
+            'en-US':
+              'When all is displayed in the drop-down list, you can customize the display text of all. If this parameter is not specified, All is displayed by default.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'all-text',
+          mfDemo: 'all-text'
+        },
+        {
+          name: 'allow-copy',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否允许复制输入框的内容，适用单选可搜索场景',
+            'en-US':
+              'Is it allowed to copy the content of the input box, applicable to single choice searchable scenarios'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-single',
+          mfDemo: 'copy-single'
+        },
+        {
+          name: 'allow-create',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否允许创建新条目，需配合 filterable 使用。若搜索字段不在选项列表中，可创建为新的选项',
+            'en-US':
+              'Is it allowed to create new entries? It needs to be used in conjunction with filterable. If the search field is not in the option list, it can be created as a new option'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'allow-create',
+          mfDemo: 'allow-create'
+        },
+        {
+          name: 'autocomplete',
+          type: 'string',
+          defaultValue: "'off'",
+          desc: {
+            'zh-CN': '输入框的原生 autocomplete 属性',
+            'en-US': 'The native autocomplete attribute of the input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'cache-op',
+          typeAnchorName: 'ICacheOp',
+          type: 'ICacheOp',
+          defaultValue:
+            "<pre>\n{\n  key: '',\n  sortBy: 'frequency',\n  sort: 'desc',\n  dataKey: 'value',\n  highlightClass: \n  'memorize-highlight',\n  highlightNum: Infinity,\n  cacheNum: Infinity,\n  serialize: JSON.stringify\n  deserialize: JSON.parse\n}\n</pre>",
+          desc: {
+            'zh-CN': '启用本地缓存已选项的功能配置（根据用户点击选择的次数、最后时间继续存储排序)',
+            'en-US': 'Set the component type when Grid or Tree is embedded in the drop-down list box.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'cache-usage',
+          mfDemo: 'cache-usage'
+        },
+        {
+          name: 'clear-no-match-value',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否自动清空无法在 options 中找到匹配项的值',
+            'en-US': 'Automatically clear values that cannot find matching items in options'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'clear-no-match-value',
+          mfDemo: 'clear-no-match-value'
+        },
+        {
+          name: 'clearable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用一键清除的功能',
+            'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'clearable',
+          mfDemo: 'clearable'
+        },
+        {
+          name: 'click-expend',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '点击可展开或收起显示不全的选项。仅用于多选',
+            'en-US': 'Click to expand or collapse options. Only applicable to multiple selections'
+          }
+        },
+        {
+          name: 'collapse-tags',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否将多个标签折叠显示。仅适用多选',
+            'en-US': 'Whether to collapse multiple labels for display. Only applicable to multiple selections'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'collapse-tags',
+          mfDemo: 'collapse-tags'
+        },
+        {
+          name: 'copyable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用一键复制的功能。点击复制按钮一键复制所有标签的文本内容并以逗号分隔，仅适用于多选',
+            'en-US':
+              'Is the one click copy function enabled. Click the copy button to copy the text content of all labels with one click, separated by commas, only applicable to multiple selections'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-multi',
+          mfDemo: 'copy-multi'
+        },
+        {
+          name: 'default-first-option',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用按 Enter 键选择第一个匹配项的功能。需配合 filterable 或 remote 使用',
+            'en-US':
+              'Whether to enable the function of pressing the Enter key to select the first match. Must be used in conjunction with filterable or remote'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'allow-create',
+          mfDemo: 'allow-create'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Is it disabled'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'disabled',
+          mfDemo: 'disabled'
+        },
+        {
+          name: 'dropdown-icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉图标',
+            'en-US': 'Custom drop-down icon'
+          },
+          mode: ['pc'],
+          pcDemo: 'multiple'
+        },
+        {
+          name: 'dropdown-style',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉选项样式',
+            'en-US': 'Custom drop-down options style'
+          },
+          mode: ['pc'],
+          pcDemo: 'multiple'
+        },
+        {
+          name: 'filter-method',
+          type: '(query: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义过滤方法',
+            'en-US': 'Custom filtering method'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter-method',
+          mfDemo: 'filter-method'
+        },
+        {
+          name: 'filterable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否可搜索',
+            'en-US': 'Is it searchable'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter-method',
+          mfDemo: 'filter-method'
+        },
+        {
+          name: 'input-box-type',
+          type: "'input' | 'underline'",
+          defaultValue: "'input'",
+          desc: {
+            'zh-CN': '输入框的显示类型',
+            'en-US': 'Display type of input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'input-box-type',
+          mfDemo: 'input-box-type'
+        },
+        {
+          name: 'is-drop-inherit-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '下拉弹框的宽度是否跟输入框保持一致。默认超出输入框宽度时由内容撑开',
+            'en-US':
+              'Is the width of the dropdown box consistent with the input box. By default, when the width of the input box is exceeded, it is supported by the content'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'is-drop-inherit-width',
+          mfDemo: 'is-drop-inherit-width'
+        },
+        {
+          name: 'loading',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否加载中，适用于远程搜索场景',
+            'en-US': 'Loading or not, suitable for remote search scenarios'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'remote-method',
+          mfDemo: 'remote-method'
+        },
+        {
+          name: 'loading-text',
+          type: 'string',
+          defaultValue: "'加载中'",
+          desc: {
+            'zh-CN': '远程加载时显示的文本',
+            'en-US': 'Text displayed during remote loading'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'remote-method',
+          mfDemo: 'remote-method'
+        },
+        {
+          name: 'max-visible-rows',
+          type: 'number',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '多行默认最大显示行数，超出后选项自动隐藏',
+            'en-US':
+              'Default maximum display lines for multiple lines, with automatic hiding option for exceeding lines'
+          },
+          mode: ['pc'],
+          pcDemo: 'collapse-tags'
+        },
+        {
+          name: 'modelValue / v-model',
+          type: 'string | number | Array<string|number>',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'Bind value'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'multiple',
+          mfDemo: 'multiple'
+        },
+        {
+          name: 'multiple',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否允许选择多个选项',
+            'en-US': 'Allow multiple options to be selected'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'multiple',
+          mfDemo: 'multiple'
+        },
+        {
+          name: 'multiple-limit',
+          type: 'number',
+          defaultValue: '0',
+          desc: {
+            'zh-CN': '多选时最多可选择的个数，默认为 0 不限制',
+            'en-US':
+              'When selecting multiple options, the maximum number of options available is 0, with no limit by default'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'multiple-limit',
+          mfDemo: 'multiple-limit'
+        },
+        {
+          name: 'name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框的原生 name 属性',
+            'en-US': 'The native name attribute of the input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'no-data-text',
+          type: 'string',
+          defaultValue: "'暂无相关数据'",
+          desc: {
+            'zh-CN': '选项列表为空时显示的文本，也可以使用 empty 插槽设置',
+            'en-US': 'The text displayed when the option list is empty can also be set using empty slots'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'no-data-text',
+          mfDemo: 'no-data-text'
+        },
+        {
+          name: 'no-match-text',
+          type: 'string',
+          defaultValue: "'无匹配数据'",
+          desc: {
+            'zh-CN': '搜索条件无匹配时显示的文本，也可以使用 empty 插槽设置',
+            'en-US':
+              'The text displayed when there is no match for the search criteria can also be set using empty slots'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter-method'
+        },
+        {
+          name: 'options',
+          typeAnchorName: 'IOption',
+          type: 'IOption[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选项列表配置，使用后不需要再配置 tiny-option',
+            'en-US': 'Option list configuration, no need to configure tiny options after use'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'map-field',
+          mfDemo: 'map-field'
+        },
+        {
+          name: 'placeholder',
+          type: 'string',
+          defaultValue: "'请选择'",
+          desc: {
+            'zh-CN': '占位符',
+            'en-US': 'Placeholder'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'placement',
+          typeAnchorName: 'IPlacement',
+          type: 'IPlacement',
+          defaultValue: "'bottom-start'",
+          desc: {
+            'zh-CN': '下拉弹框相对于触发源的弹出位置',
+            'en-US': 'The pop-up position of the pull-down pop-up box relative to the trigger source'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'popper-append-to-body',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否将弹出框的 dom 元素插入至 body 元素',
+            'en-US': 'Whether to insert the dom element of the pop-up box into the body element'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉框的类名，用于自定义样式',
+            'en-US': 'The class name of the custom dropdown box, used for customizing styles'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'remote',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否为远程搜索',
+            'en-US': 'Is it a remote search'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'remote-method',
+          mfDemo: 'remote-method'
+        },
+        {
+          name: 'remote-method',
+          type: '(query:string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '远程搜索的方法',
+            'en-US': 'Remote search methods'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'remote-method',
+          mfDemo: 'remote-method'
+        },
+        {
+          name: 'reserve-keyword',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '多选可搜索时，是否在选中一个选项后仍然保留当前的搜索关键词',
+            'en-US':
+              'When selecting multiple searchable options, do you still keep the current search keywords after selecting one option'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'remote-method',
+          mfDemo: 'remote-method'
+        },
+        {
+          name: 'searchable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用下拉面板搜索',
+            'en-US': 'Whether to allow users to create new items. This parameter must be used together with filterable.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'searchable',
+          mfDemo: 'searchable'
+        },
+        {
+          name: 'show-alloption',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否展示 “全选” 选项',
+            'en-US': 'Whether to display the "Select All" option'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'show-alloption',
+          mfDemo: 'show-alloption'
+        },
+        {
+          name: 'show-empty-image',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示空数据图片',
+            'en-US': 'Display empty data image'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'no-data-text',
+          mfDemo: 'no-data-text'
+        },
+        {
+          name: 'size',
+          type: "'medium' | 'small' | 'mini'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框尺寸。',
+            'en-US': 'Text box size'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'size',
+          mfDemo: 'size'
+        },
+        {
+          name: 'tag-selectable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '输入框中的标签是否可通过鼠标选中复制',
+            'en-US': 'Can the label in the input box be copied by selecting it with the mouse'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-multi',
+          mfDemo: 'copy-multi'
+        },
+        {
+          name: 'tag-type',
+          type: "'success' | 'info' | 'warning' | 'danger'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标签类型，仅多选适用。使用 aurora 主题时设置该属性为 info',
+            'en-US':
+              'Label type, only applicable for multiple choices. Set this property to info when using the aurora theme'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'tag-type',
+          mfDemo: 'tag-type'
+        },
+        {
+          name: 'text-field',
+          type: 'string',
+          defaultValue: "'label'",
+          desc: {
+            'zh-CN': '显示值字段',
+            'en-US': 'Show Value Fields'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'map-field',
+          mfDemo: 'map-field'
+        },
+        {
+          name: 'text-split',
+          type: 'string',
+          defaultValue: "','",
+          desc: {
+            'zh-CN': '自定义复制文本的分隔符，需结合 copyable 属性使用',
+            'en-US': 'The separator for custom copied text needs to be used in conjunction with the copyable attribute'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-multi',
+          mfDemo: 'copy-multi'
+        },
+        {
+          name: 'top-create',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '是否显示下拉框顶部新增按钮，点击按钮会抛出一个 top-create-click 事件，可以在事件中自定义一些行为',
+            'en-US':
+              'Indicates whether to display a new button on the top of the drop-down list box. When a button is clicked, a top-create-click event is thrown. You can customize some behaviors in the event'
+          },
+          mode: ['pc'],
+          pcDemo: 'allow-create'
+        },
+        {
+          name: 'value-field',
+          type: 'string',
+          defaultValue: "'value'",
+          desc: {
+            'zh-CN': '绑定值字段',
+            'en-US': 'Bind Value Field'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'map-field',
+          mfDemo: 'map-field'
+        },
+        {
+          name: 'value-key',
+          type: 'string',
+          defaultValue: "'value'",
+          desc: {
+            'zh-CN': '作为 value 唯一标识的键名，绑定值为对象类型时必填',
+            'en-US':
+              'The key name that uniquely identifies the value must be filled in when the binding value is of object type'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'binding-obj',
+          mfDemo: 'binding-obj'
+        },
+        {
+          name: 'show-proportion',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否展示多选框选中条数和总条数的占比的文字提示',
+            'en-US':
+              'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'collapse-tags',
+          mfDemo: 'collapse-tags'
+        },
+        {
+          name: 'show-limit-text',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN':
+              '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<code>show-proportion</code> 属性，同时设置只',
+            'en-US':
+              'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
+          },
+          mode: ['pc'],
+          pcDemo: 'multiple'
+        }
+      ],
+      events: [
+        {
+          name: 'blur',
+          type: '(event:MouseEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '监听输入框失去焦点事件',
+            'en-US': 'Listening for input box lose focus event'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'events',
+          mfDemo: 'events'
+        },
+        {
+          name: 'change',
+          type: '(value:string|number|Array<string|number>, list:Array<IOption|ITreeNode>) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '监听绑定值变更事件',
+            'en-US': 'Listening for binding value change events'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'events',
+          mfDemo: 'events'
+        },
+        {
+          name: 'clear',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '监听一键清除事件',
+            'en-US': 'Listening for one click clear events'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'events',
+          mfDemo: 'events'
+        },
+        {
+          name: 'focus',
+          type: '(event:MouseEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '监听输入框获取焦点事件',
+            'en-US': 'Listening to input boxes to obtain focus events'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'events',
+          mfDemo: 'events'
+        },
+        {
+          name: 'remove-tag',
+          type: '(tag:string|number) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '监听多选时移除标签事件',
+            'en-US': 'Remove label events when listening for multiple selections'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'events',
+          mfDemo: 'events'
+        },
+        {
+          name: 'top-create-click',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '监听顶部新增按钮点击事件，同 top-create 属性一起使用',
+            'en-US':
+              'Listens to the click event of a new button on the top. This parameter is used together with the top-create attribute'
+          },
+          mode: ['pc'],
+          pcDemo: 'events'
+        },
+        {
+          name: 'visible-change',
+          type: '(status:boolean) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '监听下拉弹框的显示隐藏状态',
+            'en-US': 'Monitor the display and hidden status of dropdown pop ups'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'events',
+          mfDemo: 'events'
+        }
+      ],
+      methods: [
+        {
+          name: 'blur',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '使输入框失去焦点',
+            'en-US': 'Causes the input box to lose focus'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'manual-focus-blur',
+          mfDemo: 'manual-focus-blur'
+        },
+        {
+          name: 'focus',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '使输入框获取焦点',
+            'en-US': 'Bring the input box to focus'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'manual-focus-blur',
+          mfDemo: 'manual-focus-blur'
+        }
+      ],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选项默认插槽',
+            'en-US': 'Option default slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-default',
+          mfDemo: 'slot-default'
+        },
+        {
+          name: 'empty',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '空数据插槽',
+            'en-US': 'Empty data slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-empty',
+          mfDemo: 'slot-empty'
+        },
+        {
+          name: 'footer',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '下拉弹框底部插槽',
+            'en-US': 'Pull down the bottom slot of the pop-up box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-footer',
+          mfDemo: 'slot-footer'
+        },
+        {
+          name: 'prefix',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框前缀插槽',
+            'en-US': 'Input box prefix slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-prefix',
+          mfDemo: 'slot-prefix'
+        },
+        {
+          name: 'reference',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '触发源插槽',
+            'en-US': 'Trigger Source Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-reference',
+          mfDemo: 'slot-reference'
+        },
+        {
+          name: 'panel',
+          desc: {
+            'zh-CN': '下拉面板插槽',
+            'en-US': 'Panel slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-panel',
+          mfDemo: 'slot-panel'
+        }
+      ]
+    },
+    {
+      name: 'option',
+      type: 'component',
+      props: [
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '选项是否禁用',
+            'en-US': 'Is the option disabled'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'disabled',
+          mfDemo: 'disabled'
+        },
+        {
+          name: 'icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义选项的图标',
+            'en-US': 'Customize icons for options'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: 'basic-usage'
+        },
+        {
+          name: 'label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选项的显示文本',
+            'en-US': 'Display text for option'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: 'basic-usage'
+        },
+        {
+          name: 'required',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '选项是否必选',
+            'en-US': 'Is it mandatory to select an option'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'value',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选项的值',
+            'en-US': 'Value for option'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: 'basic-usage'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
+  types: [
+    {
+      name: 'IOption',
+      type: 'interface',
+      code: `
+interface IOption {
+  value?: string | number
+  label?: string
+  disabled?: boolean
+  icon?: Component
+  required?:boolean
+}
+`
+    },
+    {
+      name: 'ICacheOp',
+      type: 'interface',
+      code: `
+interface ICacheItem {
+  frequency: number
+  key: string
+  time: number
+}
+
+interface ICacheOp {
+  key: string // 本地缓存的唯一 key 值
+  sortBy?: 'frequency' | 'time' // 排序的字段，默认 frequency (频次)
+  sort?: 'desc' | 'asc' // 排序方式，默认 desc (降序)
+  dataKey?: string // 数据中的唯一标识的 key 名称,默认 value
+  highlightClass?: string // 个性化高亮 class 名称，默认：memorize-highlight
+  highlightNum?: number // 高亮个性化的条数,默认：Infinity
+  cacheNum?: number // 存储个性化的条数,默认：Infinity
+  serialize?: () => string  // 本地存储序列化方法,默认：JSON.stringify
+  deserialize?: () => ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
+}        
+`
+    },
+    {
+      name: 'IPlacement',
+      type: 'type',
+      code: `
+type IPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+`
+    }
+  ]
+}

examples/sites/demos/apis/breadcrumb.js

@@ -170,6 +170,7 @@ interface IOptionsItemTo {
     {
       name: 'IOptionsItem',
       type: 'interface',
+      depTypes: ['IOptionsItemTo'],
       code: `
 interface IOptionsItem {
   label?: string
@@ -181,6 +182,7 @@ interface IOptionsItem {
     {
       name: 'ISelectValue',
       type: 'interface',
+      depTypes: ['IOptionsItem', 'IOptionsItemTo'],
       code: `
 interface ISelectValue {
   event: Event

examples/sites/demos/apis/button-group.js

@@ -172,6 +172,20 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-default',
           mfDemo: ''
+        },
+        {
+          name: 'empty',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义数据为空时展示内容',
+            'en-US': 'customize content when data is empty'
+          },
+          metaData: {
+            new: '3.17.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-empty'
         }
       ]
     }
@@ -185,6 +199,7 @@ interface IButtonGroupData {
   text: string // 显示文本
   value: number | number // 选中的值
   disabled?: boolean // 是否禁用
+  tip?: string // 按钮悬浮提示 v3.17.0版本增加此功能
   // 配置选块角标
   sup?: {
     text: string // 角标文本

examples/sites/demos/apis/button.js

@@ -191,7 +191,7 @@ export default {
           name: 'type',
           typeAnchorName: 'IButtonType',
           type: 'IButtonType',
-          defaultValue: '',
+          defaultValue: 'default',
           desc: {
             'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
             'en-US': 'Display different states of buttons, set to text to display as text buttons'
@@ -239,7 +239,7 @@ export default {
     {
       name: 'IButtonType',
       type: 'interface',
-      code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+      code: `type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
     }
   ]
 }

examples/sites/demos/apis/calendar.js

@@ -7,8 +7,8 @@ export default {
       props: [
         {
           name: 'events',
-          typeAnchorName: 'eventLists',
-          type: 'eventLists[]',
+          typeAnchorName: 'ICalendarEvent',
+          type: 'ICalendarEvent[]',
           defaultValue: '',
           desc: {
             'zh-CN': '事件列表',
@@ -90,15 +90,17 @@ export default {
   ],
   types: [
     {
-      name: 'eventLists',
+      name: 'ICalendarEvent',
       type: 'interface',
       code: `
-      interface eventLists [{
-        time: 1534297845236, // 指定需要展示事件的日期
-        title: '消息', // 指定事件标题
-        content: '这是一条消息', // 指定事件的具体内容
-        type: 'info' // 事件主题类型，包括 warning、error、info、success。
-      }]`
+type ICalendarEventType = 'info' | 'warning' | 'error' | 'info' | 'success'
+
+interface ICalendarEvent {
+    time: number, // 指定需要展示事件的日期的时间戳
+    title: string, // 指定事件标题
+    content: string, // 指定事件的具体内容
+    type: ICalendarEventType // 事件主题类型
+}`
     }
   ]
 }

examples/sites/demos/apis/card.js

@@ -7,7 +7,7 @@ export default {
       props: [
         {
           name: 'auto-width',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '卡片的宽度是否自动撑开，设置后将不再给卡片设置固定宽度',
@@ -20,7 +20,7 @@ export default {
         },
         {
           name: 'check-type',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置卡片单选、多选，单选/radio；多选/checkbox，需同时设置 label。',
@@ -33,7 +33,7 @@ export default {
         },
         {
           name: 'custom-class',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '卡片的class',
@@ -45,8 +45,8 @@ export default {
         },
         {
           name: 'disabled',
-          type: 'Boolean',
-          defaultValue: '',
+          type: 'boolean',
+          defaultValue: 'false',
           desc: {
             'zh-CN': '卡片禁用',
             'en-US': 'Card disabled'
@@ -57,7 +57,7 @@ export default {
         },
         {
           name: 'height',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '卡片内容区域的高度',
@@ -69,7 +69,7 @@ export default {
         },
         {
           name: 'icon-more',
-          type: 'Object',
+          type: "'iconxxx' | Component",
           defaultValue: '',
           desc: {
             'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
@@ -81,7 +81,7 @@ export default {
         },
         {
           name: 'label',
-          type: 'String / Number',
+          type: 'string / number',
           defaultValue: '',
           desc: {
             'zh-CN': 'checkbox或radio的label',
@@ -93,7 +93,8 @@ export default {
         },
         {
           name: 'options',
-          type: 'Array',
+          typeAnchorName: 'IOptions',
+          type: 'IOptions',
           defaultValue: '',
           desc: {
             'zh-CN': '操作按钮配置',
@@ -105,8 +106,8 @@ export default {
         },
         {
           name: 'size',
-          type: 'String',
-          defaultValue: '',
+          type: 'string',
+          defaultValue: 'medium',
           desc: {
             'zh-CN': '尺寸，支持large、medium、small、mini 4个尺寸，默认值为medium',
             'en-US': 'Size. The options are large, medium, small, and mini. The default value is medium.'
@@ -117,7 +118,7 @@ export default {
         },
         {
           name: 'src',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '图片或者视频的地址',
@@ -129,8 +130,8 @@ export default {
         },
         {
           name: 'status',
-          type: 'String',
-          defaultValue: '',
+          type: 'string',
+          defaultValue: 'default',
           desc: {
             'zh-CN': '卡片状态，支持 success、warning、alerting、danger 4 种状态',
             'en-US': 'Card status. The value can be success, warning, alerting, or dangerous.'
@@ -141,7 +142,7 @@ export default {
         },
         {
           name: 'title',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '卡片的标题',
@@ -153,10 +154,10 @@ export default {
         },
         {
           name: 'type',
-          type: 'String',
-          defaultValue: '',
+          type: 'string',
+          defaultValue: 'text',
           desc: {
-            'zh-CN': '设置卡片类型，支持 text、image、video、logo 4 种类型。',
+            'zh-CN': '设置卡片类型，支持 text、image、video、logo 4 种类型',
             'en-US': 'Set the card type. The options are text, image, video, and logo.'
           },
           mode: ['pc', 'mobile-first'],
@@ -165,7 +166,7 @@ export default {
         },
         {
           name: 'v-model',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '绑定值，默认为空',
@@ -174,12 +175,24 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'check-type-checkbox',
           mfDemo: ''
+        },
+        {
+          name: 'check-mode',
+          type: 'string',
+          defaultValue: 'normal',
+          desc: {
+            'zh-CN': '卡片被选中后的呈现模式，可选值为：normal | simple | badge',
+            'en-US': 'Display mode of a selected card. The options are as follows: normal | simple | badge'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'check-mode',
+          mfDemo: ''
         }
       ],
       events: [
         {
           name: 'change',
-          type: 'Function()',
+          type: '() => {}',
           defaultValue: '',
           desc: {
             'zh-CN': '组件选中/取消选中事件',
@@ -191,7 +204,7 @@ export default {
         },
         {
           name: 'icon-click',
-          type: 'Function()',
+          type: '() => {}',
           defaultValue: '',
           desc: {
             'zh-CN': '操作栏按钮点击事件',
@@ -203,7 +216,7 @@ export default {
         },
         {
           name: 'click',
-          type: 'Function()',
+          type: '() => {}',
           defaultValue: '',
           desc: {
             'zh-CN': '点击卡片事件',
@@ -278,5 +291,33 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IOptions',
+      type: 'interface',
+      code: `
+interface IOptions [
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+]
+`
+    }
   ]
 }

examples/sites/demos/apis/carousel.js

@@ -146,6 +146,44 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'card-mode',
           mfDemo: ''
+        },
+        {
+          name: 'swipeable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否支持触屏轮播',
+            'en-US': 'Support Touchscreen Carousel'
+          },
+          mode: ['mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'lite',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否打开精简模式，不显示切换按钮和指示器',
+            'en-US':
+              'Indicates whether to enable the simplified mode. The switch button and indicator are not displayed.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'swipeable',
+          mfDemo: ''
+        },
+        {
+          name: 'beforeSwipe',
+          type: '(newIndex,oldIndex) => boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '触摸轮播前，通过返回值控制某个图是否可轮播显示',
+            'en-US':
+              'Controls whether a graph can be displayed in rotation based on the return value before the rotation is touched.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'swipeable',
+          mfDemo: ''
         }
       ],
       events: [
@@ -255,7 +293,7 @@ export default {
             'en-US': 'Default slot'
           },
           mode: ['pc'],
-          pcDemo: 'manual-play'
+          pcDemo: 'card-show'
         }
       ]
     }

examples/sites/demos/apis/cascader-panel.js

@@ -252,6 +252,7 @@ export default {
     {
       name: 'ICascaderPanelNodePropValue',
       type: 'type',
+      depTypes: ['ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelNodePropValue =
   | ICascaderPanelNodeValue
@@ -261,6 +262,7 @@ type ICascaderPanelNodePropValue =
     {
       name: 'ICascaderPanelData',
       type: 'type',
+      depTypes: ['ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelData = {
   value?: ICascaderPanelNodeValue
@@ -274,6 +276,7 @@ type ICascaderPanelData = {
     {
       name: 'ICascaderPanelConfig',
       type: 'interface',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
       code: `
 interface ICascaderPanelConfig {
   emitPath: boolean
@@ -296,6 +299,7 @@ interface ICascaderPanelConfig {
     {
       name: 'ICascaderPanelNode',
       type: 'type',
+      depTypes: ['ICascaderPanelData', 'ICascaderPanelConfig', 'ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelNode = {
   parent: ICascaderPanelNode | null
@@ -320,6 +324,7 @@ type ICascaderPanelNode = {
     {
       name: 'ICascaderPanelLazyLoad',
       type: 'type',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
       code: `
 type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
       `

examples/sites/demos/apis/cascader.js

@@ -59,7 +59,7 @@ export default {
           defaultValue: '300',
           desc: {
             'zh-CN': '搜索关键词输入的去抖延迟，单位毫秒',
-            'en-US': 'Dejitter delay of the search keyword, in milliseconds.'
+            'en-US': 'Debounce delay of the search keyword, in milliseconds.'
           },
           mode: ['pc'],
           pcDemo: 'filterable'
@@ -536,6 +536,7 @@ export default {
     {
       name: 'ICascaderPanelNodePropValue',
       type: 'type',
+      depTypes: ['ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelNodePropValue =
   | ICascaderPanelNodeValue
@@ -545,6 +546,7 @@ type ICascaderPanelNodePropValue =
     {
       name: 'ICascaderPanelData',
       type: 'type',
+      depTypes: ['ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelData = {
   value?: ICascaderPanelNodeValue
@@ -558,6 +560,7 @@ type ICascaderPanelData = {
     {
       name: 'ICascaderPanelConfig',
       type: 'interface',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
       code: `
 interface ICascaderPanelConfig {
   emitPath: boolean
@@ -580,6 +583,7 @@ interface ICascaderPanelConfig {
     {
       name: 'ICascaderPanelNode',
       type: 'type',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData', 'ICascaderPanelConfig', 'ICascaderPanelNodeValue'],
       code: `
 type ICascaderPanelNode = {
   parent: ICascaderPanelNode | null
@@ -604,6 +608,7 @@ type ICascaderPanelNode = {
     {
       name: 'ICascaderPanelLazyLoad',
       type: 'type',
+      depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
       code: `
 type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
       `

examples/sites/demos/apis/chart-attributes-demo.js

@@ -1,297 +1,403 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
-        }
-    ],
-    types: [
-        {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ]
+      ],
+
+      events: [
+        {
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
+            interface Options {
+                // 见具体图表组件
+            }`
+    }
+  ]
 }

examples/sites/demos/apis/chart-autonavi-map.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 key: string // 高德地图密钥
                 url: string // 高德地图密钥 
@@ -304,6 +402,6 @@ export default {
                 amap: object // 高德地图配置项 默认不触发
                 series: object // 高德地图插件配置项
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-baidu-map.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-baidu-map',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 key: string // 百度地图密钥
                 url: string // 百度地图密钥 
@@ -304,6 +402,6 @@ export default {
                 bmap: object // 百度地图配置项 默认不触发
                 series: object // 百度地图插件配置项
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-bar.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-bar',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 legend: object // 图例配置, 默认显示
@@ -321,6 +419,6 @@ export default {
                 markline: object // 阈值线配置, 默认不显示
 
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-boxplot.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-boxplot',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 color: array | string // 颜色
@@ -308,7 +406,6 @@ export default {
                 dataset: array // 自定义图表dataset
                 
             }`
-        }
-
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-candle.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-candle',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: light
                 color: array | string // 颜色
@@ -309,6 +407,6 @@ export default {
                 downColor: string // 下行数据颜色
                
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-demo.js

@@ -1,297 +1,403 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
-        }
-    ],
-    types: [
-        {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ]
+      ],
+
+      events: [
+        {
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
+            interface Options {
+                // 见具体图表组件
+            }`
+    }
+  ]
 }

examples/sites/demos/apis/chart-docs.js

@@ -0,0 +1,403 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart',
+      type: 'component',
+      props: [
+        {
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        }
+      ],
+
+      events: [
+        {
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
+            interface Options {
+                // 见具体图表组件
+            }`
+    }
+  ]
+}

examples/sites/demos/apis/chart-events.js

@@ -1,297 +1,403 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
-        }
-    ],
-    types: [
-        {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ]
+      ],
+
+      events: [
+        {
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
+            interface Options {
+                // 见具体图表组件
+            }`
+    }
+  ]
 }

examples/sites/demos/apis/chart-funnel.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-funnel',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: light
                 color: array | string // 颜色
@@ -311,6 +409,6 @@ export default {
                 data: array // 图表数据(必填)
                 series: object // 图表series
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-gauge.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-gauge',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: light
                 color: array | string // 颜色
@@ -322,6 +420,6 @@ export default {
                 orbitalColor: string // 仪表盘的轨道颜色
                 silent: boolean // 是否关闭hover动效, 默认值: false
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-graph.js

@@ -1,305 +1,403 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-graph',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 // 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-graph
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-heatmap.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-heatmap',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: light
                 color: array | string // 颜色
@@ -319,6 +417,6 @@ export default {
                 xAxisLabelRotate: number // x轴label旋转角度(建议使用xAxis.labelRotate)
                 xAixsInterval:number | function // 配置x轴label间距(建议使用xAxis.interval),默认值: 0
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-histogram.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-histogram',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: light
                 legend: object // 图例配置, 默认显示
@@ -321,6 +419,6 @@ export default {
                 markline: object // 阈值线配置, 默认不显示
 
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-line.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-line',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: light
                 color: array | string // 颜色
@@ -318,6 +416,6 @@ export default {
                 markline: object // 阈值线配置, 默认不显示
                 markPoint: object // 峰值标记, 默认值: markPoint: {max:false, min:false}
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-liquidfill.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-liquidfill',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: light
                 color: array | string // 颜色
@@ -309,6 +407,6 @@ export default {
                 data: array // 图表数据(必填)
                 series: object // 图表series
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-map.js

@@ -1,305 +1,403 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-map',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 // 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-map 
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-pie.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-pie',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 color: array | string // 颜色
@@ -316,6 +414,6 @@ export default {
                 selectedMode: boolean // 扇区选中模式配置, 默认值: false
                 roseType: boolean // 是否展示成南丁格尔图, 默认值: false
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-process.js

@@ -1,32 +1,32 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-process',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '--',
-                    desc: {
-                        'zh-CN': '图表参数',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                }
-            ],
-            events: [],
-            methods: [],
-            slots: []
+          name: 'options',
+          type: 'object',
+          defaultValue: '--',
+          desc: {
+            'zh-CN': '图表参数',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/question#question-base'
         }
-    ],
-    types: [
-        {
-            name: 'options',
-            type: 'interface',
-            code: `
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
+  types: [
+    {
+      name: 'options',
+      type: 'interface',
+      code: `
   interface options {
     theme: string // 主题
     color: array | string // 颜色
@@ -44,6 +44,6 @@ export default {
     title: object // 进度图图表标题样式
     text: object // 进度图图表右侧文本样式
   }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-question.js

@@ -1,297 +1,403 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
-        }
-    ],
-    types: [
-        {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ]
+      ],
+
+      events: [
+        {
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
+            interface Options {
+                // 见具体图表组件
+            }`
+    }
+  ]
 }

examples/sites/demos/apis/chart-radar.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-radar',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 data: array // 图表数据(必填)
                 theme: string // 主题, 默认值: cloud-light
@@ -314,6 +412,6 @@ export default {
                 radar: object // 雷达图的坐标系配置
 
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-ring.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-ring',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 color: array | string // 颜色
@@ -316,6 +414,6 @@ export default {
                 selectedMode: boolean // 扇区选中模式配置, 默认值: false
                 roseType: boolean // 是否展示成南丁格尔图, 默认值: false
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-sankey.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-sankey',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 color: array | string // 颜色
@@ -317,6 +415,6 @@ export default {
                 tooltip: object // echarts原生属性
                 title: object // echarts原生属性
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-scatter.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-scatter',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 color: array | string // 颜色
@@ -322,6 +420,6 @@ export default {
                 itemStyle: object // 节点图形的样式, 此属性配置和echarts一致
                 emphasis: object // 高亮的图形和标签样式, 此属性配置和echarts一致
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-sunburst.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-sunburst',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 color: array | string // 颜色
@@ -306,6 +404,6 @@ export default {
                 data: array // 图表数据(必填)
                 series: object // 图表series
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-tree.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-tree',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 padding: array // 图表内边距值, 默认值: [50,20,50,20]
@@ -308,6 +406,6 @@ export default {
                 lineType: string // 线性树图连线形状, 默认值: curve
                 initialTreeDepth: number // 树图初始展开层级, 默认值: 1
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-waterfall.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-waterfall',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 legend: object // 图例配置, 默认显示
@@ -321,6 +419,6 @@ export default {
                 markline: object // 阈值线配置, 默认不显示
 
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart-wordcloud.js

@@ -1,302 +1,400 @@
 export default {
-    mode: ['pc'],
-    apis: [
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart-wordcloud',
+      type: 'component',
+      props: [
         {
-            name: 'chart',
-            type: 'component',
-            props: [
-                {
-                    name: 'cancel-resize-check',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否禁用 resize 时的容器检测',
-                        'en-US': 'Whether to disable container detection during resize'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'change-delay',
-                    type: 'number',
-                    defaultValue: "'0'",
-                    desc: {
-                        'zh-CN': '属性修改触发图表重绘回调的延迟',
-                        'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'data',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
-                        'en-US':
-                            'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'events',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '事件绑定',
-                        'en-US': 'Event binding'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'extend',
-                    typeAnchorName: 'chart#IChartProps',
-                    type: 'IChartProps',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'echarts 的配置项',
-                        'en-US': 'Configuration items of echarts'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart'
-                },
-                {
-                    name: 'height',
-                    type: 'string',
-                    defaultValue: "'400px'",
-                    desc: {
-                        'zh-CN': '设置图表容器的高度。',
-                        'en-US': 'Set the height of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'init-options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': 'init 附加参数',
-                        'en-US': 'Init Additional Parameters'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'judge-width',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    desc: {
-                        'zh-CN': '是否处理生成图表时的宽度问题',
-                        'en-US': 'Do you want to process the width issue when generating charts?'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart-events'
-                },
-                {
-                    name: 'legend-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示图例',
-                        'en-US': 'Display legend'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'not-set-unchange',
-                    type: 'array',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '未发生变化时不参加 setOption 的属性',
-                        'en-US': 'The setOption attribute does not change.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    name: 'resize-delay',
-                    type: 'number',
-                    defaultValue: "'200'",
-                    desc: {
-                        'zh-CN': '窗口 resize 事件回调的延迟',
-                        'en-US': 'Delay of the window resize event callback'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'resizeable',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否处理窗口 resize 事件',
-                        'en-US': 'Whether to process the window resize event'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'set-option-opts',
-                    type: 'boolean | object',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': 'echarts setOption 的第二个参数',
-                        'en-US': 'Echarts setOption second parameter'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                },
-                {
-                    mode: []
-                },
-                {
-                    name: 'theme',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称。;自定义主题对象。',
-                        'en-US': 'User-defined theme name. ;User-defined theme object.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'theme-name',
-                    type: 'string',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
-                        'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart#base'
-                },
-                {
-                    name: 'tooltip-visible',
-                    type: 'boolean',
-                    defaultValue: 'true',
-                    desc: {
-                        'zh-CN': '是否显示提示框',
-                        'en-US': 'Display dialog box'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width',
-                    type: 'string',
-                    defaultValue: "'auto'",
-                    desc: {
-                        'zh-CN': '设置图表容器的宽度。',
-                        'en-US': 'Set the width of the chart container.'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/attributes-demo#props-demo10'
-                },
-                {
-                    name: 'width-change-delay',
-                    type: 'number',
-                    defaultValue: "'300'",
-                    desc: {
-                        'zh-CN': '容器宽度变化的延迟',
-                        'en-US': 'Container width change delay'
-                    },
-                    mode: ['pc'],
-                    pcDemo: 'chart/question#question-base'
-                },
-                {
-                    name: 'options',
-                    type: 'object',
-                    defaultValue: '',
-                    desc: {
-                        'zh-CN': '图表配置项(无法与settings混用)',
-                        'en-US': 'Chart Configuration item (cannot be used together with settings)'
-                    },
-                    mode: ['pc'],
-                    pcDemo: ''
-                }
-            ],
-
-            events: [],
-            methods: [],
-            slots: []
+          name: 'cancel-resize-check',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用 resize 时的容器检测',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'change-delay',
+          type: 'number',
+          defaultValue: "'0'",
+          desc: {
+            'zh-CN': '属性修改触发图表重绘回调的延迟',
+            'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
+            'en-US':
+              'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'events',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件绑定',
+            'en-US': 'Event binding'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'extend',
+          typeAnchorName: 'chart#IChartProps',
+          type: 'objcet',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'echarts 的配置项',
+            'en-US': 'Configuration items of echarts'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: "'400px'",
+          desc: {
+            'zh-CN': '设置图表容器的高度。',
+            'en-US': 'Set the height of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'init-options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'init 附加参数',
+            'en-US': 'Init Additional Parameters'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'judge-width',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否处理生成图表时的宽度问题',
+            'en-US': 'Do you want to process the width issue when generating charts?'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'legend-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示图例',
+            'en-US': 'Display legend'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'not-set-unchange',
+          type: 'array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '未发生变化时不参加 setOption 的属性',
+            'en-US': 'The setOption attribute does not change.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resize-delay',
+          type: 'number',
+          defaultValue: "'200'",
+          desc: {
+            'zh-CN': '窗口 resize 事件回调的延迟',
+            'en-US': 'Delay of the window resize event callback'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'resizeable',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否处理窗口 resize 事件',
+            'en-US': 'Whether to process the window resize event'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'set-option-opts',
+          type: 'boolean | object',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': 'echarts setOption 的第二个参数',
+            'en-US': 'Echarts setOption second parameter'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          mode: []
+        },
+        {
+          name: 'theme',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称。;自定义主题对象。',
+            'en-US': 'User-defined theme name. ;User-defined theme object.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'theme-name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
+            'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'tooltip-visible',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示提示框',
+            'en-US': 'Display dialog box'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width',
+          type: 'string',
+          defaultValue: "'auto'",
+          desc: {
+            'zh-CN': '设置图表容器的宽度。',
+            'en-US': 'Set the width of the chart container.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'width-change-delay',
+          type: 'number',
+          defaultValue: "'300'",
+          desc: {
+            'zh-CN': '容器宽度变化的延迟',
+            'en-US': 'Container width change delay'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
-    ],
-    types: [
+      ],
+
+      events: [
         {
-            name: 'IChartProps',
-            type: 'interface',
-            code: `
-  interface IChartProps {
-    afterConfig: () => void 
-    afterSetOption: () => void 
-    afterSetOptionOnce: () => void 
-    animation: object
-    axisPointer: object | array
-    backgroundColor: object | string
-    beforeConfig: () => void 
-    brush: object | array
-    cancelResizeCheck: boolean
-    changeDelay: number // 默认值 0 
-    colorMode: string
-    colors: array 
-    data: object | array
-    dataEmpty: boolean
-    dataZoom: object | array
-    events: object 
-    extend: object
-    geo: object | array
-    graphic: object | array
-    grid: object | array
-    height: string // 默认值 '400px' 
-    initOptions: object
-    judgeWidth: boolean // 默认值 false 
-    legend: object | array
-    legendPosition: string 
-    legendVisible: boolean // 默认值 true 
-    loading: boolean
-    markArea: object 
-    markLine: object 
-    markPoint: object 
-    notSetUnchange: array
-    radar: object
-    resizeDelay: number // 默认值 200 
-    resizeable: boolean // 默认值 true 
-    series: object | array
-    setOptionOpts: boolean | object // 默认值 true 
-    settings: object
-    textStyle: object | array
-    theme: object
-    themeName: object | string
-    timeline: object | array
-    title: object | array
-    toolbox: object | array
-    tooltip: object
-    tooltipFormatter: () => void 
-    tooltipVisible: boolean // 默认值 true 
-    visualMap: object | array 
-    width: string // 默认值 'auto' 
-    widthChangeDelay: number // 默认值 300 
-    xAxis: object | array
-    yAxis: object | array
-  }`
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         },
         {
-            name: 'IChartSettings',
-            type: 'interface',
-            code: `
-  interface IChartSettings {
-    type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-  }`
-        },
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
         {
-            name: 'Options',
-            type: 'interface',
-            code: `
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'Options',
+      type: 'interface',
+      code: `
             interface Options {
                 theme: string // 主题, 默认值: cloud-light
                 color: array | string // 颜色
@@ -312,6 +410,6 @@ export default {
                 maskImage: string // 词云图形状图片配置
                 textColor: function // 词云图文本颜色
             }`
-        }
-    ]
+    }
+  ]
 }

examples/sites/demos/apis/chart.js

@@ -14,7 +14,7 @@ export default {
             'en-US': 'Whether to disable container detection during resize'
           },
           mode: ['pc'],
-          pcDemo: 'chart/question#question-base'
+          pcDemo: ''
         },
         {
           name: 'change-delay',
@@ -25,7 +25,7 @@ export default {
             'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
           },
           mode: ['pc'],
-          pcDemo: 'chart/question#question-base'
+          pcDemo: ''
         },
         {
           name: 'data',
@@ -37,7 +37,7 @@ export default {
               'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
           },
           mode: ['pc'],
-          pcDemo: 'chart'
+          pcDemo: ''
         },
         {
           name: 'events',
@@ -48,19 +48,19 @@ export default {
             'en-US': 'Event binding'
           },
           mode: ['pc'],
-          pcDemo: 'chart-events'
+          pcDemo: ''
         },
         {
           name: 'extend',
           typeAnchorName: 'chart#IChartProps',
-          type: 'IChartProps',
+          type: 'objcet',
           defaultValue: '',
           desc: {
             'zh-CN': 'echarts 的配置项',
             'en-US': 'Configuration items of echarts'
           },
           mode: ['pc'],
-          pcDemo: 'chart'
+          pcDemo: ''
         },
         {
           name: 'height',
@@ -71,7 +71,7 @@ export default {
             'en-US': 'Set the height of the chart container.'
           },
           mode: ['pc'],
-          pcDemo: 'chart/attributes-demo#props-demo10'
+          pcDemo: ''
         },
         {
           name: 'init-options',
@@ -82,7 +82,7 @@ export default {
             'en-US': 'Init Additional Parameters'
           },
           mode: ['pc'],
-          pcDemo: 'chart/attributes-demo#props-demo10'
+          pcDemo: ''
         },
         {
           name: 'judge-width',
@@ -93,7 +93,7 @@ export default {
             'en-US': 'Do you want to process the width issue when generating charts?'
           },
           mode: ['pc'],
-          pcDemo: 'chart-events'
+          pcDemo: ''
         },
         {
           name: 'legend-visible',
@@ -104,7 +104,7 @@ export default {
             'en-US': 'Display legend'
           },
           mode: ['pc'],
-          pcDemo: 'chart/attributes-demo#props-demo10'
+          pcDemo: ''
         },
         {
           name: 'not-set-unchange',
@@ -126,7 +126,7 @@ export default {
             'en-US': 'Delay of the window resize event callback'
           },
           mode: ['pc'],
-          pcDemo: 'chart/attributes-demo#props-demo10'
+          pcDemo: ''
         },
         {
           name: 'resizeable',
@@ -137,7 +137,7 @@ export default {
             'en-US': 'Whether to process the window resize event'
           },
           mode: ['pc'],
-          pcDemo: 'chart/question#question-base'
+          pcDemo: ''
         },
         {
           name: 'set-option-opts',
@@ -162,7 +162,7 @@ export default {
             'en-US': 'User-defined theme name. ;User-defined theme object.'
           },
           mode: ['pc'],
-          pcDemo: 'chart#base'
+          pcDemo: ''
         },
         {
           name: 'theme-name',
@@ -173,7 +173,7 @@ export default {
             'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
           },
           mode: ['pc'],
-          pcDemo: 'chart#base'
+          pcDemo: ''
         },
         {
           name: 'tooltip-visible',
@@ -184,7 +184,7 @@ export default {
             'en-US': 'Display dialog box'
           },
           mode: ['pc'],
-          pcDemo: 'chart/attributes-demo#props-demo10'
+          pcDemo: ''
         },
         {
           name: 'width',
@@ -195,7 +195,7 @@ export default {
             'en-US': 'Set the width of the chart container.'
           },
           mode: ['pc'],
-          pcDemo: 'chart/attributes-demo#props-demo10'
+          pcDemo: ''
         },
         {
           name: 'width-change-delay',
@@ -206,80 +206,198 @@ export default {
             'en-US': 'Container width change delay'
           },
           mode: ['pc'],
-          pcDemo: 'chart/question#question-base'
+          pcDemo: ''
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表配置项(无法与settings混用)',
+            'en-US': 'Chart Configuration item (cannot be used together with settings)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'settings',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置项',
+            'en-US': 'Chart Configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'color-mode',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义颜色模式',
+            'en-US': 'Custom color mode'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-line',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标线',
+            'en-US': 'Chart markings'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-area',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标志区域',
+            'en-US': 'Chart symbol area'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'mark-point',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表标点',
+            'en-US': 'Chart punctuation'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表加载状态',
+            'en-US': 'Chart loading status'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'data-empty',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '暂无数据状态',
+            'en-US': 'No data status available at the moment'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'before-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
+            'en-US':
+              'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-config',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
+            'en-US':
+              'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例',
+            'en-US': 'After generating the graph, obtain the echarts instance'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'after-set-option-once',
+          type: 'object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
+            'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        }
+      ],
+
+      events: [
+        {
+          name: 'ready',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
+            'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'ready-once',
+          type: '()=>void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
+            'en-US':
+              'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
         }
       ],
-      events: [],
       methods: [],
-      slots: []
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '组件默认插槽',
+            'en-US': 'Component Default Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        }
+      ]
     }
   ],
   types: [
     {
-      name: 'IChartProps',
+      name: 'Options',
       type: 'interface',
       code: `
-interface IChartProps {
-  afterConfig: () => void 
-  afterSetOption: () => void 
-  afterSetOptionOnce: () => void 
-  animation: object
-  axisPointer: object | array
-  backgroundColor: object | string
-  beforeConfig: () => void 
-  brush: object | array
-  cancelResizeCheck: boolean
-  changeDelay: number // 默认值 0 
-  colorMode: string
-  colors: array 
-  data: object | array
-  dataEmpty: boolean
-  dataZoom: object | array
-  events: object 
-  extend: object
-  geo: object | array
-  graphic: object | array
-  grid: object | array
-  height: string // 默认值 '400px' 
-  initOptions: object
-  judgeWidth: boolean // 默认值 false 
-  legend: object | array
-  legendPosition: string 
-  legendVisible: boolean // 默认值 true 
-  loading: boolean
-  markArea: object 
-  markLine: object 
-  markPoint: object 
-  notSetUnchange: array
-  radar: object
-  resizeDelay: number // 默认值 200 
-  resizeable: boolean // 默认值 true 
-  series: object | array
-  setOptionOpts: boolean | object // 默认值 true 
-  settings: object
-  textStyle: object | array
-  theme: object
-  themeName: object | string
-  timeline: object | array
-  title: object | array
-  toolbox: object | array
-  tooltip: object
-  tooltipFormatter: () => void 
-  tooltipVisible: boolean // 默认值 true 
-  visualMap: object | array 
-  width: string // 默认值 'auto' 
-  widthChangeDelay: number // 默认值 300 
-  xAxis: object | array
-  yAxis: object | array
-}`
-    },
-    {
-      name: 'IChartSettings',
-      type: 'interface',
-      code: `
-interface IChartSettings {
-  type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
-}`
+          interface Options {
+              // 见具体图表组件
+          }`
     }
   ]
 }

examples/sites/demos/apis/collapse.js

@@ -142,6 +142,17 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'title'
+        },
+        {
+          name: 'expand-icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义icon 图标',
+            'en-US': 'Customized icon'
+          },
+          mode: ['pc'],
+          pcDemo: 'icon'
         }
       ],
       events: [],

examples/sites/demos/apis/color-picker.js

@@ -65,7 +65,7 @@ export default {
       events: [
         {
           name: 'cancel',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '按下取消或点击外部的时触发该事件',

examples/sites/demos/apis/color-select-panel.js

@@ -52,7 +52,7 @@ export default {
       events: [
         {
           name: 'cancel',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '按下取消或点击外部的时触发该事件',

examples/sites/demos/apis/currency.js

@@ -10,8 +10,8 @@ export default {
           type: 'boolean',
           defaultValue: '该属性的默认值为 true',
           desc: {
-            'zh-CN': '是否显示清除按钮;是否可清空',
-            'en-US': 'Whether to display the Clear button; Clearable'
+            'zh-CN': '是否显示清除按钮',
+            'en-US': 'Whether to display the Clear button'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-service',
@@ -19,7 +19,7 @@ export default {
         },
         {
           name: 'disabled',
-          type: 'Boolen',
+          type: 'boolean',
           defaultValue: '该属性的默认值为 false',
           desc: {
             'zh-CN': '禁用',
@@ -116,14 +116,88 @@ export default {
           mfDemo: ''
         },
         {
-          name: 'v-model',
-          type: 'String / Number',
+          name: 'set-default',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否开启设置默认币种，默认值为 false',
+            'en-US':
+              'Indicates whether to enable the function of setting the default currency. The default value is false.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'set-default',
+          mfDemo: ''
+        },
+        {
+          name: 'set-default-currency',
+          type: 'function',
           defaultValue: '',
           desc: {
-            'zh-CN': '设置下拉框的值',
-            'en-US': ''
+            'zh-CN': '设置默认币种的自定义方法',
+            'en-US': 'Custom Method for Setting Default Currency'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'set-default-custom-service',
+          mfDemo: ''
+        },
+        {
+          name: 'fetch-default-currency',
+          type: 'function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置默认币种的服务',
+            'en-US': 'Services that set the default currency'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'set-default-custom-service',
+          mfDemo: ''
+        },
+        {
+          name: 'label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': `显示标题，设置 shape='filter' 属性切换至过滤器模式时有效，可参考 FilterBox 组件属性`,
+            'en-US': `Display title. This parameter is valid when shape='filter' is set to switch to the filter mode. For details, see the attributes of the FilterBox component.`
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter',
+          mfDemo: ''
+        },
+        {
+          name: 'drop-style',
+          type: 'object',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '自定义下拉选项样式',
+            'en-US': 'Custom drop-down options style'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter',
+          mfDemo: ''
+        },
+        {
+          name: 'shape',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': `通过 shape='filter' 属性切换至过滤器模式`,
+            'en-US': `Switch to the filter mode by using the shape='filter' attribute.`
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter',
+          mfDemo: ''
+        },
+        {
+          name: 'tip',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': `显示提示信息，设置 shape='filter' 属性切换至过滤器模式时有效，可参考 FilterBox 组件属性`,
+            'en-US': `Displays a message. This parameter is valid when shape='filter' is set to switch to the filter mode. For details, see the attributes of the FilterBox component.`
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter',
           mfDemo: ''
         }
       ],
@@ -131,13 +205,19 @@ export default {
         {
           name: 'change',
           type: '',
-          defaultValue: '',
+          defaultValue: '(arg1,arg2) => void',
           desc: {
-            'zh-CN':
-              'arg1:{Any|Array 单选并且未指定渲染类型时，是选中项的值字段，此时没有arg2参数；多选并且未指定渲染类型时，是选中项值字段组成的数组，此时没有arg2参数；单选并且渲染类型为树或者表格时，是选中项对象，此时没有arg2参数；多选并且渲染类型为树或者表格时，是选中项对象值字段组成的数组，此时有arg2参数；}，arg2:{Array 多选并且渲染类型为树或者表格时，是选中项对象组成的数组}',
-            'en-US': ''
+            'zh-CN': `
+              arg1:{Any|Array 单选并且未指定渲染类型时，是选中项的值字段，此时没有arg2参数；多选并且未指定渲染类型时，是选中项值字段组成的数组，此时没有arg2参数；单选并且渲染类型为树或者表格时，是选中项对象，此时没有arg2参数；多选并且渲染类型为树或者表格时，是选中项对象值字段组成的数组，此时有arg2参数；}，<br>
+              arg2:{Array 多选并且渲染类型为树或者表格时，是选中项对象组成的数组}
+            `,
+            'en-US': `
+              When arg1:{Any|Array is selected and the rendering type is not specified, this is the value field of the selected item. In this case, the arg2 parameter is not provided. If multiple options are selected and the rendering type is not specified, the value field of the selected items is an array. In this case, the arg2 parameter is not provided. If you select a single item and the rendering type is tree or table, the object is selected. In this case, the arg2 parameter is not provided. When multiple selections are selected and the rendering type is tree or table, the array is composed of the selected object value fields. In this case, the arg2 parameter is available.},<br>
+              arg2:{An array consisting of selected items when multiple Arrays are selected and the rendering type is tree or table}
+            `
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
           mfDemo: ''
         }
       ],

examples/sites/demos/apis/dialog-box.js

@@ -227,7 +227,7 @@ export default {
         {
           name: 'visible',
           type: 'boolean',
-          defaultValue: 'true',
+          defaultValue: 'false',
           desc: {
             'zh-CN': '控制弹出框显示与关闭',
             'en-US': 'Control pop-up display and closing'

examples/sites/demos/apis/dialog-select.js

@@ -434,6 +434,20 @@ export default {
           mode: ['pc'],
           pcDemo: ''
         },
+        {
+          name: 'footer-buttons',
+          type: 'Slot',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义弹窗底部按钮',
+            'en-US': 'Custom Pop Up Bottom buttons'
+          },
+          metaData: {
+            new: '3.18.0'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
         {
           name: 'option',
           type: 'Slot',
@@ -502,6 +516,7 @@ interface IDialogOption {
     {
       name: 'IGridOption',
       type: 'interface',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IGridOption {
   // 表格列配置

examples/sites/demos/apis/directives.js

@@ -0,0 +1,3 @@
+export default {
+  apis: []
+}

examples/sites/demos/apis/drawer.js

@@ -184,26 +184,38 @@ export default {
       events: [
         {
           name: 'close',
-          type: '()=> void',
+          type: '(force: boolean) => void',
           defaultValue: '',
           desc: {
-            'zh-CN': '关闭抽屉事件',
-            'en-US': 'Close drawer event'
+            'zh-CN': '关闭抽屉事件，参数 force 指定是否强制关闭',
+            'en-US': 'Close drawer event, and parameter force decides force close'
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'close-event',
+          pcDemo: 'events',
           mfDemo: ''
         },
         {
           name: 'confirm',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '确认事件，设置 :show-footer="true" 时有效',
             'en-US': 'Confirm event. This event is emit only when show-footer="true" is set'
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'confirm-event',
+          pcDemo: 'events',
+          mfDemo: ''
+        },
+        {
+          name: 'show',
+          type: '(instance: Component) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '抽屉显示事件',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'events',
           mfDemo: ''
         },
         {
@@ -240,6 +252,18 @@ export default {
           },
           mode: ['mobile-first'],
           mfDemo: ''
+        },
+        {
+          name: 'service',
+          type: '(configs: IDrawerConfigs) => Component',
+          typeAnchorName: 'IDrawerConfigs',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置并打开抽屉',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'use-through-method'
         }
       ],
       slots: [
@@ -285,5 +309,28 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IDrawerConfigs',
+      type: 'interface',
+      code: `
+interface IDrawerConfigs extends IDrawerProps {
+  // 方法调用的配置参数
+  events: {
+    // 监听事件
+    close: () => void
+    confirm: () => void
+    show: (instance: Component) => void
+  },
+  customSlots: {
+    // 插槽
+    default: string | VNode | (h) => VNode,
+    header: string | VNode | (h) => VNode,
+    headerRight: string | VNode | (h) => VNode,
+    footer: string | VNode | (h) => VNode
+}
+`
+    }
   ]
 }

examples/sites/demos/apis/dropdown.js

@@ -228,6 +228,22 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'visible-arrow'
+        },
+        {
+          name: 'lazy-show-popper',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否懒加载下拉菜单及内部的项，以优化性能，默认初始全加载菜单及内部项。',
+            'en-US':
+              'Indicates whether to lazily load the drop-down menu and internal items to optimize performance. The default value is false. The menu and internal items are loaded initially.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'lazy-show-popper',
+          mfDemo: '',
+          metaData: {
+            experimental: '3.18.0'
+          }
         }
       ],
       events: [
@@ -486,6 +502,7 @@ export default {
     {
       name: 'IMenuOption',
       type: 'interface',
+      depTypes: ['IItemData'],
       code: `
 interface IMenuOption {
   options: IItemData[]
@@ -498,6 +515,7 @@ interface IMenuOption {
     {
       name: 'IItemClickParam',
       type: 'interface',
+      depTypes: ['IItemData'],
       code: `        
 interface IItemClickParam {
   itemData: IItemData
@@ -526,7 +544,7 @@ interface IItemData {
       name: 'IButtonType',
       type: 'type',
       code: `        
-type IButtonType =  'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
 `
     },
     {

examples/sites/demos/apis/file-upload.js

@@ -177,7 +177,7 @@ export default {
           type: 'Object',
           defaultValue: '',
           desc: {
-            'zh-CN': '配置 EDM 下载功能所需的参数,例如：edm:{download:{token:()=>{}}},token为鉴权token',
+            'zh-CN': '配置 EDM 下载功能所需的参数,例如：edm:{download:{token:() =>{}}},token为鉴权token',
             'en-US': ''
           },
           mode: ['mobile-first'],
@@ -262,7 +262,8 @@ export default {
             'zh-CN': '限制文件大小，单位为 KB；当为 Number 类型时，小于该值停止上传；为数组时[min,max] 设置上传范围',
             'en-US': ''
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'file-size',
           mfDemo: ''
         },
         {
@@ -369,7 +370,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN':
-              '配置为 true,启用 EDM 上传文件夹的功能，最多只能上传 5 层;{edm:upload:{isFolder:true,token:()=>{}}}',
+              '配置为 true,启用 EDM 上传文件夹的功能，最多只能上传 5 层;{edm:upload:{isFolder:true,token:() =>{}}}',
             'en-US': ''
           },
           mode: ['mobile-first'],
@@ -524,7 +525,7 @@ export default {
           type: 'Function',
           defaultValue: '',
           desc: {
-            'zh-CN': '配置 EDM 批量打包下载的 token；配置结构为 edm:{download:packageToken:()=>{}},返回一个 Promise',
+            'zh-CN': '配置 EDM 批量打包下载的 token；配置结构为 edm:{download:packageToken:() =>{}},返回一个 Promise',
             'en-US': ''
           },
           mode: ['mobile-first'],
@@ -559,7 +560,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN':
-              "配置 EDM 预览功能所需的参数,例如：edm:{preview:{plugin：util.default,previewUrl:./_index.html?appid=应用Id,packageName: 'jslib',token:()=>{}}}",
+              "配置 EDM 预览功能所需的参数,例如：edm:{preview:{plugin：util.default,previewUrl:./_index.html?appid=应用Id,packageName: 'jslib',token:() =>{}}}",
             'en-US': ''
           },
           mode: ['mobile-first'],
@@ -718,7 +719,7 @@ export default {
           type: 'Object',
           defaultValue: '',
           desc: {
-            'zh-CN': '配置 EDM 上传功能所需的参数,例如：edm:{upload:{token:()=>{}}}',
+            'zh-CN': '配置 EDM 上传功能所需的参数,例如：edm:{upload:{token:() =>{}}}',
             'en-US': ''
           },
           mode: ['mobile-first'],

examples/sites/demos/apis/fluent-editor.js

@@ -0,0 +1,110 @@
+export default {
+  mode: ['pc', 'mobile-first'],
+  apis: [
+    {
+      name: 'fluent-editor',
+      type: 'component',
+      props: [
+        {
+          name: 'data-type',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '初始化的富文本数据格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'data-switch'
+        },
+        {
+          name: 'data-upgrade',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '富文本数据输出格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'data-switch'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否为不可编辑状态',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'disabled'
+        },
+        {
+          name: 'image-upload',
+          typeAnchorName: 'IImageUploadOptions',
+          type: 'IImageUploadOptions',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图片上传模块配置项',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'image-upload'
+        },
+        {
+          name: 'modelValue / v-model',
+          type: 'string',
+          defaultValue: "''",
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'Bound Value'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: "",
+          desc: {
+            'zh-CN': '编辑器配置项，参考 Quill 文档：https://quilljs.com/docs/configuration#options',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'options'
+        },
+        {
+          name: 'zIndex',
+          type: 'number',
+          defaultValue: "",
+          desc: {
+            'zh-CN': '编辑器的 z-index',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: ''
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
+  types: [
+    {
+      name: 'IImageUploadOptions',
+      type: 'interface',
+      code: `
+interface IImageUploadOptions {
+  url: string, // 图片上传地址
+  method: string, // 上传方法
+  name: string, // 图片名称
+  withCredentials: boolean, // 是否需要认证，开启后会在请求里带上 cookie 信息
+  headers: object, // 上传请求头部信息
+  csrf: string, // 请求 csrf 携带信息
+  success: (serverResponse: { file: { downloadUrl: string } }[], next: (imageUrl: string) => void) => void, // 上传成功回调信息
+  fail: (serverError: string) => void // 上传失败回调信息
+}
+      `
+    },
+  ]
+}

examples/sites/demos/apis/form.js

@@ -170,7 +170,7 @@ export default {
         },
         {
           name: 'popper-options',
-          typeAnchorName: 'popover#IPopperOption',
+          linkTo: 'popover#IPopperOption',
           type: 'Popover.IPopperOption',
           defaultValue: '',
           desc: {
@@ -639,7 +639,7 @@ interface IFormRules {
   trigger?: IFormTrigger | IFormTrigger[] 
   // 同步检验函数，调用回调传递错误信息。
   validator?: (
-    rule: IFormInnerRule, // from内部处理后的rule
+    rule: IFormInnerRule, // form内部处理后的rule
     value: any, // 表单model对应的值，根据表单项prop获取
     callback: (e: Error) => void
     data: object, // prop和value构造的对象
@@ -679,6 +679,7 @@ interface IFormErrorField {
     {
       name: 'IFormValidateMethod',
       type: 'function',
+      depTypes: ['IFormError'],
       code: `
 function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) => void ): Promise<boolean>
 `
@@ -686,6 +687,7 @@ function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) =>
     {
       name: 'IFormValidateFieldMethod',
       type: 'function',
+      depTypes: ['IFormError'],
       code: `
 function IFormValidateFieldMethod(
   prop: string | string[],

examples/sites/demos/apis/grid.js

@@ -143,6 +143,21 @@ export default {
           pcDemo: 'grid-context-menu#context-menu-footer-menu',
           mfDemo: ''
         },
+        {
+          name: 'custom-column-names',
+          type: 'string[]',
+          defaultValue: "['TinyGridColumn']",
+          metaData: {
+            new: '3.17.0'
+          },
+          desc: {
+            'zh-CN': '封装 grid-column 时需要配置此字段，提供给表格收集配置',
+            'en-US':
+              'This field needs to be configured when encapsulating grid-column and is provided for table collection configuration'
+          },
+          mode: ['pc'],
+          pcDemo: 'grid-faq#custom-column'
+        },
         {
           name: 'data',
           typeAnchorName: 'IRow',
@@ -675,7 +690,7 @@ export default {
         },
         {
           name: 'render-empty',
-          type: '()=> string | VNode',
+          type: '() => string | VNode',
           defaultValue: '',
           desc: {
             'zh-CN': '空数据渲染',
@@ -1058,6 +1073,19 @@ export default {
         }
       ],
       events: [
+        {
+          name: 'after-refresh-column',
+          type: '()=> void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '在新增或者删除列后，列配置是异步更新的，列配置刷新后触发的回调',
+            'en-US':
+              'After adding or deleting a column, the column configuration is updated asynchronously, and the callback is triggered after the column configuration is refreshed.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'grid-dynamically-columns#column-switching-scroll',
+          mfDemo: ''
+        },
         {
           name: 'before-page-change',
           typeAnchorName: 'IBeforePageChangeArgs',
@@ -1281,7 +1309,7 @@ export default {
         },
         {
           name: 'fullscreen',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '全屏时或关闭全屏时触发的时间',
@@ -1398,8 +1426,7 @@ export default {
         },
         {
           name: 'select-change',
-          typeAnchorName: 'ISelectChangeArgs',
-          type: '(args: ISelectChangeArgs, event: Event)=> void',
+          type: '(args: object, event: Event)=> void',
           defaultValue: '',
           desc: {
             'zh-CN': '只对 type=selection 有效，当手动勾选并且值发生改变时触发的事件',
@@ -1436,6 +1463,21 @@ export default {
           pcDemo: 'grid-event#event-toggle-expand-change-event',
           mfDemo: ''
         },
+        {
+          name: 'toggle-group-change',
+          type: '(row: IRow) => void',
+          defaultValue: '',
+          metaData: {
+            new: '3.17.0'
+          },
+          desc: {
+            'zh-CN': '当分组的展开和收起时会触发该事件',
+            'en-US': 'This event is triggered when the group is expanded and collapsed.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'grid-row-grouping#row-grouping-row-group-render',
+          mfDemo: ''
+        },
         {
           name: 'toggle-tree-change',
           typeAnchorName: 'IToggleTreeChangeArgs',
@@ -1480,7 +1522,7 @@ export default {
       methods: [
         {
           name: 'clearActived',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清除单元格激活状态',
@@ -1502,7 +1544,7 @@ export default {
         },
         {
           name: 'clearAll',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -1527,7 +1569,7 @@ export default {
         },
         {
           name: 'clearCurrentColumn',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '用于当前列，手动清空当前高亮的状态',
@@ -1549,7 +1591,7 @@ export default {
         },
         {
           name: 'clearCurrentRow',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '用于当前行，手动清空当前高亮的状态',
@@ -1620,7 +1662,7 @@ export default {
         },
         {
           name: 'clearRadioRow',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '用于单选行，手动清空用户的选择',
@@ -1642,7 +1684,7 @@ export default {
         },
         {
           name: 'clearRowExpand',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清空展开行状态，数据会恢复成未展开的状态',
@@ -1664,7 +1706,7 @@ export default {
         },
         {
           name: 'clearScroll',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清除滚动相关信息，还原到初始状态',
@@ -1686,7 +1728,7 @@ export default {
         },
         {
           name: 'clearSelected',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清除单元格选中状态',
@@ -1708,7 +1750,7 @@ export default {
         },
         {
           name: 'clearSelection',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '用于多选行，手动清空用户的选择',
@@ -1730,7 +1772,7 @@ export default {
         },
         {
           name: 'clearSort',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清空排序条件，数据会恢复成未排序的状态',
@@ -1752,7 +1794,7 @@ export default {
         },
         {
           name: 'clearTreeExpand',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动清空树形节点的展开状态，数据会恢复成未展开的状态',
@@ -1775,7 +1817,7 @@ export default {
         },
         {
           name: 'closeFilter',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动关闭筛选面板（某些特殊场景可能会用到）',
@@ -1797,7 +1839,7 @@ export default {
         },
         {
           name: 'closeMenu',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动关闭快捷菜单（某些特殊场景可能会用到）',
@@ -1879,7 +1921,7 @@ export default {
         {
           name: 'fullValidate',
           typeAnchorName: 'IRow',
-          type: '(rows: IRow[], callback: ()=> void)=> Promise',
+          type: '(rows: IRow[], callback: () => void)=> Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '表格完整校验函数，和 validate 的区别就是会对全量数据的所有规则进行完整校验',
@@ -1903,7 +1945,7 @@ export default {
         {
           name: 'getActiveRow',
           typeAnchorName: 'IRow',
-          type: '()=> IRow',
+          type: '() => IRow',
           defaultValue: '',
           desc: {
             'zh-CN': '获取已激活的行数据',
@@ -2041,7 +2083,7 @@ export default {
         {
           name: 'getCurrentRow',
           typeAnchorName: 'IRow',
-          type: '()=> IRow',
+          type: '() => IRow',
           defaultValue: '',
           desc: {
             'zh-CN': '用于当前行，获取当前行的数据',
@@ -2088,7 +2130,7 @@ export default {
         {
           name: 'getInsertRecords',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '获取新增的数据',
@@ -2111,7 +2153,7 @@ export default {
         {
           name: 'getRadioRow',
           typeAnchorName: 'IRow',
-          type: '()=> IRow',
+          type: '() => IRow',
           defaultValue: '',
           desc: {
             'zh-CN': '用于单选行，获取当已选中的数据',
@@ -2134,7 +2176,7 @@ export default {
         {
           name: 'getRecordset',
           typeAnchorName: 'IRecordset',
-          type: '()=> IRecordset',
+          type: '() => IRecordset',
           defaultValue: '',
           desc: {
             'zh-CN': '获取表格数据集（获取新增、删除、更改的数据，对于增删改查表格非常方便）',
@@ -2158,7 +2200,7 @@ export default {
         {
           name: 'getRemoveRecords',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '获取已删除的数据',
@@ -2250,7 +2292,7 @@ export default {
         {
           name: 'getSelectRecords',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '用于多选行，获取已选中的数据',
@@ -2273,7 +2315,7 @@ export default {
         {
           name: 'getTableColumn',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '获取当前表格的列（完整的全量表头列、处理条件之后的全量表头列、当前渲染中的表头列）',
@@ -2297,7 +2339,7 @@ export default {
         {
           name: 'getTableData',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -2323,7 +2365,7 @@ export default {
         {
           name: 'getUpdateRecords',
           typeAnchorName: 'IRow',
-          type: '()=> IRow[]',
+          type: '() => IRow[]',
           defaultValue: '',
           desc: {
             'zh-CN': '获取已修改的数据',
@@ -2345,7 +2387,7 @@ export default {
         },
         {
           name: 'handleFetch',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '触发表格的 fetch-data ',
@@ -2580,7 +2622,7 @@ export default {
         },
         {
           name: 'recalculate',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '重新计算表格（对于某些特殊场景可能会用到，比如隐藏的表格、更新列宽...等）',
@@ -2603,7 +2645,7 @@ export default {
         },
         {
           name: 'refreshColumn',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '刷新列配置（对于显示/隐藏列场景下可能会用到）',
@@ -2626,7 +2668,7 @@ export default {
         },
         {
           name: 'refreshData',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -2700,7 +2742,7 @@ export default {
         },
         {
           name: 'removeSelecteds',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '删除已选中的所有行数据',
@@ -2722,7 +2764,7 @@ export default {
         },
         {
           name: 'resetAll',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '手动重置列的所有操作，还原到初始状态（如果已关联工具栏，则会同步更新）',
@@ -2745,7 +2787,7 @@ export default {
         },
         {
           name: 'resetCustoms',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '手动重置列的显示/隐藏操作，还原到初始状态（如果已关联工具栏，则会同步更新）',
@@ -2768,7 +2810,7 @@ export default {
         },
         {
           name: 'resetResizable',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '手动重置列宽拖动的操作，还原到初始状态（如果已关联工具栏，则会同步更新）',
@@ -3156,7 +3198,7 @@ export default {
         },
         {
           name: 'toggleAllSelection',
-          type: '()=> Promise',
+          type: '() => Promise',
           defaultValue: '',
           desc: {
             'zh-CN': '用于多选行，切换所有行的选中状态',
@@ -3248,7 +3290,7 @@ export default {
         {
           name: 'validate',
           typeAnchorName: 'IRow',
-          type: '(rows: IRow | IRow[], callback: ()=> void)=> Promise',
+          type: '(rows: IRow | IRow[], callback: () => void)=> Promise',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -3362,6 +3404,17 @@ export default {
           mode: ['pc'],
           pcDemo: 'grid-editor#editor-custom-editor-select'
         },
+        {
+          name: 'filed',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置表格列的单元格显示字段',
+            'en-US': 'Set the cell display field for table columns'
+          },
+          mode: ['pc'],
+          pcDemo: 'grid#base-basic-usage'
+        },
         {
           name: 'filter',
           type: 'boolean | IFilterConfig',
@@ -3764,7 +3817,7 @@ export default {
       props: [
         {
           name: 'before-close-full-screen',
-          type: '()=> boolean',
+          type: '() => boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '关闭全屏前的拦截方法，返回 false 则阻止关闭全屏，返回 true 则不阻止',
@@ -3776,7 +3829,7 @@ export default {
         },
         {
           name: 'before-open-full-screen',
-          type: '()=> boolean',
+          type: '() => boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '全屏前的拦截方法，返回 false 则阻止全屏，返回 true 则不阻止',
@@ -3896,7 +3949,7 @@ export default {
         },
         {
           name: 'reset-setting',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '点击个性化面板的重置按钮触发该事件',
@@ -3958,6 +4011,7 @@ interface IRow {
     {
       name: 'IColumnConfig',
       type: 'interface',
+      depTypes: ['IValidRules'],
       code: `
 interface IColumnConfig {
   type: 'index' | 'radio' | 'checkbox'
@@ -4007,7 +4061,7 @@ interface IPagerConfig {
       type: 'type',
       code: `
 interface IDataHandler {
-  api: ()=> Promise
+  api: () => Promise
 }
       `
     },
@@ -4016,8 +4070,16 @@ interface IDataHandler {
       type: 'type',
       code: `
 interface IRowGroup {
+  // 自定义渲染内容
+  render: () => Vnode
   // 列标识符，行分组会将具有相同值的列进行分组展示
   field: string
+  // 3.17版本新增，配置分组行的列合并数量
+  colspan: number
+  // 3.17版本新增，控制分组行是否可以手动折叠
+  closeable: boolean
+  // 3.17版本新增，控制分组生成时是否默认收起
+  activeMethod: (row: IRow) => boolean
 }
       `
     },
@@ -4045,7 +4107,7 @@ interface IToolTipConfig {
   type?: 'normal' | 'warning' | 'error' | 'info' | 'success'
   effect?: 'dark' | 'light'
   // 自定义提示内容
-  contentMethod?: ()=> string | VNode
+  contentMethod?: () => string | VNode
 }
       `
     },
@@ -4067,7 +4129,7 @@ interface IContextMenuConfig {
   footer?: { 
     options: IMenuOptions
   }
-  visibleMethod?: ()=> boolean
+  visibleMethod?: () => boolean
 }
       `
     },
@@ -4176,7 +4238,7 @@ interface IRadioConfig {
   // 默认选中指定行（只会在初始化时被触发一次，需要有 row-id）
   checkRowKey?: string
   // 是否允许选中的方法，该方法的返回值用来决定这一行的 Radio 是否可以选中
-  checkMethod?: ()=> boolean
+  checkMethod?: () => boolean
 }
       `
     },
@@ -4192,7 +4254,7 @@ interface ISelectConfig {
   // 默认勾选开指定行（只会在初始化时被触发一次，需要有 row-id）
   checkRowKeys?: string[] 
   // 是否允许选中的方法，该方法的返回值用来决定这一行的 checkbox 是否可以勾选
-  checkMethod?: ()=> boolean 
+  checkMethod?: () => boolean 
   // 默认勾选所有（只会在初始化时被触发一次）}
   checkAll?: boolean
   // 是否显示全选按钮（如果 checkStrictly=true 则默认为 false）
@@ -4279,7 +4341,7 @@ interface IScrollLoadConfig {
       type: 'type',
       code: `
 interface IEventsConfig {
-  [field: string]: ()=> void
+  [field: string]: () => void
 }
       `
     },
@@ -4295,7 +4357,7 @@ interface IDropConfig {
   // 开启列拖拽
   column: boolean
   // 拖拽前函数，返回 false 取消拖动
-  onBeforeMove?: ()=> boolean
+  onBeforeMove?: () => boolean
   // 拖拽触发源选择器一般是class类名
   trigger?: string
   // 根据行的类名来控制是否可以拖动
@@ -4366,9 +4428,9 @@ interface IBeforePageChangeArgs {
   //当前的页大小
   currentPageSize: number
   //生效回调
-  callback: ()=> void
+  callback: () => void
   //失效回调
-  rollback: ()=> void
+  rollback: () => void
 }
       `
     },
@@ -4392,6 +4454,7 @@ interface IToolbarButtonClickArgs {
     {
       name: 'ICellClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ICellClickArgs {
   // 当前行
@@ -4418,6 +4481,7 @@ interface ICellContextMenuArgs {
     {
       name: 'ICellArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ICellArgs {
   //当前行
@@ -4444,6 +4508,7 @@ interface ICurrentChangeArgs {
     {
       name: 'IEditActivedArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IEditActivedArgs {
   // 当前行
@@ -4456,6 +4521,7 @@ interface IEditActivedArgs {
     {
       name: 'IEditClosedArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IEditClosedArgs {
   // 当前行
@@ -4468,6 +4534,7 @@ interface IEditClosedArgs {
     {
       name: 'IEditDisabledArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IEditDisabledArgs {
   //当前行
@@ -4492,6 +4559,7 @@ interface IFilterChangeArgs {
     {
       name: 'IFooterCellClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IFooterCellClickArgs {
   $columnIndex: number
@@ -4509,6 +4577,7 @@ interface IFooterCellClickArgs {
     {
       name: 'IContextMenuArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IContextMenuArgs {
   $columnIndex: number
@@ -4530,6 +4599,7 @@ interface IContextMenuArgs {
     {
       name: 'IFooterCellDblClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IFooterCellDblClickArgs {
   $columnIndex: number
@@ -4547,6 +4617,7 @@ interface IFooterCellDblClickArgs {
     {
       name: 'IHeaderCellClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IHeaderCellClickArgs {
   $columnIndex: number
@@ -4568,6 +4639,7 @@ interface IHeaderCellClickArgs {
     {
       name: 'IHeaderCellDblClickArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IHeaderCellDblClickArgs {
   // 列数据
@@ -4584,6 +4656,7 @@ interface IHeaderCellDblClickArgs {
     {
       name: 'IResizableChangeArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IResizableChangeArgs {
   // table组件的vue 实例 
@@ -4620,6 +4693,7 @@ interface IScrollArgs {
     {
       name: 'ISelectAllArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ISelectAllArgs {
   $columnIndex: number
@@ -4679,6 +4753,7 @@ interface IToggleTreeChangeArgs {
     {
       name: 'IValidErrorArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IValidErrorArgs { 
   // 校验的单元格信息对象
@@ -4695,6 +4770,7 @@ interface IValidErrorArgs {
     {
       name: 'ISortChangeArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ISortChangeArgs { 
   // 表格实例对象信息
@@ -4713,6 +4789,7 @@ interface ISortChangeArgs {
     {
       name: 'IClassNameArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IClassNameArgs {
   seq: number
@@ -4728,6 +4805,7 @@ interface IClassNameArgs {
     {
       name: 'IIndexMethodArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IIndexMethodArgs {
   row: IRow
@@ -4740,6 +4818,7 @@ interface IIndexMethodArgs {
     {
       name: 'IFormatConfig',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface IFormatConfig {
   // 列数据源
@@ -4791,6 +4870,7 @@ interface ISettingConfigs {
     {
       name: 'ISpanMethodArgs',
       type: 'type',
+      depTypes: ['IColumnConfig'],
       code: `
 interface ISpanMethodArgs {
   // 行标
@@ -4806,6 +4886,7 @@ interface ISpanMethodArgs {
     },
     {
       name: 'IExportCsvOptions',
+      depTypes: ['IRow'],
       type: 'type',
       code: `
 interface IExportCsvOptions {
@@ -4825,7 +4906,7 @@ interface IEditorConfig {
   component: 'input' | 'select' | Component
   // 传递给组件的事件集合
   events?: {
-    [event]: ()=> void
+    [event]: () => void
   }
   // 传递给编辑器组件的属性集合
   attrs?: {
@@ -4855,19 +4936,7 @@ interface IFilterConfig {
     label: string
     // 设置枚举数据的实际值属性字段， 默认'value'
     value: string 
-  }[] | ()=> Promise
-}
-      `
-    },
-    {
-      name: 'IOPConfig',
-      type: 'type',
-      code: `
-interface IOPConfig {
-  editConfig?: IEditConfig
-  pagerConfig?: IPagerConfig
-  columns: IColumnConfig[]
-  data: IRow[]
+  }[] | () => Promise
 }
       `
     },

examples/sites/demos/apis/guide.js

@@ -175,7 +175,7 @@ interface IDomData {
   //销毁的回调函数
   destroy: () => void
   // 完成的回调函数
-  completey: () => void
+  complete: () => void
 
   // 需要设置的按钮组
   button: {

examples/sites/demos/apis/input.js

@@ -396,6 +396,21 @@ export default {
           mobileDemo: 'counter',
           mfDemo: ''
         },
+        {
+          name: 'show-tooltip',
+          type: 'boolean',
+          defaultValue: 'true',
+          metaData: {
+            new: '3.18.0'
+          },
+          desc: {
+            'zh-CN': '只读状态下，文本超出是否悬浮提示',
+            'en-US': 'In the read-only state, whether the text exceeds the floating prompt'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'size',
+          mfDemo: ''
+        },
         {
           name: 'size',
           type: "'medium' | 'small' | 'mini'",
@@ -528,6 +543,20 @@ export default {
           },
           mode: ['mobile'],
           mobileDemo: ''
+        },
+        {
+          name: 'popup-more',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '在只读的基础上增加 <code>popup-more</code> 属性，可使文本域超出显示更多按钮，点击更多按钮可以查看详细信息。',
+            'en-US':
+              'The <code>popup-more</code> attribute is added to enable the text field to exceed the display of more buttons. You can click more buttons to view details.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'display-only-popup-more',
+          mfDemo: 'display-only-popup-more'
         }
       ],
       events: [

examples/sites/demos/apis/link-menu.js

@@ -7,7 +7,7 @@ export default {
       props: [
         {
           name: 'data',
-          type: 'Array',
+          type: 'array',
           defaultValue: '',
           desc: {
             'zh-CN': '设置收藏夹菜单的数据',
@@ -19,7 +19,7 @@ export default {
         {
           name: 'default-expand-all',
           type: 'boolean',
-          defaultValue: '',
+          defaultValue: 'true',
           desc: {
             'zh-CN': '设置打开菜单弹窗时默认是否展开所有节点，默认为 true',
             'en-US':
@@ -31,7 +31,7 @@ export default {
         {
           name: 'ellipsis',
           type: 'boolean',
-          defaultValue: '',
+          defaultValue: 'true',
           desc: {
             'zh-CN': '菜单内容超长时省略显示，默认为 true',
             'en-US': 'Omitted if the menu content is too long. The default value is true'
@@ -41,7 +41,7 @@ export default {
         },
         {
           name: 'get-menu-data-sync',
-          type: 'Function',
+          type: 'function',
           defaultValue: '',
           desc: {
             'zh-CN': '自定义菜单数据服务，直接返回数据',
@@ -109,10 +109,10 @@ export default {
         {
           name: 'wrap',
           type: 'boolean',
-          defaultValue: '',
+          defaultValue: 'true',
           desc: {
-            'zh-CN': '菜单内容超长时换行显示，默认为 false',
-            'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false'
+            'zh-CN': '菜单内容超长时换行显示，默认为 true',
+            'en-US': 'The menu content is displayed in a new line when it is too long. The default value is true'
           },
           mode: ['pc'],
           pcDemo: 'data-resource'

examples/sites/demos/apis/link.js

@@ -72,7 +72,21 @@ export default {
           pcDemo: 'basic-usage'
         }
       ],
-      events: [],
+      events: [
+        {
+          name: 'click',
+          type: '(ev: MouseEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击事件',
+            'en-US': 'click event'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
       methods: [],
       slots: [
         {

examples/sites/demos/apis/mind-map.js

@@ -60,7 +60,7 @@ export default {
         {
           name: 'expandNode',
           typeAnchorName: 'IMindExpandNode',
-          type: 'IMindnExpandNode',
+          type: 'IMindExpandNode',
           desc: {
             'zh-CN': '展开节点时会触发该事件',
             'en-US': 'This event will be triggered when expanding a node'

examples/sites/demos/apis/modal.js

@@ -18,7 +18,7 @@ export default {
         },
         {
           name: 'cancel-btn-props',
-          typeAnchorName: 'button#API',
+          linkTo: 'button#API',
           type: 'Button.props',
           defaultValue: '{}',
           desc: {
@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'confirm-btn-props',
-          typeAnchorName: 'button#API',
+          linkTo: 'button#API',
           type: 'Button.props',
           defaultValue: '{}',
           desc: {

examples/sites/demos/apis/multi-select.js

@@ -161,6 +161,7 @@ export default {
     {
       name: 'IMultiSelectMenu',
       type: 'interface',
+      depTypes: ['IMultiSelectOption'],
       code: `
 interface IMultiSelectMenu {
   title: string, // 菜单项标题

examples/sites/demos/apis/numeric.js

@@ -72,7 +72,7 @@ export default {
           type: 'string',
           defaultValue: '',
           desc: {
-            'zh-CN': '加减按钮位置，可选值为 <code>right</code>，表示加减按钮均位于最右侧',
+            'zh-CN': '加减按钮位置，可选值为 right，表示加减按钮均位于最右侧',
             'en-US': 'Control button position; The optional value of this attribute is right'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
@@ -145,8 +145,8 @@ export default {
           type: 'string',
           defaultValue: '',
           desc: {
-            'zh-CN': '组件<code>arial-label</code>属性取值',
-            'en-US': 'The value of <code>arial-label</code> attribute'
+            'zh-CN': '组件 arial-label 属性取值',
+            'en-US': 'The value of arial-label attribute'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
           pcDemo: '',
@@ -281,7 +281,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '计数器尺寸，该属性的可选值为 medium | small | mini',
-            'en-US': 'Counter size.The optional values of this attribute are medium | small | mini'
+            'en-US': 'Counter size,The optional values of this attribute are medium | small | mini'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'numeric-size',
@@ -305,11 +305,11 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '是否只能输入 <code>step</code> 的倍数',
+            'zh-CN': '是否只能输入 step 的倍数',
             'en-US': 'Whether to enter only multiples of step'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
-          pcDemo: '',
+          pcDemo: 'step',
           mobileDemo: 'step',
           mfDemo: ''
         },

examples/sites/demos/apis/pager.js

@@ -247,6 +247,9 @@ export default {
           name: 'total-fixed-left',
           type: 'boolean',
           defaultValue: 'false',
+          metaData: {
+            new: '3.18.0'
+          },
           desc: {
             'zh-CN': '总条目数是否固定在左侧，Aurora、SMB主题默认值为 true',
             'en-US':

examples/sites/demos/apis/pop-upload.js

@@ -29,7 +29,7 @@ export default {
         },
         {
           name: 'before-remove',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'before-upload',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -227,7 +227,7 @@ export default {
       events: [
         {
           name: 'error',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -239,7 +239,7 @@ export default {
         },
         {
           name: 'exceed',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(files: File | File[], fileList: IFile[]) => void',
           defaultValue: '',
           desc: {
@@ -251,7 +251,7 @@ export default {
         },
         {
           name: 'progress',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -263,7 +263,7 @@ export default {
         },
         {
           name: 'remove',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile, fileList: IFile[]) => void',
           defaultValue: '',
           desc: {
@@ -276,7 +276,7 @@ export default {
         },
         {
           name: 'success',
-          typeAnchorName: 'IFile',
+          linkTo: 'file-upload#IFile',
           type: '(res: ProgressEvent, file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -289,7 +289,21 @@ export default {
         }
       ],
       methods: [],
-      slots: []
+      slots: [
+        {
+          name: 'uploadTip',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义上传提示内容',
+            'en-US': 'Customize upload prompt content'
+          },
+          metaData: {
+            new: '3.18.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'upload-tip'
+        }
+      ]
     }
   ],
   types: [

examples/sites/demos/apis/popconfirm.js

@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'placement',
-          typeAnchorName: 'popover#IPopperPlacement',
+          linkTo: 'popover#IPopperPlacement',
           type: 'IPopperPlacement',
           defaultValue: "'top'",
           desc: {

examples/sites/demos/apis/popeditor.js

@@ -96,7 +96,7 @@ export default {
         },
         {
           name: 'grid-op',
-          typeAnchorName: 'grid#API',
+          linkTo: 'grid#API',
           type: `InstanceType&#60typeof TinyGrid&#62['$props']`,
           defaultValue: '',
           desc: {
@@ -141,8 +141,8 @@ export default {
         },
         {
           name: 'pager-op',
-          typeAnchorName: 'pager#API',
-          type: `InstanceType&#60typeof TinyPager&#62['$props']`,
+          linkTo: 'pager#API',
+          type: `InstanceType<typeof TinyPager>['$props']`,
           defaultValue: '',
           desc: {
             'zh-CN': '设置分页配置',
@@ -221,7 +221,7 @@ export default {
         },
         {
           name: 'selected-box-op',
-          typeAnchorName: 'dialog-select#ISelectedBoxOption',
+          linkTo: 'dialog-select#ISelectedBoxOption',
           type: 'ISelectedBoxOption',
           defaultValue: '',
           desc: {

examples/sites/demos/apis/popover.js

@@ -169,7 +169,8 @@ export default {
         },
         {
           name: 'popper-options',
-          type: 'object',
+          type: 'IPopperOption',
+          typeAnchorName: 'IPopperOption',
           defaultValue: '{}',
           desc: {
             'zh-CN': '弹出层参数',
@@ -283,7 +284,7 @@ export default {
       events: [
         {
           name: 'after-enter',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '进入的动画播放完毕后触发',
@@ -296,7 +297,7 @@ export default {
         },
         {
           name: 'after-leave',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '离开的动画播放完毕后触发',
@@ -309,7 +310,7 @@ export default {
         },
         {
           name: 'hide',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '隐藏时触发',
@@ -322,7 +323,7 @@ export default {
         },
         {
           name: 'show',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '显示时触发',
@@ -376,6 +377,8 @@ interface IPopperOption {
   removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
   updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
   boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
 }
       `
     },

examples/sites/demos/apis/qr-code.js

@@ -86,7 +86,7 @@ export default {
       events: [
         {
           name: 'change',
-          type: '()=> void',
+          type: '() => void',
           desc: {
             'zh-CN': '二维码发生变化后的回调',
             'en-US': 'chang callback'

examples/sites/demos/apis/search.js

@@ -62,6 +62,17 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置是否禁用【3.18.0新增】',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-prefix'
+        },
         {
           name: 'is-enter-search',
           type: 'boolean',

examples/sites/demos/apis/select.js

@@ -18,6 +18,19 @@ export default {
           pcDemo: 'all-text',
           mfDemo: 'all-text'
         },
+        {
+          name: 'show-all-text-tag',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN':
+              '指定多选模式全选后，在输入框中，是否只显示 all-text 指定的Tag。 默认值为 <code>false</code>，所有选项循环显示在输入框。',
+            'en-US':
+              'Specifies whether only the tag specified by all-text is displayed in the text box after the multi-select mode is specified. The default value is <code>false</code>. All options are displayed in the text box cyclically.'
+          },
+          mode: ['pc'],
+          pcDemo: 'all-text'
+        },
         {
           name: 'allow-copy',
           type: 'boolean',
@@ -625,12 +638,25 @@ export default {
           defaultValue: 'false',
           desc: {
             'zh-CN':
-              '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<code>show-proportion</code> 属性，同时设置只',
+              '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<code>show-proportion</code> 属性。',
             'en-US':
               'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
           },
           mode: ['pc'],
           pcDemo: 'multiple'
+        },
+        {
+          name: 'init-label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '通过 <code>init-label</code> 属性设置远程搜索或者嵌套树懒加载数据未获取到时显示的初始化 <code>label </code>值。',
+            'en-US':
+              'Use the <code>init-label</code> attribute to set the initial <code>label </code> value displayed when remote search or nested sloth loading data is not obtained.'
+          },
+          mode: ['pc'],
+          pcDemo: 'init-label'
         }
       ],
       events: [
@@ -910,8 +936,8 @@ interface ICacheOp {
   highlightClass?: string // 个性化高亮 class 名称，默认：memorize-highlight
   highlightNum?: number // 高亮个性化的条数,默认：Infinity
   cacheNum?: number // 存储个性化的条数,默认：Infinity
-  serialize?: ()=> string  // 本地存储序列化方法,默认：JSON.stringify
-  deserialize?: ()=> ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
+  serialize?: () => string  // 本地存储序列化方法,默认：JSON.stringify
+  deserialize?: () => ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
 }        
 `
     },

examples/sites/demos/apis/split.js

@@ -87,13 +87,34 @@ export default {
           pcDemo: 'split-threshold'
         },
         {
-          mode: []
+          name: 'border',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示边框',
+            'en-US': 'Indicates whether to display the border.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'right-bottom-value',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN':
+              '默认情况下，v-model的值为左/上面板的位置。 当设置right-bottom-value 为true时，指明 v-model的值为 右/下面板的位置。 ',
+            'en-US':
+              'By default, the value of v-model is the position of the left/top panel. When right-bottom-value is set to true, the value of v-model is the position of the right/lower panel.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
       ],
       events: [
         {
           name: 'left-top-click',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '左箭头收起时触发',
@@ -104,7 +125,7 @@ export default {
         },
         {
           name: 'moveend',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '拖拽结束的事件',
@@ -115,7 +136,7 @@ export default {
         },
         {
           name: 'movestart',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '拖拽开始的事件',

examples/sites/demos/apis/steps.js

@@ -225,6 +225,7 @@ export default {
     {
       name: 'IStepsItem',
       type: 'interface',
+      depTypes: ['IStepsStatus'],
       code: `
 interface IStepsItem {
   // 节点数据

examples/sites/demos/apis/switch.js

@@ -175,6 +175,30 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-open-close',
           mfDemo: ''
+        },
+        {
+          name: 'active-icon',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '开启时开关的图标',
+            'en-US': 'Icon of the switch when turned on'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-open-close-icon',
+          mfDemo: ''
+        },
+        {
+          name: 'inactive-icon',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭时开关的图标',
+            'en-US': 'Icon of the switch when turned off'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-open-close-icon',
+          mfDemo: ''
         }
       ]
     }

examples/sites/demos/apis/tabs.js

@@ -178,13 +178,11 @@ export default {
           type: "'small' | 'large'",
           defaultValue: '',
           desc: {
-            'zh-CN':
-              '设置 tabs 页签尺寸,该属性可选值为 large 或 small，其中 small 在 tabStyle 为 card 或者 border-card 时生效',
-            'en-US':
-              'Sets the tab size. The value can be large or small. This parameter is valid only when tabStyle is set to card or border-card'
+            'zh-CN': '设置 tabs 页签尺寸,该属性可选值为 large 或 small',
+            'en-US': 'Sets the tab size. The value can be large or small'
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'tab-style-card',
+          pcDemo: 'size',
           mfDemo: ''
         },
         {

examples/sites/demos/apis/tag-group.js

@@ -70,6 +70,7 @@ export default {
     },
     {
       name: 'ITagGroupItemClick',
+      depTypes: ['ITagGroupDataItem'],
       type: 'type',
       code: `type ITagGroupItemClick = (item: ITagGroupDataItem, index: number, event: Event) => void`
     }

examples/sites/demos/apis/time-line.js

@@ -146,8 +146,9 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '是否显示底部分割线，适用于横向时间线',
-            'en-US': 'Whether to display the bottom separator line of horizontal timeline'
+            'zh-CN': '是否显示底部指标三角，适用于横向时间线',
+            'en-US':
+              'Indicates whether to display the bottom indicator triangle, which is applicable to the horizontal timeline.'
           },
           mode: ['pc'],
           pcDemo: 'show-divider'

examples/sites/demos/apis/tooltip.js

@@ -321,6 +321,8 @@ interface IPopperOption {
   removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
   updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
   boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
 }
       `
     },

examples/sites/demos/apis/transfer.js

@@ -19,7 +19,7 @@ export default {
         },
         {
           name: 'columns',
-          typeAnchorName: 'grid#IColumnConfig',
+          linkTo: 'grid#IColumnConfig',
           type: 'IColumnConfig',
           defaultValue: '',
           desc: {
@@ -102,7 +102,7 @@ export default {
         },
         {
           name: 'left-columns',
-          typeAnchorName: 'grid#IColumnConfig',
+          linkTo: 'grid#IColumnConfig',
           type: 'IColumnConfig',
           defaultValue: '',
           desc: {
@@ -173,7 +173,7 @@ export default {
         },
         {
           name: 'right-columns',
-          typeAnchorName: 'grid#IColumnConfig',
+          linkTo: 'grid#IColumnConfig',
           type: 'IColumnConfig',
           defaultValue: '',
           desc: {
@@ -267,7 +267,7 @@ export default {
         },
         {
           name: 'tree-op',
-          typeAnchorName: 'tree#API',
+          linkTo: 'tree#API',
           type: 'Tree props',
           defaultValue: '',
           desc: {

examples/sites/demos/apis/tree-menu.js

@@ -283,17 +283,6 @@ export default {
           mode: ['pc'],
           pcDemo: 'only-check-children'
         },
-        {
-          name: 'prefix-icon',
-          type: 'Component',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '自定义前置图标',
-            'en-US': 'Customize the front icon'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-icon'
-        },
         {
           name: 'props',
           typeAnchorName: 'IProps',
@@ -381,8 +370,8 @@ export default {
           type: 'Component',
           defaultValue: '',
           desc: {
-            'zh-CN': '自定义后置图标',
-            'en-US': 'Customize the post icon'
+            'zh-CN': '全局设置带图标树形菜单',
+            'en-US': 'Global settings with icon tree menu'
           },
           mode: ['pc'],
           pcDemo: 'custom-icon'
@@ -397,6 +386,17 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'text-wrap'
+        },
+        {
+          name: 'clearable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '搜索框是否可清空',
+            'en-US': 'Can the search box be cleared'
+          },
+          mode: ['pc'],
+          pcDemo: 'clearable'
         }
       ],
       events: [

examples/sites/demos/apis/tree-select.js

@@ -0,0 +1,295 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'tree-select',
+      type: 'component',
+      props: [
+        {
+          name: 'autocomplete',
+          type: 'string',
+          defaultValue: "'off'",
+          desc: {
+            'zh-CN': '输入框的原生 autocomplete 属性',
+            'en-US': 'The native autocomplete attribute of the input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'click-expand',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '点击可展开或收起显示不全的选项。仅用于多选',
+            'en-US': 'Click to expand or collapse options. Only applicable to multiple selections'
+          },
+          pcDemo: 'collapse-tags'
+        },
+        {
+          name: 'collapse-tags',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否将多个标签折叠显示。仅适用多选',
+            'en-US': 'Whether to collapse multiple labels for display. Only applicable to multiple selections'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'collapse-tags',
+          mfDemo: 'collapse-tags'
+        },
+        {
+          name: 'copyable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用一键复制的功能。点击复制按钮一键复制所有标签的文本内容并以逗号分隔，仅适用于多选',
+            'en-US':
+              'Is the one click copy function enabled. Click the copy button to copy the text content of all labels with one click, separated by commas, only applicable to multiple selections'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-multi',
+          mfDemo: 'copy-multi'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用',
+            'en-US': 'Is it disabled'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'disabled',
+          mfDemo: 'disabled'
+        },
+        {
+          name: 'dropdown-icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉图标',
+            'en-US': 'Custom drop-down icon'
+          },
+          mode: ['pc'],
+          pcDemo: 'multiple'
+        },
+        {
+          name: 'drop-style',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉选项样式',
+            'en-US': 'Custom drop-down options style'
+          },
+          mode: ['pc'],
+          pcDemo: 'multiple'
+        },
+        {
+          name: 'input-box-type',
+          type: "'input' | 'underline'",
+          defaultValue: "'input'",
+          desc: {
+            'zh-CN': '输入框的显示类型',
+            'en-US': 'Display type of input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'input-box-type',
+          mfDemo: 'input-box-type'
+        },
+        {
+          name: 'max-visible-rows',
+          type: 'number',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '多行默认最大显示行数，超出后选项自动隐藏',
+            'en-US':
+              'Default maximum display lines for multiple lines, with automatic hiding option for exceeding lines'
+          },
+          mode: ['pc'],
+          pcDemo: 'collapse-tags'
+        },
+        {
+          name: 'modelValue / v-model',
+          type: 'string | number | Array<string|number>',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'Bind value'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'multiple',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否允许选择多个选项',
+            'en-US': 'Allow multiple options to be selected'
+          },
+          mode: ['pc'],
+          pcDemo: 'multiple'
+        },
+        {
+          name: 'name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框的原生 name 属性',
+            'en-US': 'The native name attribute of the input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'placeholder',
+          type: 'string',
+          defaultValue: "'请选择'",
+          desc: {
+            'zh-CN': '占位符',
+            'en-US': 'Placeholder'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'placement',
+          typeAnchorName: 'IPlacement',
+          type: 'IPlacement',
+          defaultValue: "'bottom-start'",
+          desc: {
+            'zh-CN': '下拉弹框相对于触发源的弹出位置',
+            'en-US': 'The pop-up position of the pull-down pop-up box relative to the trigger source'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'popper-append-to-body',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否将弹出框的 dom 元素插入至 body 元素',
+            'en-US': 'Whether to insert the dom element of the pop-up box into the body element'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉框的类名，用于自定义样式',
+            'en-US': 'The class name of the custom dropdown box, used for customizing styles'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'size',
+          type: "'medium' | 'small' | 'mini'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框尺寸。',
+            'en-US': 'Text box size'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'size',
+          mfDemo: 'size'
+        },
+        {
+          name: 'tag-type',
+          type: "'success' | 'info' | 'warning' | 'danger'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标签类型，仅多选适用。使用 aurora 主题时设置该属性为 info',
+            'en-US':
+              'Label type, only applicable for multiple choices. Set this property to info when using the aurora theme'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'tag-type',
+          mfDemo: 'tag-type'
+        },
+        {
+          name: 'text-field',
+          type: 'string',
+          defaultValue: "'label'",
+          desc: {
+            'zh-CN': '显示值字段',
+            'en-US': 'Show Value Fields'
+          },
+          mode: ['pc'],
+          pcDemo: 'map-field'
+        },
+        {
+          name: 'text-split',
+          type: 'string',
+          defaultValue: "','",
+          desc: {
+            'zh-CN': '自定义复制文本的分隔符，需结合 copyable 属性使用',
+            'en-US': 'The separator for custom copied text needs to be used in conjunction with the copyable attribute'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-multi',
+          mfDemo: 'copy-multi'
+        },
+        {
+          name: 'tree-op',
+          typeAnchorName: 'ITreeOption',
+          type: 'ITreeOption',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '下拉树时，内置树组件的配置，用法同 Tree 组件。',
+            'en-US':
+              'When pulling down a tree, the configuration of the built-in tree component is the same as that of the Tree component. To be used in conjunction with the render type attribute'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'value-field',
+          type: 'string',
+          defaultValue: "'value'",
+          desc: {
+            'zh-CN': '绑定值字段',
+            'en-US': 'Bind Value Field'
+          },
+          mode: ['pc'],
+          pcDemo: 'map-field'
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'ITreeOption',
+      type: 'interface',
+      code: `
+interface ITreeNode {
+  label: string         // 默认树节点的文本字段
+  id: number|string     // 树节点唯一标识
+  children: ITreeNode[] // 子节点
+}
+
+interface ITreeOption {
+  data: ITreeNode[] // 树数据，用法同 Tree
+}
+`
+    },
+    {
+      name: 'IPlacement',
+      type: 'type',
+      code: `
+type IPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+`
+    }
+  ]
+}

examples/sites/demos/apis/tree.js

@@ -478,6 +478,30 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'filter-view'
+        },
+        {
+          name: 'edit-config',
+          typeAnchorName: 'ITreeEditConfig',
+          type: 'ITreeEditConfig',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '用于编辑模式下参数配置,指示新增节点的 id ,是否显示 id 重复的警告等',
+            'en-US':
+              'Used for parameter configuration in editing mode, indicating the ID of a new node and whether to display a warning indicating duplicate IDs.'
+          },
+          mode: ['pc'],
+          pcDemo: 'edit'
+        },
+        {
+          name: 'highlight-query',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '通过 <code> highlightQuery </code> 属性，是否在匹配的节点中，高亮搜索文字。<br>',
+            'en-US': 'Indicates whether to highlight the search text in the matched node.'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter-view'
         }
       ],
       events: [
@@ -533,7 +557,7 @@ export default {
         },
         {
           name: 'close-edit',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '关闭编辑的事件',
@@ -728,7 +752,7 @@ export default {
         },
         {
           name: 'open-edit',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '进入编辑的事件',
@@ -1193,5 +1217,19 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'ITreeEditConfig',
+      type: 'type',
+      code: `
+interface ITreeEditConfig{
+  // 生成新节点的id
+  initNodeIdMethod: (node) => string;
+  // 新节点id与其它id重复时，是否在控制台显示告警。
+  noWarning: boolean;
+}
+      `
+    }
   ]
 }

examples/sites/demos/mobile-first/app/date-picker/about-clear.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p>默认可清除</p>
+    <tiny-date-picker v-model="value1"></tiny-date-picker>
+    <br />
+    <p>不可清除：</p>
+    <tiny-date-picker v-model="value2" :clearable="false"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value1: new Date(),
+      value2: new Date()
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/date-picker/basic-usage.vue

@@ -0,0 +1,20 @@
+<template>
+  <div style="width: 270px">
+    <tiny-date-picker v-model="value" type="date" title="日期选择"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: new Date()
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/date-picker/date-range.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <p>日期值：{{ value }}</p>
+    <tiny-date-picker v-model="value" type="daterange" :picker-options="onPickOptions"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: [new Date(2022, 10, 12), new Date(2022, 11, 25)],
+      onPickOptions: {
+        onPick: (val) => {
+          if (val.maxDate) {
+            Modal.message({
+              message: '当前获取的值 maxDate' + val.maxDate,
+              status: 'info'
+            })
+            Modal.message({
+              message: '当前获取的值 minDate：' + val.minDate,
+              status: 'info'
+            })
+          }
+        }
+      }
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/date-picker/datetime-range.vue

@@ -0,0 +1,21 @@
+<template>
+  <div style="width: 270px">
+    <p>{{ value }}</p>
+    <tiny-date-picker v-model="value" type="datetimerange"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: ['2023-11-21T01:11:11.000Z', '2023-12-07T23:08:24.000Z']
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/date-picker/datetime.vue

@@ -0,0 +1,20 @@
+<template>
+  <div style="width: 270px">
+    <tiny-date-picker v-model="value" type="datetime"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: ''
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/date-picker/disabled.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-button @click="disabled = !disabled">改为{{ disabled ? '启用' : '禁用' }}</tiny-button>
+    <br /><br />
+
+    <tiny-date-picker v-model="value" :disabled="disabled"></tiny-date-picker>
+    <br /><br />
+
+    <tiny-button @click="displayOnly = !displayOnly">改为{{ displayOnly ? '可操作' : '仅显示' }}模式</tiny-button>
+    <br /><br />
+
+    <tiny-date-picker v-model="value" :display-only="displayOnly"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      value: new Date(),
+      disabled: false,
+      displayOnly: false
+    }
+  }
+}
+</script>