forked from opentiny/tiny-vue
Compare commits
56 Commits
kagol/unpl
...
dev
| Author | SHA1 | Date |
|---|---|---|
ajaxzheng
|
5e02624fd9 | |
|
betavs
|
e7d9dd9e04 | |
 Kagol
|
b72b21da0d | |
|
ajaxzheng
|
de7adb69e5 | |
|
ajaxzheng
|
90deb78ed6 | |
|
gimmyhehe
|
bfeff2bed2 | |
|
zhangpaopao
|
3e15c0d991 | |
|
ajaxzheng
|
336ef0a456 | |
|
Davont
|
494bb14efb | |
|
ajaxzheng
|
a931e5fdc6 | |
|
James
|
65eb13eabd | |
|
allcontributors[bot]
|
6cd6630bdf | |
|
allcontributors[bot]
|
302f68a2e7 | |
|
allcontributors[bot]
|
a0450613f9 | |
|
Kagol
|
0778e60d0b | |
|
Davont
|
f3a912871a | |
|
Kagol
|
3f8001ac1d | |
|
黄怡林
|
340a4ad5c9 | |
|
ajaxzheng
|
77247ff044 | |
|
betavs
|
3d165a1d3c | |
|
chenxi-20
|
e339a704a8 | |
|
James
|
d4faaacdad | |
|
Davont
|
e164688824 | |
|
Kagol
|
f12c81c7c6 | |
|
chenxi-20
|
df0f9f2431 | |
|
chenxi-20
|
faf857c229 | |
|
chenxi-20
|
d4c2e6d1e5 | |
|
chenxi-20
|
5b5ffcb8d2 | |
|
AcWrong02
|
551ea69212 | |
|
AcWrong02
|
f6bd22b973 | |
|
AcWrong02
|
3ed478d26d | |
|
AcWrong02
|
538fb4925a | |
|
wuyiping0628
|
869449a7ae | |
|
James
|
cb5e98b02b | |
|
AcWrong02
|
d4323a52fe | |
|
Wind
|
30abcc4430 | |
|
Davont
|
4e7435bf41 | |
|
gimmyhehe
|
0bd0d8b9e0 | |
|
gimmyhehe
|
55e65a4464 | |
|
GaoNeng
|
e0b595af1a | |
|
黄怡林
|
1279d4a08c | |
|
Kagol
|
b4c1be5062 | |
|
chenxi-20
|
147de7fdde | |
|
gimmyhehe
|
e7ab21759b | |
|
chenxi-20
|
826f9edf65 | |
|
黄怡林
|
9589ea5805 | |
|
gimmyhehe
|
5430eed386 | |
|
wuyiping0628
|
64149d35b4 | |
|
gimmyhehe
|
ce46b8a06f | |
|
Zcating
|
f834ca7e05 | |
|
Ranier Yu
|
cca1a5eab4 | |
|
James
|
f42012cb1e | |
|
chenxi-20
|
c64c373b94 | |
|
Kagol
|
5e3b90e45f | |
|
gimmyhehe
|
e122ccfff4 | |
|
Kagol
|
efb0aa75f7 |
|
|
@ -573,6 +573,33 @@
|
|||
"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"
|
||||
]
|
||||
}
|
||||
],
|
||||
"contributorsPerLine": 8,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -62,6 +68,11 @@ packages/theme/src/theme/*-theme/component.js
|
|||
pnpm-lock.yaml
|
||||
gulp/bundle.json
|
||||
|
||||
# 屏蔽测试用例报告相关文件
|
||||
allure-report
|
||||
allure-results
|
||||
test-results
|
||||
|
||||
# 本地构建的saas相关资源文件
|
||||
examples/sites/public/tiny-vue*.js
|
||||
examples/sites/public/tiny-vue*.mjs
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"vue.volar",
|
||||
"vue.vscode-typescript-vue-plugin",
|
||||
"bradlc.vscode-tailwindcss",
|
||||
"davidanson.vscode-markdownlint",
|
||||
"dbaeumer.vscode-eslint",
|
||||
|
|
|
|||
|
|
@ -162,6 +162,11 @@ 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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
"sortablejs": "1.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.40.1"
|
||||
"@playwright/test": "~1.42.0"
|
||||
},
|
||||
"files": [
|
||||
"resources"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -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 // 菜单项图标
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ export default {
|
|||
{
|
||||
name: 'arrow',
|
||||
type: 'string',
|
||||
defaultValue: "该属性的默认值为 'hover'",
|
||||
defaultValue: "'hover'",
|
||||
desc: {
|
||||
'zh-CN': '切换箭头的显示效果，该属性的可选值为 always / hover / never',
|
||||
'en-US': 'Switch the display effect of arrows,The optional values for this attribute are always/hover/never'
|
||||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
{
|
||||
name: 'autoplay',
|
||||
type: 'boolean',
|
||||
defaultValue: '该属性的默认值为 false',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否自动切换',
|
||||
'en-US': 'Whether to automatically switch'
|
||||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '指示器的位置。该属性的可选值为 outside / none',
|
||||
'zh-CN': '指示器的位置，该属性的可选值为 outside / none',
|
||||
'en-US': 'The position of the indicator. The optional values for this attribute are outside/none'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
|
|
@ -67,10 +67,10 @@ export default {
|
|||
{
|
||||
name: 'indicator-style',
|
||||
type: 'String',
|
||||
defaultValue: '该属性的可选值为 light/dark ，默认为light。',
|
||||
defaultValue: "'light'",
|
||||
desc: {
|
||||
'zh-CN': '指示器的样式。',
|
||||
'en-US': 'The style of the indicator.'
|
||||
'zh-CN': '指示器的样式，该属性的可选值为 light/dark',
|
||||
'en-US': 'The style of the indicator, The optional values for this attribute are light/mark.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'indicator-style'
|
||||
|
|
@ -78,7 +78,7 @@ export default {
|
|||
{
|
||||
name: 'initial-index',
|
||||
type: 'number',
|
||||
defaultValue: '该属性的默认值为 0',
|
||||
defaultValue: '0',
|
||||
desc: {
|
||||
'zh-CN': '初始状态激活的幻灯片的索引，从 0 开始',
|
||||
'en-US': 'Index of slides activated in initial state, starting from 0'
|
||||
|
|
@ -90,7 +90,7 @@ export default {
|
|||
{
|
||||
name: 'interval',
|
||||
type: 'number',
|
||||
defaultValue: '该属性的默认值为 3000',
|
||||
defaultValue: '3000',
|
||||
desc: {
|
||||
'zh-CN': '自动切换的时间间隔，单位为毫秒',
|
||||
'en-US': 'The time interval for automatic switching, in milliseconds'
|
||||
|
|
@ -102,7 +102,7 @@ export default {
|
|||
{
|
||||
name: 'loop',
|
||||
type: 'boolean',
|
||||
defaultValue: '该属性的默认值为 true',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否循环显示',
|
||||
'en-US': 'Whether to display in a loop'
|
||||
|
|
@ -114,7 +114,7 @@ export default {
|
|||
{
|
||||
name: 'show-title',
|
||||
type: 'boolean',
|
||||
defaultValue: '该属性的默认值为 false',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否显示标题',
|
||||
'en-US': 'Is the title displayed'
|
||||
|
|
@ -126,11 +126,10 @@ export default {
|
|||
{
|
||||
name: 'trigger',
|
||||
type: 'string',
|
||||
defaultValue: "该属性的默认值为 'hover'",
|
||||
defaultValue: "'hover'",
|
||||
desc: {
|
||||
'zh-CN': '指示器的触发方式，默认为 hover。该属性的可选值为 click',
|
||||
'en-US':
|
||||
'The triggering method of the indicator is hover by default. The optional value for this attribute is click'
|
||||
'zh-CN': '指示器的触发方式，该属性的可选值为 hover / click',
|
||||
'en-US': 'The triggering method of the indicator. The optional value for this attribute is click'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'indicator-trigger',
|
||||
|
|
@ -139,7 +138,7 @@ export default {
|
|||
{
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
defaultValue: "该属性的默认值为 'horizontal'",
|
||||
defaultValue: "'horizontal'",
|
||||
desc: {
|
||||
'zh-CN': '走马灯的类型，该属性的可选值为 horizontal / vertical / card',
|
||||
'en-US': 'The type of horse lantern,The optional values for this attribute are horizontal/vertical/card'
|
||||
|
|
@ -152,11 +151,12 @@ export default {
|
|||
events: [
|
||||
{
|
||||
name: 'change',
|
||||
type: '',
|
||||
type: '(curIndex: number, preIndex: number) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '幻灯片切换时触发',
|
||||
'en-US': 'Trigger during slide transition'
|
||||
'zh-CN': '幻灯片切换时触发，第一个参数为当前幻灯片索引，第二个参数为上一张幻灯片索引',
|
||||
'en-US':
|
||||
'Trigger during slide transition, The first parameter is the current slide index, and the second parameter is the index of the previous slide'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'carousel-events',
|
||||
|
|
@ -193,8 +193,9 @@ export default {
|
|||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动切换幻灯片',
|
||||
'en-US': 'Manually switch slides'
|
||||
'zh-CN': '手动切换幻灯片，参数为需要切换的幻灯片的索引，从 0 开始',
|
||||
'en-US':
|
||||
'Manually switch slides,the parameter is the index of the slides that need to be switched, starting from 0'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'manual-play',
|
||||
|
|
@ -254,7 +255,7 @@ export default {
|
|||
'en-US': 'Default slot'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'manual-play'
|
||||
pcDemo: 'card-show'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,297 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
key: string // 高德地图密钥
|
||||
url: string // 高德地图密钥
|
||||
v: string // 高德地图版本,默认值: 1.4.3
|
||||
amap: object // 高德地图配置项 默认不触发
|
||||
series: object // 高德地图插件配置项
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
key: string // 百度地图密钥
|
||||
url: string // 百度地图密钥
|
||||
v: string // 百度地图版本,默认值: 1.4.3
|
||||
bmap: object // 百度地图配置项 默认不触发
|
||||
series: object // 百度地图插件配置项
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
legend: object // 图例配置, 默认显示
|
||||
xAxis: string | object // 配置x轴, 默认值: 图表数据data数据中data[0]对象的第一个key值
|
||||
yAxis: array | object // 配置y轴, 默认值: [50,20,50,20]
|
||||
padding: array // 图表内边距值, 默认值: [50,20,50,20]
|
||||
color: array | string // 颜色
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
|
||||
dataZoom: object // 区域缩放轴配置, 默认不显示
|
||||
linearGradient: object // 线性渐变
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填)
|
||||
type: string // 配置柱状图类型, 默认值: bar
|
||||
stepGradient: array // 柱体分段渐变
|
||||
axisPointer: object // 坐标指示器(数据背景区域样式),(支持 rgb 颜色、英文单词颜色、十六进制颜色), 默认值: rgba(25,25,25,0.08)
|
||||
topTipHtml: function // 顶部位置悬浮提示框, 默认不显示
|
||||
itemStyle: object // 图表数据点文本样式, 默认值: {barWidth: 8, barGap: '60%'}
|
||||
direction: string // 柱体方向, 默认值: vertical
|
||||
label: object | array // 柱体文本, 默认不显示
|
||||
lineDataName: array // 柱状图更改为折线图的数据名
|
||||
markline: object // 阈值线配置, 默认不显示
|
||||
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
color: array | string // 颜色
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填)
|
||||
series: array // 自定义图表series
|
||||
dataset: array // 自定义图表dataset
|
||||
|
||||
}`
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: light
|
||||
color: array | string // 颜色
|
||||
legend: object // 图例配置, 默认显示
|
||||
dataZoom: object // 区域缩放轴配置, 默认不显示
|
||||
event: object // 图表事件, 默认不触发
|
||||
MA: array // k线图的MA数据均线
|
||||
data: array // 图表数据(必填)
|
||||
upColor: string // 上行数据颜色
|
||||
downColor: string // 下行数据颜色
|
||||
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: light
|
||||
color: array | string // 颜色
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] }
|
||||
event: object // 图表事件, 默认不触发
|
||||
legend: object // 图例配置, 默认显示
|
||||
gap: number // 数据图形间距, 默认值: 1
|
||||
sort: string // 图表排序方式, 默认值: descending
|
||||
size: object // 图表大小, 默认不显示
|
||||
position: object // 图标位置, 默认显示
|
||||
label: object // 图表文本, 默认显示
|
||||
data: array // 图表数据(必填)
|
||||
series: object // 图表series
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: light
|
||||
color: array | string // 颜色
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] }
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填), 默认值: { value: 90, name: 'Utilization rate' }
|
||||
position: object // 图表位置及大小, 默认值: {center: ['50%','50%'], radius: '70%'}
|
||||
pointer: boolean // 刻度指针是否显示, 默认值: false
|
||||
min: number // 仪表盘最小刻度, 默认值: 0
|
||||
max: number // 仪表盘最大刻度, 默认值: 100
|
||||
text: object // 中心文本配置, 默认值: 显示data中的value和name值
|
||||
startAngle: number // 仪表盘起始角度, 默认值: 225
|
||||
endAngle: number // 仪表盘结束角度, 默认值: -45
|
||||
splitColor: array // 配置分割区间及颜色
|
||||
splitNumber: number // 刻度线数量配置, 默认值: 4
|
||||
splitLine: object // 刻度线及文本配置, 默认显示
|
||||
markLine: number // 阈值线配置
|
||||
gradientColor: array // 线性配置
|
||||
itemStyle: object // 进度条样式配置
|
||||
axisLabelStyle: object // 调整指针样式
|
||||
pointerStyle: object // 调整指针样式
|
||||
mask: object // 外层光晕蒙层配置
|
||||
orbitalColor: string // 仪表盘的轨道颜色
|
||||
silent: boolean // 是否关闭hover动效, 默认值: false
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-graph
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: light
|
||||
color: array | string // 颜色
|
||||
padding: array // 图表内边距值, 默认值: [50,20,50,20]
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] }
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填)
|
||||
type: string // 配置热力图类型
|
||||
borderColor: string // 日历热力图举行边框色, 默认值: #1F55B5
|
||||
showLabel: boolean // 日历热力图矩形文本显示, 默认值: true
|
||||
rectangleSize: number // 矩形热力图矩形矩形大小, 默认值: 8
|
||||
handle: object // 日历热力图手柄相关配置
|
||||
quantity: number // 蜂窝热力图单行排列数量设置, 默认值: 40
|
||||
changeProperty: string // 日历热力图热力的变化设置, 默认值: opacity
|
||||
xAxis: object // 配置x轴坐标数据, 默认显示
|
||||
yAxis: object // 配置y轴, 默认显示
|
||||
xAxisName: string // 配置x轴文本(建议使用xAxis.name)
|
||||
yAxisName: string // 配置y轴文本(建议使用yAxis.name)
|
||||
xAxisLine: object // 设置x轴样式(建议使用xAxis.line), 默认显示
|
||||
xAxisLabelRotate: number // x轴label旋转角度(建议使用xAxis.labelRotate)
|
||||
xAixsInterval:number | function // 配置x轴label间距(建议使用xAxis.interval),默认值: 0
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: light
|
||||
legend: object // 图例配置, 默认显示
|
||||
xAxis: string | object // 配置x轴, 默认值: 图表数据data数据中data[0]对象的第一个key值
|
||||
yAxis: array | object // 配置y轴, 默认值: [50,20,50,20]
|
||||
padding: array // 图表内边距值, 默认值: [50,20,50,20]
|
||||
color: array | string // 颜色
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] }
|
||||
tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
|
||||
dataZoom: object // 区域缩放轴配置, 默认不显示
|
||||
linearGradient: object // 线性渐变
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填)
|
||||
type: string // 配置柱状图类型, 默认值: bar
|
||||
stepGradient: array // 柱体分段渐变
|
||||
axisPointer: object // 坐标指示器(数据背景区域样式),(支持 rgb 颜色、英文单词颜色、十六进制颜色), 默认值: rgba(25,25,25,0.08)
|
||||
topTipHtml: function // 顶部位置悬浮提示框, 默认不显示
|
||||
itemStyle: object // 图表数据点文本样式, 默认值: {barWidth: 8, barGap: '60%'}
|
||||
direction: string // 柱体方向, 默认值: vertical
|
||||
label: object | array // 柱体文本, 默认不显示
|
||||
lineDataName: array // 柱状图更改为折线图的数据名
|
||||
markline: object // 阈值线配置, 默认不显示
|
||||
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: light
|
||||
color: array | string // 颜色
|
||||
padding: array // 图表内边距值, 默认值: [50,20,50,20]
|
||||
legend: object // 图例配置, 默认显示
|
||||
smooth: boolean // 是否关闭hover动效, 默认值: false
|
||||
silent: boolean // 是否关闭hover动效, 默认值: false
|
||||
data: array // 图表数据(必填)
|
||||
itemStyle: object // 折线是否更改为阶梯线, 默认值: false
|
||||
step: boolean // 折线图是否更改为阶梯线, 默认值: false
|
||||
predict: string // 折线是否更改为预测线的数据名
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] }
|
||||
tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
|
||||
xAxis: string | object // 配置x轴, 默认值: 图表数据data数据中data[0]对象的第一个key值
|
||||
yAxis: array | object // 配置y轴, 默认值: [50,20,50,20]
|
||||
dataZoom: object // 区域缩放轴配置, 默认不显示
|
||||
linearGradient: object // 线性渐变
|
||||
event: object // 图表事件, 默认不触发
|
||||
markline: object // 阈值线配置, 默认不显示
|
||||
markPoint: object // 峰值标记, 默认值: markPoint: {max:false, min:false}
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: light
|
||||
color: array | string // 颜色
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] }
|
||||
waveAnimation: boolean // 图表动画, 默认值: true
|
||||
backgroundstyle: object // 图表背景配置, 默认显示
|
||||
shape: string // 图表形状, 默认显示
|
||||
outline: object // 图表外框配置, 默认显示
|
||||
label: object // 图标文本, 默认显示
|
||||
data: array // 图表数据(必填)
|
||||
series: object // 图表series
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-map
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,321 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
color: array | string // 颜色
|
||||
title: object // 中心文本配置
|
||||
legend: object // 图例配置, 默认显示
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填)
|
||||
type: string // 圆盘图类型, 默认值: circle
|
||||
position: object // 图标位置及大小, 默认值: { center: ['50%','45%'], radius: ['44%', '50%'] }
|
||||
minAngle: number // 最小扇区角度
|
||||
silent: boolean // 是否关闭hover动效, 默认值: false
|
||||
label: object // 外侧文本配置, 默认显示
|
||||
itemStyle: object // 图表数据点文本样式, 默认值: { borderColor: '#ffffff', borderWidth: 3, borderRadius: 0 }
|
||||
stillShowZeroSum: boolean // 是否在数据和为0的时候仍显示扇区, 默认值: true
|
||||
selectedMode: boolean // 扇区选中模式配置, 默认值: false
|
||||
roseType: boolean // 是否展示成南丁格尔图, 默认值: false
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
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: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface options {
|
||||
theme: string // 主题
|
||||
color: array | string // 颜色
|
||||
padding: array // 图表内边距值
|
||||
tipHtml: function // 悬浮提示框内容配置
|
||||
event: object // 图表事件
|
||||
data: array // 图表数据
|
||||
name: string // 图表名称(必填)
|
||||
unit: string // 进度图右侧文本单位
|
||||
barWidth: number // 进度图柱形宽度
|
||||
minWidth: string // 进度图单项数据的最小宽度
|
||||
calibrationValue: number // 进度图标定值
|
||||
label: object // 堆叠进度图图表图元文本样式
|
||||
state: object // 根据状态设置颜色
|
||||
title: object // 进度图图表标题样式
|
||||
text: object // 进度图图表右侧文本样式
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
data: array // 图表数据(必填)
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
color: array | string // 颜色
|
||||
title: object // 中心文本配置
|
||||
unit: string // 单组数据雷达图的数据单位, 默认值: %
|
||||
legend: object // 图例配置, 默认显示
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
markline: number | object // 阈值线配置
|
||||
radarMax: number | array // 最外圈代表的数值, 默认值: 坐标系的最外圈为数据中的最大值
|
||||
tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
|
||||
event: object // 图表事件, 默认不触发
|
||||
position: object // 图表位置, 默认不触发
|
||||
radarMark: boolean // 底部坐标系刻度值显示, 默认值: true
|
||||
radar: object // 雷达图的坐标系配置
|
||||
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,321 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
color: array | string // 颜色
|
||||
title: object // 中心文本配置
|
||||
legend: object // 图例配置, 默认显示
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填)
|
||||
type: string // 圆盘图类型, 默认值: circle
|
||||
position: object // 图标位置及大小, 默认值: { center: ['50%','45%'], radius: ['44%', '50%'] }
|
||||
minAngle: number // 最小扇区角度
|
||||
silent: boolean // 是否关闭hover动效, 默认值: false
|
||||
label: object // 外侧文本配置, 默认显示
|
||||
itemStyle: object // 图表数据点文本样式, 默认值: { borderColor: '#ffffff', borderWidth: 3, borderRadius: 0 }
|
||||
stillShowZeroSum: boolean // 是否在数据和为0的时候仍显示扇区, 默认值: true
|
||||
selectedMode: boolean // 扇区选中模式配置, 默认值: false
|
||||
roseType: boolean // 是否展示成南丁格尔图, 默认值: false
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
color: array | string // 颜色
|
||||
padding: array // 图表内边距值, 默认值: [50,20,50,20]
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
data: array // 图表数据(必填)
|
||||
dragggble: boolean // 页面节点是否可拖动, 默认值: true
|
||||
widthSpace: array // 节点矩形样式配置, 默认值: [10,30]
|
||||
nodeAlign: string // 桑基图中节点的对齐方式, 默认值: justify
|
||||
label: object // 节点矩形中文本标签的样式
|
||||
itemStyle: object // 节点矩形连接带的样式
|
||||
sortType: string // 空节点的展示状态, 默认值: node
|
||||
emptyStatus: string // 空节点的展示状态, 默认值: node
|
||||
series: array // echarts原生属性
|
||||
grid: object // echarts原生属性
|
||||
xAxis: array // echarts原生属性
|
||||
yAxis: object // echarts原生属性
|
||||
tooltip: object // echarts原生属性
|
||||
title: object // echarts原生属性
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
color: array | string // 颜色
|
||||
padding: array // 图表内边距值, 默认值: [50,20,50,20]
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填)
|
||||
bubbleSize: array // 气泡大小范围, 默认值: [10,70]
|
||||
trendLineConfig: object // 配置趋势线
|
||||
xAxis: object // 配置x轴坐标数据, 默认显示
|
||||
xAxisLine: object // 设置x轴样式(建议使用xAxis.line), 默认显示
|
||||
xAxisLabelRotate: number // x轴label旋转角度(建议使用xAxis.labelRotate)
|
||||
xAixsInterval: number | function // 配置x轴label间距(建议使用xAxis.interval), 默认值: 0
|
||||
xAxisFullGrid: boolean // x轴坐标是否顶格(建议使用xAxis.fullGrid), 默认值: false
|
||||
xAxisName: string // 配置x轴文本(建议使用xAxis.name)
|
||||
yAxisName: string // 配置y轴文本
|
||||
xAxisType: string // x轴类型
|
||||
symbol: string // 节点图形类型, 默认值: circle
|
||||
symbolRotate: number // 节点图形旋转角度, 默认值: 0
|
||||
symbolOffset: array // 节点图形偏移
|
||||
cursor: string // 鼠标悬浮在节点图形的样式, 默认值: pointer
|
||||
label: object // 节点图形的文本样式, 此属性配置和echarts一致
|
||||
itemStyle: object // 节点图形的样式, 此属性配置和echarts一致
|
||||
emphasis: object // 高亮的图形和标签样式, 此属性配置和echarts一致
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,311 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
color: array | string // 颜色
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填)
|
||||
series: object // 图表series
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
padding: array // 图表内边距值, 默认值: [50,20,50,20]
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
data: array // 图表数据(必填)
|
||||
type: string // 树图类型
|
||||
direction: string // 线性树图起点方向, 默认值: left
|
||||
symbolSize: number // 树图树元大小, 默认值: 10
|
||||
lineType: string // 线性树图连线形状, 默认值: curve
|
||||
initialTreeDepth: number // 树图初始展开层级, 默认值: 1
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
legend: object // 图例配置, 默认显示
|
||||
xAxis: string | object // 配置x轴, 默认值: 图表数据data数据中data[0]对象的第一个key值
|
||||
yAxis: array | object // 配置y轴, 默认值: [50,20,50,20]
|
||||
padding: array // 图表内边距值, 默认值: [50,20,50,20]
|
||||
color: array | string // 颜色
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
|
||||
dataZoom: object // 区域缩放轴配置, 默认不显示
|
||||
linearGradient: object // 线性渐变
|
||||
event: object // 图表事件, 默认不触发
|
||||
data: array // 图表数据(必填)
|
||||
type: string // 配置柱状图类型, 默认值: bar
|
||||
stepGradient: array // 柱体分段渐变
|
||||
axisPointer: object // 坐标指示器(数据背景区域样式),(支持 rgb 颜色、英文单词颜色、十六进制颜色), 默认值: rgba(25,25,25,0.08)
|
||||
topTipHtml: function // 顶部位置悬浮提示框, 默认不显示
|
||||
itemStyle: object // 图表数据点文本样式, 默认值: {barWidth: 8, barGap: '60%'}
|
||||
direction: string // 柱体方向, 默认值: vertical
|
||||
label: object | array // 柱体文本, 默认不显示
|
||||
lineDataName: array // 柱状图更改为折线图的数据名
|
||||
markline: object // 阈值线配置, 默认不显示
|
||||
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
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: '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: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
theme: string // 主题, 默认值: cloud-light
|
||||
color: array | string // 颜色
|
||||
tipHtml: function // 悬浮提示框内容配置, 默认显示
|
||||
data: array // 图表数据(必填)
|
||||
gridSize: number // 词云图文本间距, 默认值: 16
|
||||
sizeRange: array // 字体范围, 默认值: [14,60]
|
||||
rotationRange: array // 文字旋转范围, 默认值: [0,0]
|
||||
rotationStep: number // 文字旋转步值, 默认值: 0
|
||||
shape: string // 词云图形状, 默认值: circle
|
||||
width: string // 词云图宽度, 默认值: 75%
|
||||
height: string // 词云图高度, 默认值: 80%
|
||||
maskImage: string // 词云图形状图片配置
|
||||
textColor: function // 词云图文本颜色
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -161,10 +161,10 @@ export default {
|
|||
{
|
||||
name: 'resize',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '实现窗口最大化',
|
||||
'en-US': 'Maximize windows'
|
||||
'zh-CN': '弹窗是否能切换全屏',
|
||||
'en-US': 'Whether the pop-up window can be switched to full screen'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'form-in-dialog'
|
||||
|
|
@ -245,6 +245,17 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'dialog-width'
|
||||
},
|
||||
{
|
||||
name: 'dialog-transition',
|
||||
type: 'string',
|
||||
defaultValue: ``,
|
||||
desc: {
|
||||
'zh-CN': '启动弹出动效由小变大',
|
||||
'en-US': 'Startup pop-up effect from small to large'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'transition-effect'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
@ -335,6 +346,18 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'open-close-events'
|
||||
},
|
||||
{
|
||||
name: 'resize',
|
||||
typeAnchorName: 'IResizeEvent',
|
||||
type: '(ev: IResizeEvent) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '弹窗大小变化时的事件，比如切换全屏状态时',
|
||||
'en-US': 'Event when the pop-up window size changes, for example, when the full-screen mode is switched.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'fullscreen'
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
|
|
@ -343,7 +366,7 @@ export default {
|
|||
name: 'default',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'Dialog 的内容',
|
||||
'zh-CN': 'Dialog 的内容插槽',
|
||||
'en-US': 'Dialog content'
|
||||
},
|
||||
mode: ['pc'],
|
||||
|
|
@ -353,7 +376,7 @@ export default {
|
|||
name: 'footer',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'Dialog 按钮操作区的内容',
|
||||
'zh-CN': 'Dialog 按钮操作区的内容插槽',
|
||||
'en-US': 'Dialog button operation area content'
|
||||
},
|
||||
mode: ['pc'],
|
||||
|
|
@ -363,7 +386,7 @@ export default {
|
|||
name: 'title',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'Dialog 标题区的内容',
|
||||
'zh-CN': 'Dialog 标题区的内容插槽',
|
||||
'en-US': 'Dialog content in the title area'
|
||||
},
|
||||
mode: ['pc'],
|
||||
|
|
@ -371,5 +394,19 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IResizeEvent',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IResizeEvent {
|
||||
// 当前的全屏状态
|
||||
fullscreen: boolean
|
||||
// 弹窗的元素
|
||||
dialog: HTMLElement
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -362,6 +362,18 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'nest-grid-multi'
|
||||
},
|
||||
{
|
||||
name: 'resize',
|
||||
typeAnchorName: 'IResizeEvent',
|
||||
type: '(ev: IResizeEvent) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '弹窗大小变化时的事件，比如切换全屏状态时',
|
||||
'en-US': 'Event when the pop-up window size changes, for example, when the full-screen mode is switched.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [
|
||||
|
|
@ -637,6 +649,18 @@ newPageSize: number // 变更后分页大小
|
|||
currentPage: number // 当前所在页
|
||||
currentPageSize: number // 当前分页大小
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'IResizeEvent',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IResizeEvent {
|
||||
// 当前的全屏状态
|
||||
fullscreen: boolean
|
||||
// 弹窗的元素
|
||||
dialog: HTMLElement
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,145 +0,0 @@
|
|||
export default {
|
||||
mode: ['mobile'],
|
||||
apis: [
|
||||
{
|
||||
name: 'Dialogbox',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
mode: []
|
||||
},
|
||||
{
|
||||
name: 'close-on-click-modal',
|
||||
type: 'Boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>是否可以通过点击遮罩层关闭弹窗，默认为 true ,可以在标签上设置:close-on-click-modal="false"不能通过点击遮罩层关闭弹窗。</p>',
|
||||
'en-US': 'Is show left arrow'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'close-on-click-modal'
|
||||
},
|
||||
{
|
||||
name: 'lock-scroll',
|
||||
type: 'Boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>Dialog弹出时是否禁用滚动条,该属性默认为true</p>',
|
||||
'en-US': 'Is show right arrow'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'lock-scroll'
|
||||
},
|
||||
{
|
||||
name: 'modal-append-to-body',
|
||||
type: 'Boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>遮罩层是否应用到 body 上，为 false 时遮罩层会应用到 DialogBox 的父元素上，该属性默认为true</p>',
|
||||
'en-US': 'Is show right text'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'slot-title'
|
||||
},
|
||||
{
|
||||
name: 'show-header',
|
||||
type: 'Boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>是否显示弹窗头部 header，默认值为 true 。</p>',
|
||||
'en-US': 'Is show left text'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'show-header'
|
||||
},
|
||||
{
|
||||
mode: []
|
||||
},
|
||||
{
|
||||
name: 'visible',
|
||||
type: 'String',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>控制弹出框显示与关闭</p>',
|
||||
'en-US': 'set main-title'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'with-input'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
mode: []
|
||||
},
|
||||
{
|
||||
name: 'close',
|
||||
type: 'Function()',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>Dialog 关闭的回调</p>',
|
||||
'en-US': 'Click'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'events-open-close'
|
||||
},
|
||||
{
|
||||
name: 'confirm',
|
||||
type: 'Function()',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>Dialog 确定按钮的的回调</p>',
|
||||
'en-US': 'Click'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'cancel-confirm'
|
||||
},
|
||||
{
|
||||
name: 'open',
|
||||
type: 'Function()',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>Dialog 打开的回调</p>',
|
||||
'en-US': 'Click'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'events-open-close'
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>Dialog 的内容</p>',
|
||||
'en-US': 'Click'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'slot-title'
|
||||
},
|
||||
{
|
||||
name: 'footer',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>Dialog 按钮操作区的内容</p>',
|
||||
'en-US': 'Click'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'slot-footer'
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>Dialog 标题区的内容</p>',
|
||||
'en-US': 'Click'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'slot-title'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '弹窗关闭前的回调，返回 false 会阻止弹窗关闭',
|
||||
'en-US': 'hook before close the drawer, and block close when return false'
|
||||
'en-US': 'Hook before close the drawer, and block close when return false'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'before-close'
|
||||
|
|
@ -22,7 +22,7 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义 class 样式',
|
||||
'en-US': ''
|
||||
'en-US': 'Custom class style'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
|
|
@ -32,8 +32,8 @@ export default {
|
|||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '控制抽屉开启或关闭宽度拖拽功能',
|
||||
'en-US': ''
|
||||
'zh-CN': '是否开启抽屉的宽度拖拽功能',
|
||||
'en-US': 'Whether to enable the drawer width drag function'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'dragable',
|
||||
|
|
@ -45,7 +45,8 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '是否开启 flex 盒子布局，开启后内容区域元素自适应撑开高度，默认值为 false',
|
||||
'en-US': ''
|
||||
'en-US':
|
||||
'Whether to enable the flex box layout. The content area element adaptively expands its height when enabled. The default value is false'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
|
|
@ -56,7 +57,7 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '弹出面板是否锁定浏览器滚动条，默认值为 true',
|
||||
'en-US': ''
|
||||
'en-US': 'Whether the pop-up panel locks the browser scroll bar. The default value is true'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
|
|
@ -66,8 +67,8 @@ export default {
|
|||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '控制遮罩层显示隐藏 ',
|
||||
'en-US': ''
|
||||
'zh-CN': '是否显示遮罩层',
|
||||
'en-US': 'Whether the mask layer is displayed'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'mask',
|
||||
|
|
@ -78,8 +79,9 @@ export default {
|
|||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 mask-closable 为 false 后将禁用该功能',
|
||||
'en-US': ''
|
||||
'zh-CN': '默认情况下，弹窗打开后，可以单击遮罩层关闭弹窗，设置 mask-closable 为 false 后将禁用该功能',
|
||||
'en-US':
|
||||
'By default, when the popup is open, you can close the popup by clicking the mask layer. Setting mask-closable to false disables this feature'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'mask-closable',
|
||||
|
|
@ -90,8 +92,8 @@ export default {
|
|||
type: "'left' | 'right' | 'top' | 'bottom' ",
|
||||
defaultValue: "'right'",
|
||||
desc: {
|
||||
'zh-CN': '添加 placement 属性设置抽屉的方向',
|
||||
'en-US': ''
|
||||
'zh-CN': '设置抽屉的方向',
|
||||
'en-US': 'Set the drawer orientation'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'placement',
|
||||
|
|
@ -102,8 +104,8 @@ export default {
|
|||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '控制关闭图标显示',
|
||||
'en-US': ''
|
||||
'zh-CN': '是否显示关闭图标',
|
||||
'en-US': 'Whether to display the close icon'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'show-close'
|
||||
|
|
@ -113,11 +115,11 @@ export default {
|
|||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '控制底部显示',
|
||||
'zh-CN': '是否显示底部',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'show-footer',
|
||||
pcDemo: 'Show bottom or not',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -125,8 +127,8 @@ export default {
|
|||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '控制头部显示',
|
||||
'en-US': ''
|
||||
'zh-CN': '是否显示头部',
|
||||
'en-US': 'Show headers or not'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'show-header',
|
||||
|
|
@ -138,7 +140,7 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '面板标题',
|
||||
'en-US': ''
|
||||
'en-US': 'Panel title'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
|
|
@ -148,8 +150,8 @@ export default {
|
|||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '控制抽屉显示与关闭',
|
||||
'en-US': ''
|
||||
'zh-CN': '控制抽屉的显示与关闭',
|
||||
'en-US': 'Control drawer display and close'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'basic-usage',
|
||||
|
|
@ -161,7 +163,7 @@ export default {
|
|||
defaultValue: "'500px'",
|
||||
desc: {
|
||||
'zh-CN': '设置抽屉的宽度',
|
||||
'en-US': ''
|
||||
'en-US': 'Set the width of the drawer'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'width',
|
||||
|
|
@ -173,20 +175,32 @@ export default {
|
|||
defaultValue: '2000',
|
||||
desc: {
|
||||
'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
|
||||
'en-US': ''
|
||||
'en-US': 'Custom stacking order (may be used in special scenarios, such as when occluded)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'z-index'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'open',
|
||||
type: '() => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '打开抽屉事件',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'open-event',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'close',
|
||||
type: '()=> void',
|
||||
type: '() => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '关闭抽屉事件',
|
||||
'en-US': ''
|
||||
'en-US': 'Close drawer event'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'close-event',
|
||||
|
|
@ -194,11 +208,11 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'confirm',
|
||||
type: '()=> void',
|
||||
type: '() => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '确认事件，设置 :show-footer="true" 时有效',
|
||||
'en-US': ''
|
||||
'en-US': 'Confirm event. This event is emit only when show-footer="true" is set'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'confirm-event',
|
||||
|
|
@ -209,8 +223,8 @@ export default {
|
|||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '面板显隐时触发',
|
||||
'en-US': ''
|
||||
'zh-CN': '抽屉显隐时触发',
|
||||
'en-US': 'Triggered when the drawer is displayed and hidden'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
|
|
@ -222,8 +236,8 @@ export default {
|
|||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '关闭面板',
|
||||
'en-US': ''
|
||||
'zh-CN': '关闭抽屉',
|
||||
'en-US': 'Close Drawer'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
|
|
@ -233,8 +247,8 @@ export default {
|
|||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '确认并关闭面板',
|
||||
'en-US': ''
|
||||
'zh-CN': '确认并关闭抽屉',
|
||||
'en-US': 'Confirm and close the drawer'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
|
|
@ -243,11 +257,9 @@ export default {
|
|||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '--',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '默认插槽',
|
||||
'en-US': ''
|
||||
'en-US': 'Default slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'default-slot',
|
||||
|
|
@ -255,11 +267,9 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'footer',
|
||||
type: '--',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '底部插槽',
|
||||
'en-US': ''
|
||||
'en-US': 'Footer slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'footer-slot',
|
||||
|
|
@ -267,11 +277,9 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'header',
|
||||
type: '--',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '头部插槽',
|
||||
'en-US': ''
|
||||
'en-US': 'header Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'header-slot',
|
||||
|
|
@ -279,11 +287,9 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'header-right',
|
||||
type: '--',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '头部右侧插槽',
|
||||
'en-US': ''
|
||||
'en-US': 'header-right slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'header-right-slot',
|
||||
|
|
|
|||
|
|
@ -327,6 +327,18 @@ export default {
|
|||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'image-bg-color',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置 `list-type` 等于 `picture-single` 或 `picture-card` 模式下图片的背景色。',
|
||||
'en-US':
|
||||
'Configure the background color of the image when `list-type` is set to `picture-single` or `picture-card`.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'is-folder-title',
|
||||
type: 'Boolean',
|
||||
|
|
@ -1067,7 +1079,7 @@ interface IHeaders {
|
|||
name: 'IListType',
|
||||
type: 'type',
|
||||
code: `
|
||||
type IListType = 'text' | 'picture' | 'picture-card' | 'thumb' | 'saas'
|
||||
type IListType = 'text' | 'picture' | 'picture-card' | 'thumb' | 'saas' // saas为3.14.0版本新增
|
||||
`
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -602,6 +602,16 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'error-label'
|
||||
},
|
||||
{
|
||||
name: 'prompt',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '强提示插槽',
|
||||
'en-US': 'Prompt slot'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'prompt-slot'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
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: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface options {
|
||||
theme: string // 主题
|
||||
color: array | string // 颜色
|
||||
padding: array // 图表内边距值
|
||||
tipHtml: function // 悬浮提示框内容配置
|
||||
event: object // 图表事件
|
||||
data: array // 图表数据
|
||||
name: string // 图表名称(必填)
|
||||
unit: string // 进度图右侧文本单位
|
||||
barWidth: number // 进度图柱形宽度
|
||||
minWidth: string // 进度图单项数据的最小宽度
|
||||
calibrationValue: number // 进度图标定值
|
||||
label: object // 堆叠进度图图表图元文本样式
|
||||
state: object // 根据状态设置颜色
|
||||
title: object // 进度图图表标题样式
|
||||
text: object // 进度图图表右侧文本样式
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -443,8 +443,9 @@ export default {
|
|||
type: 'number | string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '窗口的宽度',
|
||||
'en-US': 'window width'
|
||||
'zh-CN': '窗口的宽度（设置宽度像素或者百分比，浏览器窗口大小改变可居中显示)',
|
||||
'en-US':
|
||||
'The width of the window(Set the width in pixels or percentages, and the browser window size can be changed to display in the center)'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'resize',
|
||||
|
|
|
|||
|
|
@ -374,6 +374,8 @@ interface IPopperOption {
|
|||
bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
|
||||
followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
|
||||
removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
|
||||
updateHiddenPopperOnScroll: boolean // 滚动过程中是否更新隐藏的弹出层位置
|
||||
boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,6 +5,19 @@ export default {
|
|||
name: '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',
|
||||
|
|
@ -598,13 +611,26 @@ export default {
|
|||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否展示多选框选中条数和总条数的占比',
|
||||
'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: [
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default {
|
|||
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'fine-grained-mode'
|
||||
pcDemo: 'animation'
|
||||
},
|
||||
{
|
||||
name: 'avatar',
|
||||
|
|
@ -39,7 +39,7 @@ export default {
|
|||
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-layout'
|
||||
pcDemo: 'loading-completed'
|
||||
},
|
||||
{
|
||||
name: 'rows',
|
||||
|
|
@ -77,7 +77,7 @@ export default {
|
|||
'en-US': 'Content displayed after the loading is complete'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'custom-layout'
|
||||
pcDemo: 'loading-completed'
|
||||
},
|
||||
{
|
||||
name: 'placeholder',
|
||||
|
|
@ -106,7 +106,7 @@ export default {
|
|||
'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'fine-grained-mode'
|
||||
pcDemo: 'size'
|
||||
},
|
||||
{
|
||||
name: 'variant',
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'title',
|
||||
type: 'string | array',
|
||||
type: 'string | ITitleType',
|
||||
typeAnchorName: 'ITitleType',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置数字内容标题',
|
||||
|
|
@ -41,18 +42,6 @@ export default {
|
|||
pcDemo: 'basic-usage',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'group-separator',
|
||||
type: 'string',
|
||||
defaultValue: ',',
|
||||
desc: {
|
||||
'zh-CN': '设置千分位标志符',
|
||||
'en-US': 'Set Millennial Flag'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'prefix',
|
||||
type: 'string',
|
||||
|
|
@ -77,28 +66,16 @@ export default {
|
|||
pcDemo: 'basic-usage',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'formatter',
|
||||
type: '(value) => {}',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置自定义数字格式化',
|
||||
'en-US': 'Set custom number formatting'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'value-style',
|
||||
type: 'string | object | array',
|
||||
type: 'object | array',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置数字样式',
|
||||
'en-US': 'Set Number Style'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage',
|
||||
pcDemo: 'prefix-suffix-slot',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
|
|
@ -114,6 +91,7 @@ export default {
|
|||
'en-US': 'Digital content front slot'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'prefix-suffix-slot',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -125,6 +103,7 @@ export default {
|
|||
'en-US': 'Digital content rear slot'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'prefix-suffix-slot',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -136,9 +115,22 @@ export default {
|
|||
'en-US': 'Digital content title slot'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'statistic-slot',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ITitleType',
|
||||
type: '',
|
||||
code: `
|
||||
interface ITitleType {
|
||||
value?: string // 标题文本
|
||||
position?: string // 标题位置，取值：top | bottom
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default {
|
|||
props: [
|
||||
{
|
||||
name: 'active-color',
|
||||
type: 'String',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '当前页签的字体颜色',
|
||||
|
|
@ -237,7 +237,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'v-model',
|
||||
type: 'String',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '绑定值，选中选项卡的 name',
|
||||
|
|
@ -248,7 +248,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'v-model / modelValue',
|
||||
type: 'String',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '选中选项卡的 name',
|
||||
|
|
@ -284,8 +284,8 @@ export default {
|
|||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'beforeClose',
|
||||
type: 'Function',
|
||||
name: 'before-close',
|
||||
type: '(name: string)=> boolean | Promise<boolean>',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '关闭页签前的回调函数，入参为页签名。如果函数返回false 或 拒绝的Promise，则不关闭页签',
|
||||
|
|
@ -296,22 +296,57 @@ export default {
|
|||
pcDemo: 'tabs-events-close',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'more-show-all',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': `'更多'按钮触发的下拉面板是否展示全部页签项，适用于超大数据量的情况`,
|
||||
'en-US':
|
||||
'Indicates whether to display all tab items in the drop-down panel triggered by the More button. This parameter applies to the scenario where the data volume is large.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'more-show-all'
|
||||
},
|
||||
{
|
||||
name: 'overflow-title',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '页签是否在超过 title-width 省略显示',
|
||||
'zh-CN': '页签是否在超过 title-width 省略显示，优先级低于 tooltip-config',
|
||||
'en-US':
|
||||
'Callback function before closing a tab. The input parameter is the tab name. If the function returns false or a rejected Promise, the tab is not closed.'
|
||||
'Indicates whether to display the tab when the title width is exceeded. The priority is lower than tooltip-config.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'overflow-title',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'panel-max-height',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': `'更多'按钮触发的下拉面板最大高度，超出则显示滚动条，适用于超大数据量的情况`,
|
||||
'en-US':
|
||||
'Maximum height of the drop-down panel triggered by the More button. If the height is exceeded, a scroll bar is displayed. This applies to the scenario where the data volume is large'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'more-show-all'
|
||||
},
|
||||
{
|
||||
name: 'panel-width',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': `'更多'按钮触发的下拉面板的宽度`,
|
||||
'en-US': 'Width of the drop-down panel triggered by the More button'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'more-show-all'
|
||||
},
|
||||
{
|
||||
name: 'title-width',
|
||||
type: 'String',
|
||||
type: 'string',
|
||||
defaultValue: '256px',
|
||||
desc: {
|
||||
'zh-CN': '当 overflow-title 为 true 时，指定页签标题的最大宽度',
|
||||
|
|
|
|||
|
|
@ -319,6 +319,8 @@ interface IPopperOption {
|
|||
bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
|
||||
followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
|
||||
removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
|
||||
updateHiddenPopperOnScroll: boolean // 滚动过程中是否更新隐藏的弹出层位置
|
||||
boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-file-upload :action="action" list-type="picture-single" :file-list="fileList1" @preview="handlePreview">
|
||||
<tiny-file-upload
|
||||
:action="action"
|
||||
list-type="picture-single"
|
||||
:file-list="fileList1"
|
||||
@preview="handlePreview"
|
||||
image-bg-color="red"
|
||||
>
|
||||
</tiny-file-upload>
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -10,12 +16,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { FileUpload, Button } from '@opentiny/vue'
|
||||
import { FileUpload } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFileUpload: FileUpload,
|
||||
TinyButton: Button
|
||||
TinyFileUpload: FileUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -23,7 +28,7 @@ export default {
|
|||
fileList1: [
|
||||
{
|
||||
name: 'Snipaste_2022-12-02_18-05-51.png',
|
||||
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
|
||||
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/hae-logo.png`
|
||||
}
|
||||
],
|
||||
fileList2: [
|
||||
|
|
@ -46,8 +51,8 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handlePreview() {
|
||||
console.log(...arguments)
|
||||
handlePreview(...args) {
|
||||
console.log(...args)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<tiny-file-upload
|
||||
ref="upload"
|
||||
:action="action"
|
||||
:file-list="fileList"
|
||||
list-type="saas"
|
||||
@download-file="handleDownloadFile"
|
||||
></tiny-file-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FileUpload, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFileUpload: FileUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
action: 'http://localhost:3000/api/upload',
|
||||
fileList: [
|
||||
{
|
||||
docId: 'M1T2A1N548572512085860351',
|
||||
path: 'edm/one/',
|
||||
docVersion: 'V1',
|
||||
name: 'test1.png',
|
||||
docSize: 100 * 1024,
|
||||
size: 100 * 1024,
|
||||
serverName: 'ShenZhen'
|
||||
},
|
||||
{
|
||||
docId: 'M1T2A1N548572512085860352',
|
||||
path: 'edm/one/',
|
||||
docVersion: 'V1',
|
||||
name: 'test1.png',
|
||||
docSize: 100 * 1024,
|
||||
size: 100 * 1024,
|
||||
serverName: 'ShenZhen'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDownloadFile(file) {
|
||||
// 模拟下载成功场景
|
||||
if (file.docId === 'M1T2A1N548572512085860351') {
|
||||
file.showDownloadBar = true
|
||||
|
||||
// 更新downloadPercentage，vue2下写法
|
||||
this.$set(file, 'downloadPercentage', 0)
|
||||
// 更新downloadPercentage，vue3下写法
|
||||
// file.downloadPercentage = 0
|
||||
|
||||
const timer = setInterval(() => {
|
||||
if (file.downloadPercentage >= 100) {
|
||||
clearInterval(timer)
|
||||
// 下载完成后可以隐藏进度条，因为进度条有过渡动画，所以可以延迟1s再隐藏
|
||||
setTimeout(() => {
|
||||
file.showDownloadBar = false
|
||||
}, 1000)
|
||||
|
||||
Modal.message({ message: '下载成功', status: 'success' })
|
||||
return
|
||||
}
|
||||
file.downloadPercentage += 10
|
||||
}, 300)
|
||||
} else {
|
||||
// 模拟下载失败场景
|
||||
file.showDownloadBar = true
|
||||
|
||||
// 更新downloadPercentage，vue2下写法
|
||||
this.$set(file, 'downloadPercentage', 0)
|
||||
// 更新downloadPercentage，vue3下写法
|
||||
// file.downloadPercentage = 0
|
||||
|
||||
const timer = setInterval(() => {
|
||||
if (file.downloadPercentage >= 50) {
|
||||
clearInterval(timer)
|
||||
// file.showDownloadBar = false
|
||||
file.downloadStatus = 'exception'
|
||||
Modal.message({ message: '下载失败', status: 'error' })
|
||||
return
|
||||
}
|
||||
file.downloadPercentage += 10
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -96,7 +96,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `download-all` 事件，会显示下载全部按钮，点击下载全部按钮会触发 `download-all` 事件<p>',
|
||||
'<p>文件上传模式，配置 `download-all` 事件，会显示下载全部按钮，点击下载全部按钮会触发 `download-all` 事件。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['download-all.vue']
|
||||
|
|
@ -109,11 +109,25 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `download-file` 事件，已上传的文件会显示下载按钮，点击下载按钮会触发 `download-file` 事件<p>',
|
||||
'<p>文件上传模式，配置 `download-file` 事件，已上传的文件会显示下载按钮，点击下载按钮会触发 `download-file` 事件。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['download.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-download-bar',
|
||||
name: {
|
||||
'zh-CN': '下载进度条',
|
||||
'en-US': 'Download progress bar'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过给 file 对象设置 `showDownloadBar:true` 可以显示下载进度条，`downloadPercentage` 属性传入下载进度，`downloadStatus` 设置下载状态。<p>',
|
||||
'en-US':
|
||||
'<p>You can set the `showDownloadBar:true` attribute of the file object to display the download progress bar, set the`downloadPercentage` attribute to transfer the download progress, and set the`downloadStatus` to set the download status.</p>'
|
||||
},
|
||||
codeFiles: ['show-download-bar.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'download-picture',
|
||||
name: {
|
||||
|
|
@ -122,7 +136,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>图片上传模式，配置 `download-file` 事件，已上传的文件会显示下载图标，点击下载按钮会触发 `download-file` 事件<p>',
|
||||
'<p>图片上传模式，配置 `download-file` 事件，已上传的文件会显示下载图标，点击下载按钮会触发 `download-file` 事件。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['download-picture.vue']
|
||||
|
|
@ -135,7 +149,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传按钮，点击重新上传按钮会触发 `re-upload` 事件<p>',
|
||||
'<p>文件上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传按钮，点击重新上传按钮会触发 `re-upload` 事件。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['re-upload.vue']
|
||||
|
|
@ -148,7 +162,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>图片上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传图标，点击重新上传按钮会触发 `re-upload` 事件<p>',
|
||||
'<p>图片上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传图标，点击重新上传按钮会触发 `re-upload` 事件。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['re-upload-picture.vue']
|
||||
|
|
@ -308,7 +322,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可配置 `file-list` 属性展示对应的文件<p>',
|
||||
'zh-CN': '<p>可配置 `file-list` 属性展示对应的文件。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['drag-file-list.vue']
|
||||
|
|
@ -321,7 +335,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`trigger-click` 点击文件上传时触发的事件<br>`preview` 点击预览时触发的事件<br> `download-file` 点击下载时触发的事件<br>`download-all` 点击全部下载时触发的事件<br>`re-upload` 点击重新上传时触发的事件<br>`click-file-list` 点击上传的文件列表时触发的事件<p>',
|
||||
'<p>`trigger-click` 点击文件上传时触发的事件<br>`preview` 点击预览时触发的事件<br> `download-file` 点击下载时触发的事件<br>`download-all` 点击全部下载时触发的事件<br>`re-upload` 点击重新上传时触发的事件<br>`click-file-list` 点击上传的文件列表时触发的事件。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['event-trigger-click.vue']
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="w-96">
|
||||
<tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="96px" show-message>
|
||||
<tiny-form-item label="必填项" prop="users" required>
|
||||
<template #prompt>
|
||||
<div class="relative sm:absolute text-xs leading-normal text-color-alert" title="强提示插槽">强提示插槽</div>
|
||||
</template>
|
||||
<tiny-input v-model="createData.users"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="URL" prop="url">
|
||||
<tiny-input v-model="createData.url"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item>
|
||||
<tiny-button type="primary" @click="handleSubmit('ruleForm')" class="ml-24"> 提交 </tiny-button>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyForm: Form,
|
||||
TinyFormItem: FormItem,
|
||||
TinyInput: Input,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
createData: {
|
||||
users: '',
|
||||
url: ''
|
||||
},
|
||||
rules: {
|
||||
users: [
|
||||
{ required: true, message: '必填', trigger: 'blur' },
|
||||
{ min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
|
||||
],
|
||||
url: { type: 'url' }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
Modal.alert('提交成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -215,6 +215,18 @@ export default {
|
|||
'<p>Set the `validate-debounce` attribute of FormItem to `true` to enable the verification anti-jitter function. In the case of continuous input, the verification starts when the last input ends. The default value is `false`.</p>'
|
||||
},
|
||||
codeFiles: ['validate-debounce.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'prompt-slot',
|
||||
name: {
|
||||
'zh-CN': '强提示插槽',
|
||||
'en-US': 'Prompt slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `prompt` 插槽，自定义强提示插槽的内容。</p>',
|
||||
'en-US': '<p>Customize the content of the strong prompt slot in the `prompt` slot. </p>'
|
||||
},
|
||||
codeFiles: ['prompt-slot.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
/* 文本超出两行显示...，IE下不支持 */
|
||||
.multi-line {
|
||||
display: -webkit-box;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-tabs v-model="activeName" tab-style="card" :with-close="true" @close="close">
|
||||
<tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
|
||||
<tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
|
||||
{{ item.content }}
|
||||
</tiny-tab-item>
|
||||
|
|
@ -47,6 +47,10 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
beforeClose(name) {
|
||||
// 只能关闭标签页“其他组件”
|
||||
return name === 'fifth'
|
||||
},
|
||||
close(name) {
|
||||
this.$message({
|
||||
title: 'close 事件',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('基本用法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#base')
|
||||
|
||||
const buttons = page.locator('.button-wrap .tiny-mobile-button')
|
||||
|
||||
// 主要按钮
|
||||
await expect(buttons.first()).toHaveClass(/tiny-mobile-button--primary/)
|
||||
await expect(buttons.first()).toHaveCSS('background-color', 'rgb(25, 25, 25)')
|
||||
await expect(buttons.first()).toHaveCSS('color', 'rgb(255, 255, 255)')
|
||||
|
||||
// 次要按钮
|
||||
await expect(buttons.nth(1)).toHaveClass(/tiny-mobile-button--secondary/)
|
||||
await expect(buttons.nth(1)).toHaveCSS('background-color', 'rgb(255, 255, 255)')
|
||||
await expect(buttons.nth(1)).toHaveCSS('color', 'rgb(25, 25, 25)')
|
||||
|
||||
// 危险按钮
|
||||
await expect(buttons.nth(2)).toHaveClass(/tiny-mobile-button--danger/)
|
||||
await expect(buttons.nth(2)).toHaveCSS('border-color', 'rgb(242, 48, 48)')
|
||||
await expect(buttons.nth(2)).toHaveCSS('color', 'rgb(242, 48, 48)')
|
||||
|
||||
// 文字按钮
|
||||
await expect(buttons.nth(3)).toHaveClass(/tiny-mobile-button--text/)
|
||||
await expect(buttons.nth(3)).toHaveCSS('border-style', 'none')
|
||||
|
||||
// 纯图标按钮
|
||||
await expect(buttons.nth(4)).toHaveClass(/tiny-mobile-button--icon/)
|
||||
await expect(buttons.nth(4).locator('span')).toBeEmpty()
|
||||
|
||||
// 图标按钮
|
||||
await expect(buttons.nth(5)).toHaveClass(/tiny-mobile-button--icon/)
|
||||
await expect(buttons.nth(5)).toContainText('图标按钮')
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('禁用', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#disabled')
|
||||
|
||||
const button = page.locator('#disabled .tiny-mobile-button').first()
|
||||
|
||||
await expect(button).toHaveClass(/is-disabled/)
|
||||
await expect(button).toHaveCSS('background-color', 'rgb(240, 240, 240)')
|
||||
await expect(button).toHaveCSS('color', 'rgb(194, 194, 194)')
|
||||
await expect(button).toHaveCSS('cursor', 'not-allowed')
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#event')
|
||||
|
||||
const button = page.locator('#event .tiny-mobile-button')
|
||||
|
||||
await button.click()
|
||||
await expect(button).toHaveClass(/is-loading/)
|
||||
await page.waitForTimeout(2000)
|
||||
await expect(button).not.toHaveClass(/is-loading/)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义图标', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#icon')
|
||||
|
||||
const buttons = page.locator('#icon .tiny-mobile-button')
|
||||
|
||||
await expect(buttons.first()).toHaveClass(/tiny-mobile-button--icon/)
|
||||
await expect(buttons.first().locator('.is-icon')).toBeVisible()
|
||||
|
||||
await expect(buttons.nth(1)).toHaveClass(/tiny-mobile-button--icon/)
|
||||
await expect(buttons.nth(1).locator('.is-icon')).toBeVisible()
|
||||
await expect(buttons.nth(1).locator('span')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('加载中状态', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#loading')
|
||||
|
||||
const buttons = page.locator('.button-wrap .tiny-mobile-button')
|
||||
|
||||
await expect(buttons.first()).toHaveClass(/is-loading/)
|
||||
await expect(buttons.first().locator('.tiny-mobile-button-loading-white')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('重置时间', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#reset-time')
|
||||
|
||||
const button = page.locator('.button-wrap .tiny-mobile-button')
|
||||
await button.click()
|
||||
|
||||
await expect(button).toHaveClass(/is-disabled/)
|
||||
await page.waitForTimeout(500)
|
||||
await expect(button).not.toHaveClass(/is-disabled/)
|
||||
})
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('尺寸', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#size')
|
||||
|
||||
const buttons = page.locator('.button-wrap .tiny-mobile-button')
|
||||
|
||||
// 主要按钮
|
||||
const smallPrimaryBtn = buttons.first()
|
||||
const size = await smallPrimaryBtn.boundingBox()
|
||||
await expect(smallPrimaryBtn).toHaveClass(/tiny-mobile-button--small/)
|
||||
expect(size?.height).toBeCloseTo(28, 1)
|
||||
expect(smallPrimaryBtn).toHaveCSS('font-size', '12px')
|
||||
|
||||
// 文字按钮
|
||||
const smallTextBtn = buttons.nth(3)
|
||||
await expect(smallTextBtn).toHaveClass(/tiny-mobile-button--small/)
|
||||
expect(smallTextBtn).toHaveCSS('font-size', '12px')
|
||||
|
||||
// 图标按钮
|
||||
const smallIconBtn = buttons.nth(4)
|
||||
const iconSize = await smallIconBtn.locator('.tiny-icon').boundingBox()
|
||||
expect(iconSize?.width).toBeCloseTo(16, 1)
|
||||
})
|
||||
|
|
@ -19,7 +19,7 @@ test.describe('文本域可缩放', () => {
|
|||
|
||||
const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
|
||||
|
||||
await expect(textarea.nth(4)).toHaveClass(/is-autosize/)
|
||||
await expect(textarea.nth(5)).toHaveClass(/is-autosize/)
|
||||
await expect(textarea.nth(6)).toHaveClass(/is-autosize/)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义遮罩背景色', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('loading#background')
|
||||
|
||||
const loading = page.locator('#background .tiny-mobile-loading')
|
||||
await expect(loading).toHaveCSS('background-color', 'rgba(25, 25, 25, 0.376)')
|
||||
})
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('基本用法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('loading#base')
|
||||
|
||||
const loading = page.locator('#base .tiny-mobile-loading')
|
||||
const loadingIcon = loading.locator('.tiny-mobile-loading__icon')
|
||||
|
||||
await expect(loading).toBeVisible()
|
||||
await expect(loading).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.294)')
|
||||
await expect(loadingIcon).toBeVisible()
|
||||
await expect(loadingIcon).toHaveCSS('width', '24px')
|
||||
await expect(loadingIcon).toHaveCSS('height', '24px')
|
||||
|
||||
// 可关闭
|
||||
await page.getByRole('button', { name: '关闭 Loading' }).click()
|
||||
await expect(loading).not.toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义样式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('loading#custom-class')
|
||||
|
||||
const loading = page.locator('#custom-class .tiny-mobile-loading')
|
||||
const loadingText = loading.locator('.tiny-mobile-loading__text')
|
||||
|
||||
await expect(loading).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.5)')
|
||||
await expect(loadingText).toBeVisible()
|
||||
await expect(loadingText).toHaveCSS('color', 'rgb(255, 255, 255)')
|
||||
})
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('全局加载', () => {
|
||||
test('指令方式加载', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('loading#global-registry')
|
||||
|
||||
const loading = page.locator('.tiny-mobile-loading')
|
||||
|
||||
await page.getByRole('button', { name: '指令方式加载全屏Loading' }).click()
|
||||
await expect(loading).toBeVisible()
|
||||
await expect(loading).toHaveClass(/is-fullscreen/)
|
||||
await page.waitForTimeout(3000)
|
||||
await expect(loading).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('静态方法加载', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('loading#global-registry')
|
||||
|
||||
const loading = page.locator('.tiny-mobile-loading')
|
||||
|
||||
await page.getByRole('button', { name: '静态方法加载全屏Loading' }).click()
|
||||
await expect(loading).toBeVisible()
|
||||
await page.waitForTimeout(3000)
|
||||
await expect(loading).not.toBeVisible()
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('尺寸', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('loading#size')
|
||||
|
||||
const loadings = page.locator('#size .tiny-mobile-loading')
|
||||
|
||||
// mini
|
||||
const miniLoading = loadings.first()
|
||||
await expect(miniLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/tiny-mobile-loading-mini/)
|
||||
await expect(miniLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'row')
|
||||
await expect(miniLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '14px')
|
||||
await expect(miniLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '14px')
|
||||
|
||||
// small
|
||||
const smallLoading = loadings.nth(1)
|
||||
await expect(smallLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/tiny-mobile-loading-small/)
|
||||
await expect(smallLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'column')
|
||||
await expect(smallLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '24px')
|
||||
await expect(smallLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '24px')
|
||||
|
||||
// medium
|
||||
const mediumLoading = loadings.nth(2)
|
||||
await expect(mediumLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/.tiny-mobile-loading-medium/)
|
||||
await expect(mediumLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'column')
|
||||
await expect(mediumLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '40px')
|
||||
await expect(mediumLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '40px')
|
||||
|
||||
// large
|
||||
const largeLoading = loadings.nth(3)
|
||||
await expect(largeLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/tiny-mobile-loading-large/)
|
||||
await expect(largeLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'column')
|
||||
await expect(largeLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '96px')
|
||||
await expect(largeLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '96px')
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义加载图标', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('loading#spinner')
|
||||
|
||||
const loading = page.locator('#spinner .tiny-mobile-loading')
|
||||
const loadingText = loading.locator('.tiny-mobile-loading__text')
|
||||
const svg = loading.locator('.tiny-mobile-loading__spinner')
|
||||
|
||||
await expect(loadingText).toContainText('自定义 loading 图标')
|
||||
await expect(svg).toBeVisible()
|
||||
})
|
||||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
mounted() {
|
||||
Loading.service({
|
||||
spinner: iconLoading(),
|
||||
text: '自定义loading图标',
|
||||
text: '自定义 loading 图标',
|
||||
target: document.getElementById('demo-loading'),
|
||||
background: '#fff',
|
||||
tiny_mode: 'mobile'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义加载提示文本', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('loading#tip-text')
|
||||
|
||||
const loading = page.locator('#tip-text .tiny-mobile-loading')
|
||||
const loadingText = loading.locator('.tiny-mobile-loading__text')
|
||||
await expect(loadingText).toContainText('加载中...')
|
||||
})
|
||||
|
|
@ -78,7 +78,7 @@ export default {
|
|||
codeFiles: ['size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'global-registry.',
|
||||
demoId: 'global-registry',
|
||||
name: {
|
||||
'zh-CN': '全局加载',
|
||||
'en-US': 'Global Registry'
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ const options = ref([
|
|||
label: '关机'
|
||||
},
|
||||
{
|
||||
label: '重启'
|
||||
label: '重启',
|
||||
divided: true
|
||||
},
|
||||
{
|
||||
label: '网络设置',
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@ export default {
|
|||
label: '关机'
|
||||
},
|
||||
{
|
||||
label: '重启'
|
||||
label: '重启',
|
||||
divided: true
|
||||
},
|
||||
{
|
||||
label: '网络设置',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: ActionMenu 菜单按钮
|
||||
title: ActionMenu 动作菜单
|
||||
---
|
||||
|
||||
# ActionMenu 菜单按钮
|
||||
# ActionMenu 动作菜单
|
||||
|
||||
提供一组操作按钮的组件，当按钮数量太多，自动将超出部分的按钮放置在一个下拉弹框中。
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="wrap">
|
||||
<div class="demo-top mb10">
|
||||
<tiny-switch v-model="isAffix"></tiny-switch>
|
||||
<span>{{ isAffix ? '打开固定模式' : '关闭固定模式' }}</span>
|
||||
<span>{{ isAffix ? '固定模式' : '非固定模式' }}</span>
|
||||
</div>
|
||||
<tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="wrap">
|
||||
<div class="demo-top mb10">
|
||||
<tiny-switch v-model="isAffix"></tiny-switch>
|
||||
<span>{{ isAffix ? '打开固定模式' : '关闭固定模式' }}</span>
|
||||
<span>{{ isAffix ? '固定模式' : '非固定模式' }}</span>
|
||||
</div>
|
||||
<tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Autocomplete 自动完成
|
||||
title: AutoComplete 自动完成
|
||||
---
|
||||
|
||||
# Autocomplete 自动完成
|
||||
# AutoComplete 自动完成
|
||||
|
||||
<div>根据输入内容提供对应的输入建议。</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Autocomplete
|
||||
title: AutoComplete
|
||||
---
|
||||
|
||||
# Autocomplete
|
||||
# AutoComplete
|
||||
|
||||
<div>Provide input suggestions based on the input content.</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-base-select v-model="value" multiple all-text="全部小吃">
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
|
||||
|
||||
const options = ref([
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶' },
|
||||
{ value: '选项3', label: '蚵仔煎' },
|
||||
{ value: '选项4', label: '龙须面' },
|
||||
{ value: '选项6', label: '螺蛳粉' }
|
||||
])
|
||||
|
||||
const value = ref([])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('多选时自定义全部的文本', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('base-select#all-text')
|
||||
const wrap = page.locator('#all-text')
|
||||
const select = wrap.locator('.tiny-base-select').nth(0)
|
||||
const dropdown = page.locator('body > .tiny-select-dropdown')
|
||||
const option = dropdown.locator('.tiny-option')
|
||||
|
||||
await select.locator('.tiny-input__suffix').click()
|
||||
await expect(option.filter({ hasText: '全部小吃' })).toHaveCount(1)
|
||||
})
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-base-select v-model="value" multiple all-text="全部小吃">
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BaseSelect, Option } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyBaseSelect: BaseSelect,
|
||||
TinyOption: Option
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [],
|
||||
options: [
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶' },
|
||||
{ value: '选项3', label: '蚵仔煎' },
|
||||
{ value: '选项4', label: '龙须面' },
|
||||
{ value: '选项6', label: '螺蛳粉' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>场景1：allow-create + filterable，点击创建条目</div>
|
||||
<br />
|
||||
<tiny-base-select v-model="value" allow-create filterable>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<br />
|
||||
<br />
|
||||
<div>场景2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
|
||||
<br />
|
||||
<tiny-base-select v-model="value" allow-create filterable default-first-option>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<br />
|
||||
<br />
|
||||
<div>场景3：下拉框显示新增按钮</div>
|
||||
<br />
|
||||
<tiny-base-select
|
||||
v-model="value"
|
||||
placeholder="请选择"
|
||||
@top-create-click="handleAddOption"
|
||||
automatic-dropdown
|
||||
top-create
|
||||
ref="selectDom"
|
||||
>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event" title="新建" width="30%">
|
||||
<div>
|
||||
<div>
|
||||
<span>label</span>
|
||||
<br />
|
||||
<br />
|
||||
<tiny-input v-model="optionLabel"></tiny-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span>value</span>
|
||||
<br />
|
||||
<br />
|
||||
<tiny-input v-model="optionValue"></tiny-input>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<tiny-button @click="boxVisibility = false">取消</tiny-button>
|
||||
<tiny-button type="primary" @click="handleConfirm"> 确定 </tiny-button>
|
||||
</template>
|
||||
</tiny-dialog-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
BaseSelect as TinyBaseSelect,
|
||||
Option as TinyOption,
|
||||
Input as TinyInput,
|
||||
Button as TinyButton,
|
||||
DialogBox as TinyDialogBox,
|
||||
Modal
|
||||
} from '@opentiny/vue'
|
||||
|
||||
const options = ref([
|
||||
{ value: '选项1', label: '北京' },
|
||||
{ value: '选项2', label: '上海' },
|
||||
{ value: '选项3', label: '天津' },
|
||||
{ value: '选项4', label: '重庆' },
|
||||
{ value: '选项5', label: '深圳' }
|
||||
])
|
||||
|
||||
const selectDom = ref(null)
|
||||
const value = ref('')
|
||||
const boxVisibility = ref(false)
|
||||
const optionLabel = ref('')
|
||||
const optionValue = ref('')
|
||||
|
||||
const handleAddOption = () => {
|
||||
optionValue.value = ''
|
||||
optionLabel.value = ''
|
||||
boxVisibility.value = true
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!optionLabel.value || !optionValue.value) {
|
||||
Modal.message({ message: '选项不能为空！', status: 'warning' })
|
||||
return
|
||||
}
|
||||
boxVisibility.value = false
|
||||
options.value.unshift({
|
||||
value: optionValue,
|
||||
label: optionLabel
|
||||
})
|
||||
selectDom.value.focus()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('点击选中', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.waitForTimeout(300)
|
||||
await page.goto('base-select#allow-create')
|
||||
|
||||
const wrap = page.locator('#allow-create')
|
||||
const select = wrap.locator('.tiny-base-select').nth(0)
|
||||
const dropdown = page.locator('body > .tiny-select-dropdown')
|
||||
const input = select.locator('.tiny-input__inner')
|
||||
|
||||
await input.click()
|
||||
await input.fill('测试allow-create')
|
||||
const KeyboardEvent = await page.evaluateHandle(() => new KeyboardEvent('keyup'))
|
||||
await input.dispatchEvent('keyup', { KeyboardEvent })
|
||||
|
||||
await expect(input).toHaveValue('测试allow-create')
|
||||
await dropdown.getByRole('listitem').filter({ hasText: '测试allow-create' }).click()
|
||||
await expect(input).toHaveValue('测试allow-create')
|
||||
|
||||
await input.click()
|
||||
await expect(input).toHaveValue('')
|
||||
await expect(dropdown.getByRole('listitem').filter({ hasText: '测试allow-create' })).toHaveClass(/selected/)
|
||||
})
|
||||
|
||||
test('enter 选中', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.waitForTimeout(300)
|
||||
await page.goto('base-select#allow-create')
|
||||
|
||||
const wrap = page.locator('#allow-create')
|
||||
const select = wrap.locator('.tiny-base-select').nth(1)
|
||||
const dropdown = page.locator('body > .tiny-select-dropdown')
|
||||
const input = select.locator('.tiny-input__inner')
|
||||
|
||||
await input.click()
|
||||
await input.press('a')
|
||||
await input.press('b')
|
||||
await page.waitForTimeout(300)
|
||||
await input.press('Enter')
|
||||
|
||||
await expect(dropdown).toBeHidden()
|
||||
await expect(input).toHaveValue('ab')
|
||||
|
||||
await input.click()
|
||||
|
||||
await expect(input).toHaveValue('')
|
||||
await expect(dropdown.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
|
||||
})
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>场景1：allow-create + filterable，点击创建条目</div>
|
||||
<br />
|
||||
<tiny-base-select v-model="value" allow-create filterable>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<br />
|
||||
<br />
|
||||
<div>场景2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
|
||||
<br />
|
||||
<tiny-base-select v-model="value" allow-create filterable default-first-option>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<br />
|
||||
<br />
|
||||
<div>场景3：下拉框显示新增按钮</div>
|
||||
<br />
|
||||
<tiny-base-select
|
||||
v-model="value"
|
||||
placeholder="请选择"
|
||||
@top-create-click="handleAddOption"
|
||||
automatic-dropdown
|
||||
top-create
|
||||
ref="selectDom"
|
||||
>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event" title="新建" width="30%">
|
||||
<div>
|
||||
<div>
|
||||
<span>label</span>
|
||||
<br />
|
||||
<br />
|
||||
<tiny-input v-model="optionLabel"></tiny-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span>value</span>
|
||||
<br />
|
||||
<br />
|
||||
<tiny-input v-model="optionValue"></tiny-input>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<tiny-button @click="boxVisibility = false">取消</tiny-button>
|
||||
<tiny-button type="primary" @click="handleConfirm"> 确定 </tiny-button>
|
||||
</template>
|
||||
</tiny-dialog-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BaseSelect, Option, Input, Button, DialogBox, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyBaseSelect: BaseSelect,
|
||||
TinyOption: Option,
|
||||
TinyInput: Input,
|
||||
TinyButton: Button,
|
||||
TinyDialogBox: DialogBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ value: '选项1', label: '北京' },
|
||||
{ value: '选项2', label: '上海' },
|
||||
{ value: '选项3', label: '天津' },
|
||||
{ value: '选项4', label: '重庆' },
|
||||
{ value: '选项5', label: '深圳' }
|
||||
],
|
||||
value: '',
|
||||
boxVisibility: false,
|
||||
optionLabel: '',
|
||||
optionValue: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAddOption() {
|
||||
this.optionValue = ''
|
||||
this.optionLabel = ''
|
||||
this.boxVisibility = true
|
||||
},
|
||||
handleConfirm() {
|
||||
if (!this.optionLabel || !this.optionValue) {
|
||||
Modal.message({ message: '选项不能为空！', status: 'warning' })
|
||||
return
|
||||
}
|
||||
this.boxVisibility = false
|
||||
this.options.unshift({
|
||||
value: this.optionValue,
|
||||
label: this.optionLabel
|
||||
})
|
||||
this.$refs.selectDom.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1：默认不可搜索时，获取焦点不下拉</p>
|
||||
<tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
|
||||
<tiny-base-select v-model="value" ref="selectOnlyFocusRef">
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
|
||||
<tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
|
||||
<tiny-base-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { BaseSelect as TinyBaseSelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const options = ref([
|
||||
{ value: '选项1', label: '北京' },
|
||||
{ value: '选项2', label: '上海' },
|
||||
{ value: '选项3', label: '天津' },
|
||||
{ value: '选项4', label: '重庆' },
|
||||
{ value: '选项5', label: '深圳' }
|
||||
])
|
||||
const value = ref('')
|
||||
const selectOnlyFocusRef = ref()
|
||||
const selectAutoDropRef = ref()
|
||||
|
||||
const handleFocus1 = () => {
|
||||
selectOnlyFocusRef.value.focus()
|
||||
}
|
||||
|
||||
const handleFocus2 = () => {
|
||||
selectAutoDropRef.value.focus()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.tiny-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('不可搜索时，获取焦点不下拉', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('base-select#automatic-dropdown')
|
||||
const wrap = page.locator('#automatic-dropdown')
|
||||
const input = wrap.locator('.tiny-input__inner').first()
|
||||
const dropdown = page.locator('.tiny-select-dropdown').first()
|
||||
|
||||
await wrap.getByRole('button').first().click()
|
||||
// 聚焦高亮
|
||||
await expect(input).toHaveCSS('border-color', 'rgb(94, 124, 224)')
|
||||
// 不下拉
|
||||
await expect(dropdown).toBeHidden()
|
||||
})
|
||||
|
||||
test('可搜索时，获取焦点自动下拉', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('base-select#automatic-dropdown')
|
||||
const wrap = page.locator('#automatic-dropdown')
|
||||
const input = wrap.locator('.tiny-input__inner').nth(1)
|
||||
const dropdown = page.locator('.tiny-select-dropdown').nth(1)
|
||||
|
||||
await wrap.getByRole('button').nth(1).click()
|
||||
// 聚焦下拉
|
||||
await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
|
||||
await expect(input).toHaveValue('上海')
|
||||
// 验证选中
|
||||
await input.click()
|
||||
await expect(page.getByRole('listitem').filter({ hasText: '上海' })).toHaveClass(/selected/)
|
||||
})
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>场景1：默认不可搜索时，获取焦点不下拉</p>
|
||||
<tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
|
||||
<tiny-base-select v-model="value" ref="selectOnlyFocusRef">
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
|
||||
<tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
|
||||
<tiny-base-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BaseSelect, Option, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyBaseSelect: BaseSelect,
|
||||
TinyOption: Option,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ value: '选项1', label: '北京' },
|
||||
{ value: '选项2', label: '上海' },
|
||||
{ value: '选项3', label: '天津' },
|
||||
{ value: '选项4', label: '重庆' },
|
||||
{ value: '选项5', label: '深圳' }
|
||||
],
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFocus1() {
|
||||
this.$refs.selectOnlyFocusRef.focus()
|
||||
},
|
||||
handleFocus2() {
|
||||
this.$refs.selectAutoDropRef.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.tiny-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>选中的值为： {{ value }}</div>
|
||||
<br />
|
||||
<div>场景1：标签式</div>
|
||||
<br />
|
||||
<tiny-base-select v-model="value">
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :icon="item.icon">
|
||||
</tiny-option>
|
||||
</tiny-base-select>
|
||||
<br />
|
||||
<br />
|
||||
<div>场景2：配置式</div>
|
||||
<br />
|
||||
<tiny-base-select v-model="value" :options="options"> </tiny-base-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
|
||||
import { iconFile } from '@opentiny/vue-icon'
|
||||
|
||||
const options = ref([
|
||||
{ value: '选项1', label: '北京', icon: iconFile() },
|
||||
{ value: '选项2', label: '上海', icon: iconFile() },
|
||||
{ value: '选项3', label: '天津', icon: iconFile() },
|
||||
{ value: '选项4', label: '重庆', icon: iconFile() },
|
||||
{ value: '选项5', label: '深圳', icon: iconFile() }
|
||||
])
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('基础用法标签式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('base-select#basic-usage')
|
||||
const wrap = page.locator('#basic-usage')
|
||||
const select = wrap.locator('.tiny-base-select').nth(0)
|
||||
const input = select.locator('.tiny-input__inner')
|
||||
const dropdown = page.locator('body > .tiny-select-dropdown')
|
||||
const option = dropdown.locator('.tiny-option')
|
||||
|
||||
await input.click()
|
||||
await option.filter({ hasText: '天津' }).click()
|
||||
await expect(input).toHaveValue('天津')
|
||||
await select.locator('.tiny-input__suffix svg').click()
|
||||
await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
|
||||
await option.filter({ hasText: '深圳' }).click()
|
||||
await expect(input).toHaveValue('深圳')
|
||||
await input.click()
|
||||
await expect(option.filter({ hasText: '深圳' })).toHaveClass(/selected/)
|
||||
await expect(option.locator('.tiny-option__icon')).toHaveCount(5)
|
||||
await option.nth(0).click()
|
||||
await expect(dropdown).toBeHidden()
|
||||
})
|
||||
|
||||
test('基础用法配置式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('base-select#basic-usage')
|
||||
const wrap = page.locator('#basic-usage')
|
||||
const select = wrap.locator('.tiny-base-select').nth(1)
|
||||
const input = select.locator('.tiny-input__inner')
|
||||
const dropdown = page.locator('body > .tiny-select-dropdown')
|
||||
const option = dropdown.locator('.tiny-option')
|
||||
|
||||
await input.click()
|
||||
await option.filter({ hasText: '天津' }).click()
|
||||
await expect(input).toHaveValue('天津')
|
||||
await select.locator('.tiny-input__suffix svg').click()
|
||||
await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
|
||||
await option.filter({ hasText: '深圳' }).click()
|
||||
await expect(input).toHaveValue('深圳')
|
||||
await input.click()
|
||||
await expect(option.filter({ hasText: '深圳' })).toHaveClass(/selected/)
|
||||
await expect(option.locator('.tiny-option__icon')).toHaveCount(5)
|
||||
await option.nth(0).click()
|
||||
await expect(dropdown).toBeHidden()
|
||||
})
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>选中的值为： {{ value }}</div>
|
||||
<br />
|
||||
<div>场景1：标签式</div>
|
||||
<br />
|
||||
<tiny-base-select v-model="value">
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :icon="item.icon">
|
||||
</tiny-option>
|
||||
</tiny-base-select>
|
||||
<br />
|
||||
<br />
|
||||
<div>场景2：配置式</div>
|
||||
<br />
|
||||
<tiny-base-select v-model="value" :options="options"> </tiny-base-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BaseSelect, Option } from '@opentiny/vue'
|
||||
import { iconFile } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyBaseSelect: BaseSelect,
|
||||
TinyOption: Option
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ value: '选项1', label: '北京', icon: iconFile() },
|
||||
{ value: '选项2', label: '上海', icon: iconFile() },
|
||||
{ value: '选项3', label: '天津', icon: iconFile() },
|
||||
{ value: '选项4', label: '重庆', icon: iconFile() },
|
||||
{ value: '选项5', label: '深圳', icon: iconFile() }
|
||||
],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-base-select v-model="value" value-key="val">
|
||||
<tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<p class="value">
|
||||
{{ value }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
|
||||
|
||||
const options = ref([
|
||||
{ obj: { val: '选项1', id: 1 }, text: '北京' },
|
||||
{ obj: { val: '选项2', id: 2 }, text: '上海' },
|
||||
{ obj: { val: '选项3', id: 3 }, text: '天津' },
|
||||
{ obj: { val: '选项4', id: 4 }, text: '重庆' },
|
||||
{ obj: { val: '选项5', id: 5 }, text: '深圳' }
|
||||
])
|
||||
const value = ref({ val: '选项3', id: 3 })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('binding-obj', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('base-select#binding-obj')
|
||||
|
||||
const wrap = page.locator('#binding-obj')
|
||||
const input = wrap.locator('.tiny-input__inner')
|
||||
const dropdown = page.locator('.tiny-select-dropdown')
|
||||
const valueLocator = wrap.locator('.value')
|
||||
|
||||
await input.click()
|
||||
await dropdown.getByRole('listitem').filter({ hasText: '重庆' }).click()
|
||||
await expect(input).toHaveValue('重庆')
|
||||
await expect(valueLocator).toHaveText('{ "val": "选项4", "id": 4 }')
|
||||
|
||||
await input.click()
|
||||
await dropdown.getByRole('listitem').filter({ hasText: '天津' }).click()
|
||||
await expect(input).toHaveValue('天津')
|
||||
await expect(valueLocator).toHaveText('{ "val": "选项3", "id": 3 }')
|
||||
})
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-base-select v-model="value" value-key="val">
|
||||
<tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
<p class="value">
|
||||
{{ value }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BaseSelect, Option } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyBaseSelect: BaseSelect,
|
||||
TinyOption: Option
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ obj: { val: '选项1', id: 1 }, text: '北京' },
|
||||
{ obj: { val: '选项2', id: 2 }, text: '上海' },
|
||||
{ obj: { val: '选项3', id: 3 }, text: '天津' },
|
||||
{ obj: { val: '选项4', id: 4 }, text: '重庆' },
|
||||
{ obj: { val: '选项5', id: 5 }, text: '深圳' }
|
||||
],
|
||||
value: { val: '选项3', id: 3 }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-base-select
|
||||
v-model="value"
|
||||
clearable
|
||||
:options="options"
|
||||
:cache-op="cacheOp"
|
||||
@change="cacheChange"
|
||||
></tiny-base-select>
|
||||
<p class="cache-value">
|
||||
{{ cacheValue }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { BaseSelect as TinyBaseSelect } from '@opentiny/vue'
|
||||
|
||||
const cacheOp = ref({
|
||||
key: 'test'
|
||||
})
|
||||
const cacheValue = ref('')
|
||||
const options = ref([
|
||||
{ value: '选项1', label: '北京' },
|
||||
{ value: '选项2', label: '上海' },
|
||||
{ value: '选项3', label: '天津' },
|
||||
{ value: '选项4', label: '重庆' },
|
||||
{ value: '选项5', label: '深圳' }
|
||||
])
|
||||
const value = ref('选项3')
|
||||
const cacheChange = () => {
|
||||
cacheValue.value = window.localStorage.getItem(`tiny_memorize_${cacheOp.value.key}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('cache-op', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('base-select#cache-usage')
|
||||
|
||||
const wrap = page.locator('#cache-usage')
|
||||
const dropdown = page.locator('.tiny-select-dropdown')
|
||||
const input = wrap.locator('.tiny-input__inner')
|
||||
const cacheValue = wrap.locator('.cache-value')
|
||||
|
||||
await input.click()
|
||||
await dropdown.getByRole('listitem').filter({ hasText: '北京' }).click()
|
||||
await expect(cacheValue).toContainText(['选项1'])
|
||||
|
||||
await input.click()
|
||||
await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
|
||||
await expect(cacheValue).toContainText(['选项2'])
|
||||
})
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-base-select
|
||||
v-model="value"
|
||||
clearable
|
||||
:options="options"
|
||||
:cache-op="cacheOp"
|
||||
@change="cacheChange"
|
||||
></tiny-base-select>
|
||||
<p class="cache-value">
|
||||
{{ cacheValue }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BaseSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyBaseSelect: BaseSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cacheOp: {
|
||||
key: 'test'
|
||||
},
|
||||
cacheValue: '',
|
||||
options: [
|
||||
{ value: '选项1', label: '北京' },
|
||||
{ value: '选项2', label: '上海' },
|
||||
{ value: '选项3', label: '天津' },
|
||||
{ value: '选项4', label: '重庆' },
|
||||
{ value: '选项5', label: '深圳' }
|
||||
],
|
||||
value: '选项3'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cacheChange() {
|
||||
this.cacheValue = window.localStorage.getItem(`tiny_memorize_${this.cacheOp.key}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>
|
||||
场景1：单选，val 找不到匹配值，val为： ,<span class="val">{{ val }}</span>
|
||||
</p>
|
||||
<tiny-base-select v-model="val" :clear-no-match-value="true">
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
|
||||
<p>
|
||||
场景2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
|
||||
</p>
|
||||
<tiny-base-select v-model="multiVal" :clear-no-match-value="true" multiple>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-base-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
|
||||
|
||||
const options = ref([
|
||||
{ value: '选项1', label: '北京' },
|
||||
{ value: '选项2', label: '上海' },
|
||||
{ value: '选项3', label: '天津' },
|
||||
{ value: '选项4', label: '重庆' },
|
||||
{ value: '选项5', label: '深圳' }
|
||||
])
|
||||
|
||||
const val = ref('11')
|
||||
const multiVal = ref(['选项2', '11'])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue