Compare commits
No commits in common. "dev" and "dev" have entirely different histories.
|
|
@ -600,33 +600,6 @@
|
|||
"contributions": [
|
||||
"test"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "Simon-He95",
|
||||
"name": "Simon He",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/57086651?v=4",
|
||||
"profile": "http://simonhe.me",
|
||||
"contributions": [
|
||||
"doc"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "zhangpaopao0609",
|
||||
"name": "zhangpaopao",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/44194929?v=4",
|
||||
"profile": "https://study.linlove.cn/",
|
||||
"contributions": [
|
||||
"tool"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "Nowitzki41",
|
||||
"name": "Nowitzki41",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/22088253?v=4",
|
||||
"profile": "https://github.com/Nowitzki41",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
}
|
||||
],
|
||||
"contributorsPerLine": 8,
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@ module.exports = {
|
|||
'@typescript-eslint/no-use-before-define': 'off',
|
||||
'@typescript-eslint/restrict-template-expressions': 'off',
|
||||
'@typescript-eslint/no-invalid-this': 'off',
|
||||
'vue/no-deprecated-dollar-scopedslots-api': 'off',
|
||||
'@typescript-eslint/lines-between-class-members': 'off'
|
||||
'vue/no-deprecated-dollar-scopedslots-api': 'off'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
blank_issues_enabled: true
|
||||
contact_links:
|
||||
- name: Questions or need help
|
||||
url: https://github.com/opentiny/tiny-vue/discussions
|
||||
url: https://github.com/opentiny/ui-vue/discussions
|
||||
about: Add this WeChat(opentiny-official), we will invite you to the WeChat discussion group later.
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
version: v1
|
||||
|
||||
labels:
|
||||
- label: "enhancement"
|
||||
sync: true
|
||||
matcher:
|
||||
title: "^feat.*: ?.*"
|
||||
commit: "^feat.*: ?.*"
|
||||
- label: "bug"
|
||||
sync: true
|
||||
matcher:
|
||||
title: "^fix.*: ?.*"
|
||||
commit: "^fix.*: ?.*"
|
||||
- label: "documentation"
|
||||
sync: true
|
||||
matcher:
|
||||
title: "^docs?: ?.*"
|
||||
commit: "^docs?: ?.*"
|
||||
- label: "refactoring"
|
||||
sync: true
|
||||
matcher:
|
||||
title: "^refactor.*: ?.*"
|
||||
commit: "^refactor.*: ?.*"
|
||||
- label: "chore"
|
||||
sync: true
|
||||
matcher:
|
||||
title: "^chore.*: ?.*"
|
||||
commit: "^chore.*: ?.*"
|
||||
- label: "ospp-2024"
|
||||
sync: true
|
||||
matcher:
|
||||
baseBranch: "^ospp-2024/.*"
|
||||
|
|
@ -57,6 +57,9 @@ jobs:
|
|||
|
||||
- name: Run Build Sass Common
|
||||
run: pnpm build:ui saas-common -t ${{ steps.parseTag.outputs.publishVersion }} -d saas
|
||||
|
||||
- name: Run Build Runtime
|
||||
run: pnpm build:runtime
|
||||
|
||||
- name: Run Build Theme
|
||||
run: pnpm build:theme
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
name: Auto Label (Pull Request)
|
||||
|
||||
on:
|
||||
pull_request_target:
|
||||
types: [opened, edited]
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
label:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: fuxingloh/multi-labeler@v4.0.0
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
config-path: .github/labeler.yaml
|
||||
|
|
@ -23,7 +23,7 @@ jobs:
|
|||
- name: Setup node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 16
|
||||
|
||||
- name: Get pnpm store directory
|
||||
id: pnpm-cache
|
||||
|
|
@ -67,7 +67,7 @@ jobs:
|
|||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 16
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
npm install -g @playwright/test
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ jobs:
|
|||
- name: Setup node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 16
|
||||
|
||||
- name: Get pnpm store directory
|
||||
id: pnpm-cache
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ jobs:
|
|||
- name: Setup node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 16
|
||||
- name: Cache Playwright Installation
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
|
|
|
|||
|
|
@ -59,18 +59,11 @@ tgzs
|
|||
*.tgz
|
||||
|
||||
|
||||
# 以下用不到了
|
||||
packages/theme/scripts/theme.json
|
||||
packages/theme/scripts/theme-result.txt
|
||||
packages/theme/scripts/themeExcel.xlsx
|
||||
packages/theme/src/theme/*-theme/component.js
|
||||
packages/theme/src/aurora-theme
|
||||
packages/theme/src/smb-theme
|
||||
#------------------------------
|
||||
|
||||
# theme 的汇总文件是自动生成的
|
||||
packages/theme/src/old-theme-index.less
|
||||
packages/theme/src/index.less
|
||||
packages/theme/src/theme/*-theme/component.js
|
||||
|
||||
pnpm-lock.yaml
|
||||
gulp/bundle.json
|
||||
|
|
@ -84,5 +77,4 @@ test-results
|
|||
examples/sites/public/tiny-vue*.js
|
||||
examples/sites/public/tiny-vue*.mjs
|
||||
examples/sites/public/tailwind.css
|
||||
examples/sites/public/index.css
|
||||
|
||||
examples/sites/public/index.css
|
||||
|
|
@ -80,15 +80,6 @@
|
|||
"backgroundColor": "transparent",
|
||||
"bold": false,
|
||||
"italic": false
|
||||
},
|
||||
{
|
||||
"tag": "--",
|
||||
"color": "#FFFFFF",
|
||||
"strikethrough": false,
|
||||
"underline": false,
|
||||
"backgroundColor": "#5CB300",
|
||||
"bold": false,
|
||||
"italic": false
|
||||
}
|
||||
],
|
||||
"vue.codeActions.enabled": false
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ The commit message should be in the form of a `type(scope): description of the m
|
|||
3. Example title:
|
||||
|
||||
- Supplement alert component document: `docs(alert): [alert] xxxxxxxxxxxxxxx`, `docs(site): [alert] xxxxxxxxxxxxxxx`
|
||||
- Supplement alert component test case: `test(alert): [alert] xxxxxxxxxxxxxx`
|
||||
- Fixed bug in alert component @opentiny/vue-renderless: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
|
||||
- Supplement alet component test case: `test(alert): [alert] xxxxxxxxxxxxxx`
|
||||
- Fixed bug in alet component @opentiny/vue-renderless: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
|
||||
|
||||
#### Pull Request Description
|
||||
|
||||
|
|
@ -135,14 +135,3 @@ If you have submitted Issue or PR to OpenTiny, you can comment on Issue or Pull
|
|||
```
|
||||
|
||||
For detailed rules, please refer to [https://allcontributors.org/docs/en/bot/usage](https://allcontributors.org/docs/en/bot/usage)
|
||||
|
||||
## Contributors
|
||||
|
||||
We sincerely thank all the contributors who have participated in the TinyVue project!
|
||||
In recognition of the contributions of our contributors, we have added a 'Contributors' section at the bottom of each component documentation, displaying the GitHub information of each contributor, including their profile picture, username, and GitHub personal page.
|
||||
Due to the current manpower constraints, only information of internal members (or former members) of the TinyVue team is currently being recorded. Open source contributors are welcome to supplement their own information.
|
||||
The file that record contributors info is:
|
||||
|
||||
```
|
||||
/examples/sites/src/data/contributorMap.js
|
||||
```
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ commit 信息要以 `type(scope): 描述信息` 的形式填写，例如 `fix(vu
|
|||
3. 标题示例:
|
||||
|
||||
- 补充 alert 组件文档： `docs(alert): [alert] xxxxxxxxxxxxxxx`, `docs(site): [alert] xxxxxxxxxxxxxxx`
|
||||
- 补充 alert 组件测试用例: `test(alert): [alert] xxxxxxxxxxxxxx`
|
||||
- 修复 alert 组件 @opentiny/vue-renderless 下的缺陷: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
|
||||
- 补充 alet 组件测试用例: `test(alert): [alert] xxxxxxxxxxxxxx`
|
||||
- 修复 alet 组件 @opentiny/vue-renderless 下的缺陷: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
|
||||
|
||||
#### Pull Request 的描述
|
||||
|
||||
|
|
@ -135,13 +135,3 @@ pnpm dev:vue2
|
|||
```
|
||||
|
||||
详细规则可以参考：[https://allcontributors.org/docs/en/bot/usage](https://allcontributors.org/docs/en/bot/usage)
|
||||
|
||||
## 贡献者
|
||||
|
||||
我们诚挚感谢每位参与过TinyVue项目的贡献者们！
|
||||
为彰显贡献者们的付出，我们在每个组件文档底部增加“贡献者”模块，陈列各位贡献者的github信息，包括头像、昵称、github个人主页等。由于当前团队人力较为紧张，目前只录入TinyVue团队内部成员（或前组员）信息，欢迎各位开源贡献者自行补充信息。
|
||||
贡献者信息记录的文件路径为：
|
||||
|
||||
```
|
||||
/examples/sites/src/data/contributorMap.js
|
||||
```
|
||||
|
|
|
|||
|
|
@ -167,9 +167,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
|||
<tr>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/Zcating"><img src="https://avatars.githubusercontent.com/u/13329558?v=4?s=100" width="100px;" alt="Zcating"/><br /><sub><b>Zcating</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zcating" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/trueLoving"><img src="https://avatars.githubusercontent.com/u/44056372?v=4?s=100" width="100px;" alt="Aoi Kaze"/><br /><sub><b>Aoi Kaze</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=trueLoving" title="Tests">⚠️</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="http://simonhe.me"><img src="https://avatars.githubusercontent.com/u/57086651?v=4?s=100" width="100px;" alt="Simon He"/><br /><sub><b>Simon He</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Simon-He95" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://study.linlove.cn/"><img src="https://avatars.githubusercontent.com/u/44194929?v=4?s=100" width="100px;" alt="zhangpaopao"/><br /><sub><b>zhangpaopao</b></sub></a><br /><a href="#tool-zhangpaopao0609" title="Tools">🔧</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/Nowitzki41"><img src="https://avatars.githubusercontent.com/u/22088253?v=4?s=100" width="100px;" alt="Nowitzki41"/><br /><sub><b>Nowitzki41</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Nowitzki41" title="Code">💻</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
package-lock.json
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
# Blocks
|
||||
|
||||
使用 TinyVue 组件搭建出来的区块。
|
||||
|
||||
## 本启启动
|
||||
|
||||
```shell
|
||||
pnpm i
|
||||
pnpm -F blocks dev
|
||||
```
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
RouterLink: (typeof import('vue-router'))['RouterLink']
|
||||
RouterView: (typeof import('vue-router'))['RouterView']
|
||||
TinyActionSheet: (typeof import('@opentiny/vue'))['ActionSheet']
|
||||
TinyAlert: (typeof import('@opentiny/vue'))['Alert']
|
||||
TinyBaseSelect: (typeof import('@opentiny/vue'))['BaseSelect']
|
||||
TinyButton: (typeof import('@opentiny/vue'))['Button']
|
||||
TinyCascaderSelect: (typeof import('@opentiny/vue'))['CascaderSelect']
|
||||
TinyCell: (typeof import('@opentiny/vue'))['Cell']
|
||||
TinyCheckbox: (typeof import('@opentiny/vue'))['Checkbox']
|
||||
TinyCheckboxGroup: (typeof import('@opentiny/vue'))['CheckboxGroup']
|
||||
TinyCol: (typeof import('@opentiny/vue'))['Col']
|
||||
TinyCustomSwitch: (typeof import('@opentiny/vue'))['CustomSwitch']
|
||||
TinyDialogBox: (typeof import('@opentiny/vue'))['DialogBox']
|
||||
TinyDropdown: (typeof import('@opentiny/vue'))['Dropdown']
|
||||
TinyDropdownItem: (typeof import('@opentiny/vue'))['DropdownItem']
|
||||
TinyDropdownMenu: (typeof import('@opentiny/vue'))['DropdownMenu']
|
||||
TinyException: (typeof import('@opentiny/vue'))['Exception']
|
||||
TinyFilterBox: (typeof import('@opentiny/vue'))['FilterBox']
|
||||
TinyGrid: (typeof import('@opentiny/vue'))['Grid']
|
||||
TinyGridColumn: (typeof import('@opentiny/vue'))['GridColumn']
|
||||
TinyInput: (typeof import('@opentiny/vue'))['Input']
|
||||
TinyLayout: (typeof import('@opentiny/vue'))['Layout']
|
||||
TinyModal: (typeof import('@opentiny/vue'))['Modal']
|
||||
TinyOption: (typeof import('@opentiny/vue'))['Option']
|
||||
TinyOptionGroup: (typeof import('@opentiny/vue'))['OptionGroup']
|
||||
TinyPager: (typeof import('@opentiny/vue'))['Pager']
|
||||
TinyPopover: (typeof import('@opentiny/vue'))['Popover']
|
||||
TinyRadio: (typeof import('@opentiny/vue'))['Radio']
|
||||
TinyRadioGroup: (typeof import('@opentiny/vue'))['RadioGroup']
|
||||
TinyRecycleScroller: (typeof import('@opentiny/vue'))['RecycleScroller']
|
||||
TinyRow: (typeof import('@opentiny/vue'))['Row']
|
||||
TinySearch: (typeof import('@opentiny/vue'))['Search']
|
||||
TinySelect: (typeof import('@opentiny/vue'))['Select']
|
||||
TinySelectedBox: (typeof import('@opentiny/vue'))['SelectedBox']
|
||||
TinySplit: (typeof import('@opentiny/vue'))['Split']
|
||||
TinyTabItem: (typeof import('@opentiny/vue'))['TabItem']
|
||||
TinyTabs: (typeof import('@opentiny/vue'))['Tabs']
|
||||
TinyTagGroup: (typeof import('@opentiny/vue'))['TagGroup']
|
||||
TinyTimePickerMobile: (typeof import('@opentiny/vue'))['TimePickerMobile']
|
||||
TinyTooltip: (typeof import('@opentiny/vue'))['Tooltip']
|
||||
TinyTree: (typeof import('@opentiny/vue'))['Tree']
|
||||
TinyUserHead: (typeof import('@opentiny/vue'))['UserHead']
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TinyVue 区块</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"name": "blocks",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@opentiny/vue": "~3.18.0",
|
||||
"vue": "^3.3.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@opentiny/unplugin-tiny-vue": "~0.0.2",
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.0.8",
|
||||
"vue-tsc": "^1.8.25"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import BlockDemo from './blocks/BlockDemo.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BlockDemo />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<tiny-button>确定</tiny-button>
|
||||
<tiny-alert description="描述信息"></tiny-alert>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), autoImportPlugin('vite')],
|
||||
resolve: {
|
||||
alias: [
|
||||
// XDesign 主题
|
||||
{
|
||||
find: /\@opentiny\/vue-theme\/(?!(smb))/,
|
||||
replacement: '@opentiny/vue-theme/smb-theme/'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
|
@ -23,9 +23,11 @@
|
|||
<div v-html="state.currDemo?.desc['zh-CN']"></div>
|
||||
</div>
|
||||
<!-- 预览 -->
|
||||
<!-- modeState.demoId === 'preview-in-dialog' 修复preview-in-dialog demo弹窗内容被遮罩层遮挡 -->
|
||||
<div
|
||||
:id="state.currDemo?.demoId"
|
||||
class="rel px20 minh200"
|
||||
:style="{ transform: modeState.demoId === 'preview-in-dialog' ? '' : 'translateX(0)' }"
|
||||
>
|
||||
<config-provider :design="design">
|
||||
<component :is="state.comp"></component>
|
||||
|
|
|
|||
|
|
@ -96,14 +96,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</tiny-floatbar>
|
||||
<!-- 切换主题 暂时先屏蔽，等后续其他主题验收完成再放出此功能 -->
|
||||
<tiny-dropdown
|
||||
v-if="false"
|
||||
class="!fixed bottom20 right140"
|
||||
:show-icon="false"
|
||||
@item-click="changeTheme"
|
||||
:disabled="isSaasMode"
|
||||
>
|
||||
<!-- 切换主题 -->
|
||||
<tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme" :disabled="isSaasMode">
|
||||
<span title="切换主题">
|
||||
<SvgTheme></SvgTheme>
|
||||
</span>
|
||||
|
|
@ -157,6 +151,8 @@ import {
|
|||
} from '@opentiny/vue'
|
||||
import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
|
||||
import Loading from '@opentiny/vue-loading'
|
||||
import designSmbConfig from '@opentiny/vue-design-smb'
|
||||
import designAuroraConfig from '@opentiny/vue-design-aurora'
|
||||
import designSaasConfig from '@opentiny/vue-design-saas'
|
||||
import { menuData, demoStr, demoVue, mds, demos } from './resourcePc.js'
|
||||
import { useTheme, useModeCtx } from './uses'
|
||||
|
|
@ -198,7 +194,7 @@ export default {
|
|||
currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`]),
|
||||
demoLoading: false
|
||||
})
|
||||
// hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。
|
||||
// hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。
|
||||
const huiNewChart = ['chart-process']
|
||||
const fn = {
|
||||
// 菜单搜索：忽略大小写
|
||||
|
|
@ -263,8 +259,8 @@ export default {
|
|||
}
|
||||
|
||||
const designConfigMap = {
|
||||
'tiny-smb-theme': {},
|
||||
'tiny-aurora-theme': {}
|
||||
'tiny-smb-theme': designSmbConfig,
|
||||
'tiny-aurora-theme': designAuroraConfig
|
||||
}
|
||||
|
||||
const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
|
||||
import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import { Notify } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -20,9 +21,9 @@ export function useTheme({ readCacheImmediate = true } = {}) {
|
|||
const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
|
||||
|
||||
const THEME_MAP = {
|
||||
'tiny-aurora-theme': null,
|
||||
'tiny-smb-theme': null,
|
||||
'tiny-infinity-theme': null
|
||||
'tiny-aurora-theme': tinyAuroraTheme,
|
||||
'tiny-smb-theme': tinySmbTheme,
|
||||
'tiny-infinity-theme': tinyInfinityTheme
|
||||
}
|
||||
|
||||
const changeTheme = ({ vm }) => {
|
||||
|
|
|
|||
|
|
@ -3,23 +3,24 @@
|
|||
"type": "module",
|
||||
"version": "1.0.8",
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"keywords": [],
|
||||
"files": [
|
||||
"resources"
|
||||
],
|
||||
"dependencies": {
|
||||
"@opentiny/vue": "workspace:~",
|
||||
"@opentiny/vue-common": "workspace:~",
|
||||
"@opentiny/vue-design-aurora": "workspace:~",
|
||||
"@opentiny/vue-design-saas": "workspace:~",
|
||||
"@opentiny/vue-icon": "workspace:~",
|
||||
"@opentiny/vue-theme-mobile": "workspace:~",
|
||||
"@opentiny/vue-theme-saas": "workspace:~",
|
||||
"@opentiny/vue-design-aurora": "workspace:~",
|
||||
"@opentiny/vue-design-smb": "workspace:~",
|
||||
"@opentiny/vue-design-saas": "workspace:~",
|
||||
"sortablejs": "1.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "~1.42.0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"resources"
|
||||
]
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
"devDependencies": {
|
||||
"@types/markdown-it": "^12.2.3",
|
||||
"@types/node": "^17.0.45",
|
||||
"@unocss/preset-icons": "^0.61.9",
|
||||
"@unocss/preset-icons": "^0.38.2",
|
||||
"@vitejs/plugin-vue": "^2.3.3",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.10",
|
||||
"@vue/compiler-sfc": "^3.2.37",
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
"prettier": "^2.7.1",
|
||||
"stylelint": "^14.9.1",
|
||||
"stylelint-config-standard": "^26.0.0",
|
||||
"unocss": "^0.61.9",
|
||||
"unocss": "^0.39.3",
|
||||
"unplugin-auto-import": "0.8.7",
|
||||
"unplugin-vue-components": "^0.19.9",
|
||||
"uslug": "^1.0.4",
|
||||
|
|
@ -64,4 +64,4 @@
|
|||
"vite-plugin-inspect": "^0.5.0",
|
||||
"vite-plugin-md": "0.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,13 +17,13 @@ const $split = (target, splitor = '/', pos = 0) => target.split(splitor).slice(p
|
|||
|
||||
/**
|
||||
* 延时函数
|
||||
* @example $delay(300).then(() =>{ })
|
||||
* @example $delay(300).then(()=>{ })
|
||||
*/
|
||||
const $delay = time => new Promise(resolve => setTimeout(resolve, time));
|
||||
|
||||
/**
|
||||
* 空闲函数
|
||||
* @example $idle().then(() =>{ })
|
||||
* @example $idle().then(()=>{ })
|
||||
*/
|
||||
const $idle = () => new Promise(resolve => (window.requestIdleCallback || window.requestAnimationFrame)(resolve));
|
||||
|
||||
|
|
|
|||
|
|
@ -70,9 +70,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, nextTick, h } from 'vue';
|
||||
import { marked } from 'marked';
|
||||
import DOMPurify from 'dompurify';
|
||||
import demo from '@demo';
|
||||
|
|
@ -184,7 +183,7 @@ function loadPage() {
|
|||
const json = JSON.parse(jsonStr);
|
||||
state.currJson = {
|
||||
...json,
|
||||
demos: $clone(json.demos || []), // 克隆一下,避免保存上次的isOpen
|
||||
demos: $clone(json['demos'] || []), // 克隆一下,避免保存上次的isOpen
|
||||
column: json.column || '1', // columns可能为空
|
||||
title: json.title || state.cmpId,
|
||||
};
|
||||
|
|
@ -196,7 +195,7 @@ function loadPage() {
|
|||
|
||||
if (!hash) return;
|
||||
|
||||
if (hash.includes('/')) {
|
||||
if (hash.indexOf('/') > -1) {
|
||||
hash = hash.slice(1);
|
||||
}
|
||||
|
||||
|
|
@ -242,7 +241,7 @@ const fn = {
|
|||
|
||||
export default defineComponent({
|
||||
name: 'CmpDetail',
|
||||
components: { Demo: demo },
|
||||
components: { demo },
|
||||
setup() {
|
||||
watch(
|
||||
() => router.currentRoute.value.params.cmpId,
|
||||
|
|
@ -272,7 +271,6 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.types-table a,
|
||||
.api-table a {
|
||||
|
|
@ -291,6 +289,7 @@ export default defineComponent({
|
|||
max-height: 80vh;
|
||||
}
|
||||
.tiny-anchor-link {
|
||||
margin-bottom: 10px;
|
||||
max-width: 150px;
|
||||
font-size: 12px;
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
/** @type {import('eslint').Linter.Config} */
|
||||
module.exports = {
|
||||
rules: {
|
||||
'no-console': 'off',
|
||||
'vue/no-unused-vars': 'off'
|
||||
'no-console': 'off'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ export default {
|
|||
'en-US': 'Panel Title'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'action'
|
||||
mfDemo: 'actoin'
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
|
|
|
|||
|
|
@ -248,7 +248,7 @@ export default {
|
|||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽，当 size 设置为 large 时有效，显示在 <code>description</code>下方 ',
|
||||
'zh-CN': '组件默认插槽，当 size 设置为 large 后有效',
|
||||
'en-US': 'The default slot for the component is valid when size is set to large'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
|
|
@ -261,7 +261,7 @@ export default {
|
|||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '提示内容插槽',
|
||||
'zh-CN': '提示内容',
|
||||
'en-US': 'Prompt Content'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export default {
|
||||
mode: ['pc', 'mobile-first'],
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'anchor',
|
||||
|
|
@ -15,9 +15,8 @@ export default {
|
|||
'en-US':
|
||||
'When used in single page hash routing mode, specify the id value of the scrolling container. If the id is empty, the scrolling container defaults to the body element of the root node of the HTML document'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'set-container',
|
||||
mfDemo: 'set-container'
|
||||
mode: ['pc'],
|
||||
pcDemo: 'set-container'
|
||||
},
|
||||
{
|
||||
name: 'is-affix',
|
||||
|
|
@ -27,9 +26,8 @@ export default {
|
|||
'zh-CN': '固定模式',
|
||||
'en-US': 'Fixed mode'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'is-affix',
|
||||
mfDemo: 'set-container'
|
||||
mode: ['pc'],
|
||||
pcDemo: 'is-affix'
|
||||
},
|
||||
{
|
||||
name: 'links',
|
||||
|
|
@ -40,9 +38,8 @@ export default {
|
|||
'zh-CN': '导航数据配置项，可通过 children 嵌套',
|
||||
'en-US': 'Navigation data configuration items can be nested through children'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'basic-usage',
|
||||
mfDemo: 'set-container'
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'mark-class',
|
||||
|
|
@ -52,9 +49,8 @@ export default {
|
|||
'zh-CN': '自定义滚动的目标元素类名',
|
||||
'en-US': 'Class name of the customized scrolling target element'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'set-container',
|
||||
mfDemo: 'set-container'
|
||||
mode: ['pc'],
|
||||
pcDemo: 'set-container'
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
|
|
@ -64,9 +60,8 @@ export default {
|
|||
'zh-CN': '锚点类型',
|
||||
'en-US': 'Anchor type'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'basic-usage',
|
||||
mfDemo: 'set-container'
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
@ -78,21 +73,31 @@ export default {
|
|||
'zh-CN': '锚点链接改变事件',
|
||||
'en-US': 'Anchor link change event'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'change',
|
||||
mfDemo: 'set-container'
|
||||
mode: ['pc'],
|
||||
pcDemo: 'change'
|
||||
},
|
||||
{
|
||||
name: 'link-click',
|
||||
type: '(event: Event, currentLink: { link: string, title: string } ) => void',
|
||||
type: '(event: Event, currentLink: {link: string, title: string}) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '锚点点击事件',
|
||||
'en-US': 'Anchor click event'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'set-container',
|
||||
mfDemo: 'set-container'
|
||||
mode: ['pc'],
|
||||
pcDemo: 'set-container'
|
||||
},
|
||||
{
|
||||
name: 'on-change',
|
||||
type: '(hash: string) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '使用 change 代替；[deprecated v3.12.0 废弃，v3.17.0 移除；移除原因：命名规范]',
|
||||
'en-US':
|
||||
'use change instead [deprecated v3.12.0 abandoned, v3.17.0 removed; reason for removal: naming convention]'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'change'
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default {
|
|||
defaultValue: '300',
|
||||
desc: {
|
||||
'zh-CN': '获取输入建议的去抖延时',
|
||||
'en-US': 'Obtain the recommended input debounce delay'
|
||||
'en-US': 'Obtain the recommended input dejitter delay.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'debounce'
|
||||
|
|
@ -90,7 +90,7 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '等价于原生 input aria-label 属性',
|
||||
'en-US': 'Equals input aria-label attribute'
|
||||
'en-US': 'Equiphorus input aria-label attribute'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
|
|
@ -319,7 +319,6 @@ export default {
|
|||
{
|
||||
name: 'IAutocompleteFetchSuggestions',
|
||||
type: 'type',
|
||||
depTypes: ['IAutocompleteSuggestionItem'],
|
||||
code: `type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: IAutocompleteSuggestionItem[]) => void) => void`
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -880,8 +880,8 @@ interface ICacheOp {
|
|||
highlightClass?: string // 个性化高亮 class 名称，默认：memorize-highlight
|
||||
highlightNum?: number // 高亮个性化的条数,默认：Infinity
|
||||
cacheNum?: number // 存储个性化的条数,默认：Infinity
|
||||
serialize?: () => string // 本地存储序列化方法,默认：JSON.stringify
|
||||
deserialize?: () => ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
|
||||
serialize?: ()=> string // 本地存储序列化方法,默认：JSON.stringify
|
||||
deserialize?: ()=> ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
|
|||
|
|
@ -170,7 +170,6 @@ interface IOptionsItemTo {
|
|||
{
|
||||
name: 'IOptionsItem',
|
||||
type: 'interface',
|
||||
depTypes: ['IOptionsItemTo'],
|
||||
code: `
|
||||
interface IOptionsItem {
|
||||
label?: string
|
||||
|
|
@ -182,7 +181,6 @@ interface IOptionsItem {
|
|||
{
|
||||
name: 'ISelectValue',
|
||||
type: 'interface',
|
||||
depTypes: ['IOptionsItem', 'IOptionsItemTo'],
|
||||
code: `
|
||||
interface ISelectValue {
|
||||
event: Event
|
||||
|
|
|
|||
|
|
@ -5,6 +5,17 @@ export default {
|
|||
name: 'button-group',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'border',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示边框线',
|
||||
'en-US': 'Remove button border.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'border'
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
typeAnchorName: 'IButtonGroupData',
|
||||
|
|
@ -53,6 +64,18 @@ export default {
|
|||
pcDemo: 'plain',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'show-edit',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否显示编辑按钮，只有在显示更多的情况下生效',
|
||||
'en-US':
|
||||
'Whether to display the edit button. This parameter takes effect only when more buttons are displayed'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'show-edit'
|
||||
},
|
||||
{
|
||||
name: 'show-more',
|
||||
type: 'number',
|
||||
|
|
@ -123,6 +146,17 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'change-event'
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
type: '() => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '当编辑按钮被点击时触发',
|
||||
'en-US': 'Set the callback function triggered when the edit button is clicked'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'show-edit'
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
|
|
@ -138,20 +172,6 @@ export default {
|
|||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'slot-default',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'empty',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义数据为空时展示内容',
|
||||
'en-US': 'customize content when data is empty'
|
||||
},
|
||||
meta: {
|
||||
stable: '3.17.0'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'slot-empty'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
'en-US': 'Round button'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
pcDemo: 'basic-usage',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -91,8 +91,8 @@ export default {
|
|||
type: 'Component',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '按钮左侧展示的图标，接收为<code>Icon</code>组件',
|
||||
'en-US': 'The icon displayed by the button is received as an <code>Icon</code> component'
|
||||
'zh-CN': '按钮左侧展示的图标，接收为Icon组件',
|
||||
'en-US': 'The icon displayed by the button is received as an Icon component'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'icon',
|
||||
|
|
@ -117,8 +117,8 @@ export default {
|
|||
type: "'button' | 'submit' | 'reset'",
|
||||
defaultValue: "'button'",
|
||||
desc: {
|
||||
'zh-CN': '对应按钮原生<code>type</code>属性',
|
||||
'en-US': 'Set the button native <code>type</code> attribute'
|
||||
'zh-CN': '对应按钮原生 type 属性',
|
||||
'en-US': 'Set the button native type attribute'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
|
|
@ -191,10 +191,10 @@ export default {
|
|||
name: 'type',
|
||||
typeAnchorName: 'IButtonType',
|
||||
type: 'IButtonType',
|
||||
defaultValue: "'default'",
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '展示按钮不同的状态，设置为<code>text</code>则展示为文本按钮',
|
||||
'en-US': 'Display different states of buttons, set to <code>text</code> to display as text buttons'
|
||||
'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
|
||||
'en-US': 'Display different states of buttons, set to text to display as text buttons'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'basic-usage',
|
||||
|
|
@ -239,7 +239,7 @@ export default {
|
|||
{
|
||||
name: 'IButtonType',
|
||||
type: 'interface',
|
||||
code: `type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
|
||||
code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ export default {
|
|||
props: [
|
||||
{
|
||||
name: 'events',
|
||||
typeAnchorName: 'ICalendarEvent',
|
||||
type: 'ICalendarEvent[]',
|
||||
typeAnchorName: 'eventLists',
|
||||
type: 'eventLists[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '事件列表',
|
||||
|
|
@ -90,17 +90,15 @@ export default {
|
|||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ICalendarEvent',
|
||||
name: 'eventLists',
|
||||
type: 'interface',
|
||||
code: `
|
||||
type ICalendarEventType = 'info' | 'warning' | 'error' | 'info' | 'success'
|
||||
|
||||
interface ICalendarEvent {
|
||||
time: number, // 指定需要展示事件的日期的时间戳
|
||||
title: string, // 指定事件标题
|
||||
content: string, // 指定事件的具体内容
|
||||
type: ICalendarEventType // 事件主题类型
|
||||
}`
|
||||
interface eventLists [{
|
||||
time: 1534297845236, // 指定需要展示事件的日期
|
||||
title: '消息', // 指定事件标题
|
||||
content: '这是一条消息', // 指定事件的具体内容
|
||||
type: 'info' // 事件主题类型，包括 warning、error、info、success。
|
||||
}]`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,19 @@ export default {
|
|||
pcDemo: '',
|
||||
mfDemo: 'card-auto-width'
|
||||
},
|
||||
{
|
||||
name: 'check-type',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置卡片单选、多选，单选/radio；多选/checkbox，需同时设置 label。',
|
||||
'en-US':
|
||||
'Set single-choice, multiple-choice, single-choice, and radio. Multi-choice/checkbox. You need to set the label at the same time.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'check-type-checkbox',
|
||||
mfDemo: 'check-type-checkbox'
|
||||
},
|
||||
{
|
||||
name: 'custom-class',
|
||||
type: 'string',
|
||||
|
|
@ -30,6 +43,18 @@ export default {
|
|||
pcDemo: 'custom-class',
|
||||
mfDemo: 'card-custom-class'
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '卡片禁用',
|
||||
'en-US': 'Card disabled'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-disabled',
|
||||
mfDemo: 'card-disabled'
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
type: 'string',
|
||||
|
|
@ -42,6 +67,55 @@ export default {
|
|||
mfDemo: 'card-height',
|
||||
pcDemo: 'custom-class'
|
||||
},
|
||||
{
|
||||
name: 'icon-more',
|
||||
type: "'iconxxx' | Component",
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
|
||||
'en-US': 'More button icons can be replaced by a svg icon object.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: 'card-icon-more'
|
||||
},
|
||||
{
|
||||
name: 'label',
|
||||
type: 'string / number',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'checkbox或radio的label',
|
||||
'en-US': 'Checkbox or radio label.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'check-type-checkbox',
|
||||
mfDemo: 'card-label'
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
typeAnchorName: 'IOptions',
|
||||
type: 'IOptions',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '操作按钮配置',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'operate-bar',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
type: 'string',
|
||||
defaultValue: 'medium',
|
||||
desc: {
|
||||
'zh-CN': '尺寸，支持large、medium、small、mini 4个尺寸，默认值为medium',
|
||||
'en-US': 'Size. The options are large, medium, small, and mini. The default value is medium.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-size',
|
||||
mfDemo: 'card-size'
|
||||
},
|
||||
{
|
||||
name: 'src',
|
||||
type: 'string',
|
||||
|
|
@ -54,6 +128,18 @@ export default {
|
|||
pcDemo: 'card-type',
|
||||
mfDemo: 'card-src'
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
type: 'string',
|
||||
defaultValue: 'default',
|
||||
desc: {
|
||||
'zh-CN': '卡片状态，支持 success、warning、alerting、danger 4 种状态',
|
||||
'en-US': 'Card status. The value can be success, warning, alerting, or dangerous.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-status',
|
||||
mfDemo: 'card-status'
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
type: 'string',
|
||||
|
|
@ -77,157 +163,70 @@ export default {
|
|||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-type',
|
||||
mfDemo: 'card-type'
|
||||
// 以下IPI暂不暴露
|
||||
// {
|
||||
// name: 'check-type',
|
||||
// type: 'string',
|
||||
// defaultValue: '',
|
||||
// desc: {
|
||||
// 'zh-CN': '设置卡片单选、多选，单选/radio；多选/checkbox，需同时设置 label。',
|
||||
// 'en-US':
|
||||
// 'Set single-choice, multiple-choice, single-choice, and radio. Multi-choice/checkbox. You need to set the label at the same time.'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'check-type-checkbox',
|
||||
// mfDemo: 'check-type-checkbox'
|
||||
// },
|
||||
// {
|
||||
// name: 'disabled',
|
||||
// type: 'boolean',
|
||||
// defaultValue: 'false',
|
||||
// desc: {
|
||||
// 'zh-CN': '卡片禁用',
|
||||
// 'en-US': 'Card disabled'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'card-disabled',
|
||||
// mfDemo: 'card-disabled'
|
||||
// },
|
||||
// {
|
||||
// name: 'icon-more',
|
||||
// type: "'iconxxx' | Component",
|
||||
// defaultValue: '',
|
||||
// desc: {
|
||||
// 'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
|
||||
// 'en-US': 'More button icons can be replaced by a svg icon object.'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: '',
|
||||
// mfDemo: 'card-icon-more'
|
||||
// },
|
||||
// {
|
||||
// name: 'label',
|
||||
// type: 'string / number',
|
||||
// defaultValue: '',
|
||||
// desc: {
|
||||
// 'zh-CN': 'checkbox或radio的label',
|
||||
// 'en-US': 'Checkbox or radio label.'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'check-type-checkbox',
|
||||
// mfDemo: 'card-label'
|
||||
// },
|
||||
// {
|
||||
// name: 'options',
|
||||
// typeAnchorName: 'IOptions',
|
||||
// type: 'IOptions',
|
||||
// defaultValue: '',
|
||||
// desc: {
|
||||
// 'zh-CN': '操作按钮配置',
|
||||
// 'en-US': ''
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'operate-bar',
|
||||
// mfDemo: ''
|
||||
// },
|
||||
// {
|
||||
// name: 'size',
|
||||
// type: 'string',
|
||||
// defaultValue: 'medium',
|
||||
// desc: {
|
||||
// 'zh-CN': '尺寸，支持large、medium、small、mini 4个尺寸，默认值为medium',
|
||||
// 'en-US': 'Size. The options are large, medium, small, and mini. The default value is medium.'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'card-size',
|
||||
// mfDemo: 'card-size'
|
||||
// },
|
||||
// {
|
||||
// name: 'status',
|
||||
// type: 'string',
|
||||
// defaultValue: 'default',
|
||||
// desc: {
|
||||
// 'zh-CN': '卡片状态，支持 success、warning、alerting、danger 4 种状态',
|
||||
// 'en-US': 'Card status. The value can be success, warning, alerting, or dangerous.'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'card-status',
|
||||
// mfDemo: 'card-status'
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'v-model',
|
||||
// type: 'string',
|
||||
// defaultValue: '',
|
||||
// desc: {
|
||||
// 'zh-CN': '绑定值，默认为空',
|
||||
// 'en-US': ''
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'check-type-checkbox',
|
||||
// mfDemo: ''
|
||||
// },
|
||||
// {
|
||||
// name: 'check-mode',
|
||||
// type: 'string',
|
||||
// defaultValue: 'normal',
|
||||
// desc: {
|
||||
// 'zh-CN': '卡片被选中后的呈现模式，可选值为：normal | simple | badge',
|
||||
// 'en-US': 'Display mode of a selected card. The options are as follows: normal | simple | badge'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'check-mode',
|
||||
// mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'v-model',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '绑定值，默认为空',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'check-type-checkbox',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'check-mode',
|
||||
type: 'string',
|
||||
defaultValue: 'normal',
|
||||
desc: {
|
||||
'zh-CN': '卡片被选中后的呈现模式，可选值为：normal | simple | badge',
|
||||
'en-US': 'Display mode of a selected card. The options are as follows: normal | simple | badge'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'check-mode',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'change',
|
||||
type: '() => {}',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件选中/取消选中事件',
|
||||
'en-US': 'Component check/uncheck event'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-events',
|
||||
mfDemo: 'card-events'
|
||||
},
|
||||
{
|
||||
name: 'icon-click',
|
||||
type: '() => {}',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '操作栏按钮点击事件',
|
||||
'en-US': 'Operation bar button click event'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-events',
|
||||
mfDemo: 'card-events'
|
||||
},
|
||||
{
|
||||
name: 'click',
|
||||
type: '() => {}',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '点击卡片事件',
|
||||
'en-US': 'Click card event'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
// events: [
|
||||
// {
|
||||
// name: 'change',
|
||||
// type: '() => {}',
|
||||
// defaultValue: '',
|
||||
// desc: {
|
||||
// 'zh-CN': '组件选中/取消选中事件',
|
||||
// 'en-US': 'Component check/uncheck event'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'card-events',
|
||||
// mfDemo: 'card-events'
|
||||
// },
|
||||
// {
|
||||
// name: 'icon-click',
|
||||
// type: '() => {}',
|
||||
// defaultValue: '',
|
||||
// desc: {
|
||||
// 'zh-CN': '操作栏按钮点击事件',
|
||||
// 'en-US': 'Operation bar button click event'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: 'card-events',
|
||||
// mfDemo: 'card-events'
|
||||
// },
|
||||
// {
|
||||
// name: 'click',
|
||||
// type: '() => {}',
|
||||
// defaultValue: '',
|
||||
// desc: {
|
||||
// 'zh-CN': '点击卡片事件',
|
||||
// 'en-US': 'Click card event'
|
||||
// },
|
||||
// mode: ['pc', 'mobile-first'],
|
||||
// pcDemo: '',
|
||||
// mfDemo: ''
|
||||
// }
|
||||
// ],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
|
|
@ -247,7 +246,7 @@ export default {
|
|||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件底部插槽',
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
|
|
@ -292,33 +291,33 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
// ],
|
||||
// types: [
|
||||
// {
|
||||
// name: 'IOptions',
|
||||
// type: 'interface',
|
||||
// code: `
|
||||
// interface IOptions [
|
||||
// {
|
||||
// text: '删除列表',
|
||||
// icon: IconDel()
|
||||
// },
|
||||
// {
|
||||
// text: '编辑',
|
||||
// icon: IconWriting(),
|
||||
// disabled: true
|
||||
// },
|
||||
// {
|
||||
// text: '排序',
|
||||
// icon: IconAscending()
|
||||
// },
|
||||
// {
|
||||
// text: '分享',
|
||||
// icon: IconShare(),
|
||||
// disabled: true
|
||||
// }
|
||||
// ]
|
||||
// `
|
||||
// }
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IOptions',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IOptions [
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,21 +111,6 @@ export default {
|
|||
pcDemo: 'close-loop',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '控制轮播箭头禁用状态，设置为 true 则禁用',
|
||||
'en-US': 'Control the disabled state of the carousel arrow, set to true to disable'
|
||||
},
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'close-loop',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'show-title',
|
||||
type: 'boolean',
|
||||
|
|
|
|||
|
|
@ -252,7 +252,6 @@ export default {
|
|||
{
|
||||
name: 'ICascaderPanelNodePropValue',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelNodePropValue =
|
||||
| ICascaderPanelNodeValue
|
||||
|
|
@ -262,7 +261,6 @@ type ICascaderPanelNodePropValue =
|
|||
{
|
||||
name: 'ICascaderPanelData',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelData = {
|
||||
value?: ICascaderPanelNodeValue
|
||||
|
|
@ -276,7 +274,6 @@ type ICascaderPanelData = {
|
|||
{
|
||||
name: 'ICascaderPanelConfig',
|
||||
type: 'interface',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
|
||||
code: `
|
||||
interface ICascaderPanelConfig {
|
||||
emitPath: boolean
|
||||
|
|
@ -299,7 +296,6 @@ interface ICascaderPanelConfig {
|
|||
{
|
||||
name: 'ICascaderPanelNode',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelData', 'ICascaderPanelConfig', 'ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelNode = {
|
||||
parent: ICascaderPanelNode | null
|
||||
|
|
@ -324,7 +320,6 @@ type ICascaderPanelNode = {
|
|||
{
|
||||
name: 'ICascaderPanelLazyLoad',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
|
||||
code: `
|
||||
type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
|
||||
`
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
defaultValue: '300',
|
||||
desc: {
|
||||
'zh-CN': '搜索关键词输入的去抖延迟，单位毫秒',
|
||||
'en-US': 'Debounce delay of the search keyword, in milliseconds.'
|
||||
'en-US': 'Dejitter delay of the search keyword, in milliseconds.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'filterable'
|
||||
|
|
@ -536,7 +536,6 @@ export default {
|
|||
{
|
||||
name: 'ICascaderPanelNodePropValue',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelNodePropValue =
|
||||
| ICascaderPanelNodeValue
|
||||
|
|
@ -546,7 +545,6 @@ type ICascaderPanelNodePropValue =
|
|||
{
|
||||
name: 'ICascaderPanelData',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelData = {
|
||||
value?: ICascaderPanelNodeValue
|
||||
|
|
@ -560,7 +558,6 @@ type ICascaderPanelData = {
|
|||
{
|
||||
name: 'ICascaderPanelConfig',
|
||||
type: 'interface',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
|
||||
code: `
|
||||
interface ICascaderPanelConfig {
|
||||
emitPath: boolean
|
||||
|
|
@ -583,7 +580,6 @@ interface ICascaderPanelConfig {
|
|||
{
|
||||
name: 'ICascaderPanelNode',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData', 'ICascaderPanelConfig', 'ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelNode = {
|
||||
parent: ICascaderPanelNode | null
|
||||
|
|
@ -608,7 +604,6 @@ type ICascaderPanelNode = {
|
|||
{
|
||||
name: 'ICascaderPanelLazyLoad',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
|
||||
code: `
|
||||
type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,403 +1,297 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart',
|
||||
type: 'component',
|
||||
props: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'cancel-resize-check',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否禁用 resize 时的容器检测',
|
||||
'en-US': 'Whether to disable container detection during resize'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'0'",
|
||||
desc: {
|
||||
'zh-CN': '属性修改触发图表重绘回调的延迟',
|
||||
'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
|
||||
'en-US':
|
||||
'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'events',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '事件绑定',
|
||||
'en-US': 'Event binding'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'extend',
|
||||
typeAnchorName: 'chart#IChartProps',
|
||||
type: 'objcet',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'echarts 的配置项',
|
||||
'en-US': 'Configuration items of echarts'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
type: 'string',
|
||||
defaultValue: "'400px'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的高度。',
|
||||
'en-US': 'Set the height of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'init-options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'init 附加参数',
|
||||
'en-US': 'Init Additional Parameters'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'judge-width',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否处理生成图表时的宽度问题',
|
||||
'en-US': 'Do you want to process the width issue when generating charts?'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'legend-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示图例',
|
||||
'en-US': 'Display legend'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'not-set-unchange',
|
||||
type: 'array',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '未发生变化时不参加 setOption 的属性',
|
||||
'en-US': 'The setOption attribute does not change.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resize-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'200'",
|
||||
desc: {
|
||||
'zh-CN': '窗口 resize 事件回调的延迟',
|
||||
'en-US': 'Delay of the window resize event callback'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resizeable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否处理窗口 resize 事件',
|
||||
'en-US': 'Whether to process the window resize event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'set-option-opts',
|
||||
type: 'boolean | object',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': 'echarts setOption 的第二个参数',
|
||||
'en-US': 'Echarts setOption second parameter'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
mode: []
|
||||
},
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称。;自定义主题对象。',
|
||||
'en-US': 'User-defined theme name. ;User-defined theme object.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'theme-name',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
|
||||
'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示提示框',
|
||||
'en-US': 'Display dialog box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
type: 'string',
|
||||
defaultValue: "'auto'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的宽度。',
|
||||
'en-US': 'Set the width of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width-change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'300'",
|
||||
desc: {
|
||||
'zh-CN': '容器宽度变化的延迟',
|
||||
'en-US': 'Container width change delay'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表配置项(无法与settings混用)',
|
||||
'en-US': 'Chart Configuration item (cannot be used together with settings)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'settings',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置项',
|
||||
'en-US': 'Chart Configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color-mode',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义颜色模式',
|
||||
'en-US': 'Custom color mode'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-line',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标线',
|
||||
'en-US': 'Chart markings'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-area',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标志区域',
|
||||
'en-US': 'Chart symbol area'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-point',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标点',
|
||||
'en-US': 'Chart punctuation'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表加载状态',
|
||||
'en-US': 'Chart loading status'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data-empty',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '暂无数据状态',
|
||||
'en-US': 'No data status available at the moment'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'before-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option-once',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
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: [
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartProps {
|
||||
afterConfig: () => void
|
||||
afterSetOption: () => void
|
||||
afterSetOptionOnce: () => void
|
||||
animation: object
|
||||
axisPointer: object | array
|
||||
backgroundColor: object | string
|
||||
beforeConfig: () => void
|
||||
brush: object | array
|
||||
cancelResizeCheck: boolean
|
||||
changeDelay: number // 默认值 0
|
||||
colorMode: string
|
||||
colors: array
|
||||
data: object | array
|
||||
dataEmpty: boolean
|
||||
dataZoom: object | array
|
||||
events: object
|
||||
extend: object
|
||||
geo: object | array
|
||||
graphic: object | array
|
||||
grid: object | array
|
||||
height: string // 默认值 '400px'
|
||||
initOptions: object
|
||||
judgeWidth: boolean // 默认值 false
|
||||
legend: object | array
|
||||
legendPosition: string
|
||||
legendVisible: boolean // 默认值 true
|
||||
loading: boolean
|
||||
markArea: object
|
||||
markLine: object
|
||||
markPoint: object
|
||||
notSetUnchange: array
|
||||
radar: object
|
||||
resizeDelay: number // 默认值 200
|
||||
resizeable: boolean // 默认值 true
|
||||
series: object | array
|
||||
setOptionOpts: boolean | object // 默认值 true
|
||||
settings: object
|
||||
textStyle: object | array
|
||||
theme: object
|
||||
themeName: object | string
|
||||
timeline: object | array
|
||||
title: object | array
|
||||
toolbox: object | array
|
||||
tooltip: object
|
||||
tooltipFormatter: () => void
|
||||
tooltipVisible: boolean // 默认值 true
|
||||
visualMap: object | array
|
||||
width: string // 默认值 'auto'
|
||||
widthChangeDelay: number // 默认值 300
|
||||
xAxis: object | array
|
||||
yAxis: object | array
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 见具体图表组件
|
||||
}`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,179 +1,309 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-autonavi-map',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'key',
|
||||
type: 'string',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Key',
|
||||
desc: {
|
||||
'zh-CN': '高德地图秘钥',
|
||||
'en-US': 'Gaode Map Key'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'url',
|
||||
type: 'string',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Url',
|
||||
desc: {
|
||||
'zh-CN': '高德地图前缀地址',
|
||||
'en-US': 'Gaode map prefix address'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'v',
|
||||
type: 'string',
|
||||
defaultValue: '1.4.3',
|
||||
typeAnchorName: 'V',
|
||||
desc: {
|
||||
'zh-CN': '高德地图版本',
|
||||
'en-US': 'Gaode Map Version'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'amap',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'AMap',
|
||||
desc: {
|
||||
'zh-CN': '高德地图配置项',
|
||||
'en-US': 'Gaode Map Configuration Item'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'series',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Series',
|
||||
desc: {
|
||||
'zh-CN': '高德地图插件配置项',
|
||||
'en-US': 'Gaode Map Plugin Configuration Item'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
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: []
|
||||
}
|
||||
],
|
||||
|
||||
events: [
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartProps {
|
||||
afterConfig: () => void
|
||||
afterSetOption: () => void
|
||||
afterSetOptionOnce: () => void
|
||||
animation: object
|
||||
axisPointer: object | array
|
||||
backgroundColor: object | string
|
||||
beforeConfig: () => void
|
||||
brush: object | array
|
||||
cancelResizeCheck: boolean
|
||||
changeDelay: number // 默认值 0
|
||||
colorMode: string
|
||||
colors: array
|
||||
data: object | array
|
||||
dataEmpty: boolean
|
||||
dataZoom: object | array
|
||||
events: object
|
||||
extend: object
|
||||
geo: object | array
|
||||
graphic: object | array
|
||||
grid: object | array
|
||||
height: string // 默认值 '400px'
|
||||
initOptions: object
|
||||
judgeWidth: boolean // 默认值 false
|
||||
legend: object | array
|
||||
legendPosition: string
|
||||
legendVisible: boolean // 默认值 true
|
||||
loading: boolean
|
||||
markArea: object
|
||||
markLine: object
|
||||
markPoint: object
|
||||
notSetUnchange: array
|
||||
radar: object
|
||||
resizeDelay: number // 默认值 200
|
||||
resizeable: boolean // 默认值 true
|
||||
series: object | array
|
||||
setOptionOpts: boolean | object // 默认值 true
|
||||
settings: object
|
||||
textStyle: object | array
|
||||
theme: object
|
||||
themeName: object | string
|
||||
timeline: object | array
|
||||
title: object | array
|
||||
toolbox: object | array
|
||||
tooltip: object
|
||||
tooltipFormatter: () => void
|
||||
tooltipVisible: boolean // 默认值 true
|
||||
visualMap: object | array
|
||||
width: string // 默认值 'auto'
|
||||
widthChangeDelay: number // 默认值 300
|
||||
xAxis: object | array
|
||||
yAxis: object | array
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
key: string // 高德地图密钥
|
||||
url: string // 高德地图密钥
|
||||
v: string // 高德地图版本,默认值: 1.4.3
|
||||
amap: object // 高德地图配置项 默认不触发
|
||||
series: object // 高德地图插件配置项
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'AMap',
|
||||
type: 'interface',
|
||||
code: `
|
||||
格式示例：
|
||||
|
||||
amap: {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true,
|
||||
center: [118.79322240845, 31.936064370321],
|
||||
zoom: 10
|
||||
},
|
||||
|
||||
说明：通过配置\`amap\`属性，修改高德地图的初始配置属性。<br/>
|
||||
\`viewMode\`：高德地图的3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验。<br/>
|
||||
\`resizeEnable\`：是否开启高德地图resize。<br/>
|
||||
\`center\`：高德地图中心经纬度。<br/>
|
||||
\`zoom\`：高德地图缩放级别。<br/>
|
||||
其他更多属性配置可见Echarts高德地图扩展的git网址：<a href='https://github.com/plainheart/echarts-extension-amap/blob/master/README.zh-CN.md' target="_blank">https://github.com/plainheart/echarts-extension-amap/blob/master/README.zh-CN.md</a>。`
|
||||
},
|
||||
{
|
||||
name: 'Key',
|
||||
type: 'interface',
|
||||
code: `
|
||||
说明：通过配置\`key\`属性，修改高德地图api的密钥。<br/>`
|
||||
},
|
||||
{
|
||||
name: 'Series',
|
||||
type: 'interface',
|
||||
code: `
|
||||
格式示例：
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'amap',
|
||||
data: [[118.79, 31.936, 8], [119, 32, 20]],
|
||||
encode: {
|
||||
value: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
说明：通过配置\`series\`属性，修改高德地图的初始配置属性。<br/>
|
||||
其他更多属性配置可见Echarts高德地图扩展的git网址：<a href='https://github.com/plainheart/echarts-extension-amap/blob/master/README.zh-CN.md' target="_blank">https://github.com/plainheart/echarts-extension-amap/blob/master/README.zh-CN.md</a>。`
|
||||
},
|
||||
{
|
||||
name: 'Url',
|
||||
type: 'interface',
|
||||
code: `
|
||||
说明：通过配置\`url\`属性，修改高德地图api的前缀地址。<br/>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'V',
|
||||
type: 'interface',
|
||||
code: `
|
||||
说明：通过配置v属性，修改高德地图api的版本号，默认1.4.3。<br/>
|
||||
`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,177 +1,309 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-baidu-map',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'key',
|
||||
type: 'string',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Key',
|
||||
desc: {
|
||||
'zh-CN': '百度地图秘钥',
|
||||
'en-US': 'Baidu Map Key'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'url',
|
||||
type: 'string',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Url',
|
||||
desc: {
|
||||
'zh-CN': '百度地图前缀地址',
|
||||
'en-US': 'Baidu map prefix address'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'v',
|
||||
type: 'string',
|
||||
defaultValue: '1.4.3',
|
||||
typeAnchorName: 'V',
|
||||
desc: {
|
||||
'zh-CN': '百度地图版本',
|
||||
'en-US': 'Baidu Map Version'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'bmap',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'BMap',
|
||||
desc: {
|
||||
'zh-CN': '百度地图配置项',
|
||||
'en-US': 'Baidu Map Configuration Item'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'series',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Series',
|
||||
desc: {
|
||||
'zh-CN': '百度地图插件配置项',
|
||||
'en-US': 'Baidu Map Plugin Configuration Item'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
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: ''
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'BMap',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式示例：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>bmap: {
|
||||
center: [<span class="hljs-number">118.775859</span>, <span class="hljs-number">31.985021</span>],
|
||||
zoom: <span class="hljs-number">17</span>,
|
||||
roam: <span class="hljs-literal">true</span>,
|
||||
mapStyle: {}
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="12">说明：通过配置<code>bmap</code>属性，修改百度地图的初始配置属性。<br><br>
|
||||
<code>center</code>：百度地图中心经纬度。<br><br>
|
||||
<code>zoom</code>：百度地图缩放级别。<br><br>
|
||||
<code>roam</code>：是否开启拖拽缩放，可选值为：<code>'scale'</code>, <code>'move'</code>, <code>'true'</code>，默认true关闭。<br><br>
|
||||
<code>mapStyle</code>：百度地图的自定义样式。<br><br>
|
||||
其他更多属性配置可见Echarts百度地图扩展的git网址：<a href="https://github.com/apache/echarts/tree/release/extension-src/bmap" target="_blank">https://github.com/apache/echarts/tree/release/extension-src/bmap</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Key',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：通过配置<code>key</code>属性，修改百度地图api的密钥。<br><br>
|
||||
需要用户获取在百度地图开发者平台申请的密钥，申请网站：https://lbsyun.baidu.com/</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Series',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式示例：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>series: [{
|
||||
type: <span class="hljs-string">'scatter'</span>,
|
||||
coordinateSystem: <span class="hljs-string">'bmap'</span>,
|
||||
data: [[<span class="hljs-number">118.775859</span>, <span class="hljs-number">31.985021</span>, <span class="hljs-number">1</span>]],
|
||||
encode: {
|
||||
value: <span class="hljs-number">30</span>
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
}]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="14">说明：通过配置<code>series</code>属性，修改百度地图的初始配置属性。<br><br>
|
||||
<code>center</code>：百度地图中心经纬度。<br><br>
|
||||
<code>zoom</code>：百度地图缩放级别。<br><br>
|
||||
<code>roam</code>：是否开启拖拽缩放，可以只设置 ‘scale’ 或者 ‘move’。默认关闭。<br><br>
|
||||
<code>mapStyle</code>：百度地图的自定义样式。<br><br>
|
||||
其他更多属性配置可见Echarts百度地图扩展的git网址：<a href="https://github.com/apache/echarts/tree/release/extension-src/bmap" target="_blank">https://github.com/apache/echarts/tree/release/extension-src/bmap</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'V',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：通过配置<code>v</code>属性，修改百度地图api的版本号，默认2.0。<br></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Url',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：通过配置<code>url</code>属性，修改百度地图api的前缀地址。<br></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
],
|
||||
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 // 百度地图插件配置项
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,295 +1,314 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-boxplot',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array | string',
|
||||
defaultValue: '随主题',
|
||||
typeAnchorName: 'Color',
|
||||
desc: {
|
||||
'zh-CN': '图表颜色',
|
||||
'en-US': 'Chart color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'event',
|
||||
type: 'object',
|
||||
defaultValue: '默认不触发',
|
||||
typeAnchorName: 'Event',
|
||||
desc: {
|
||||
'zh-CN': '图表事件',
|
||||
'en-US': 'Chart Events'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
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: 'series',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Series',
|
||||
desc: {
|
||||
'zh-CN': '自定义图表series',
|
||||
'en-US': 'Custom Chart Series'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
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: 'dataset',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Dataset',
|
||||
desc: {
|
||||
'zh-CN': '自定义图表dataset',
|
||||
'en-US': 'Custom Chart Dataset'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
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
|
||||
|
||||
}`
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> data:[
|
||||
[<span class="hljs-number">850</span>, <span class="hljs-number">740</span>, <span class="hljs-number">900</span>, <span class="hljs-number">1070</span>, <span class="hljs-number">930</span>, <span class="hljs-number">850</span>, <span class="hljs-number">950</span>, <span class="hljs-number">980</span>, <span class="hljs-number">980</span>, <span class="hljs-number">880</span>, <span class="hljs-number">1000</span>, <span class="hljs-number">980</span>, <span class="hljs-number">930</span>, <span class="hljs-number">650</span>, <span class="hljs-number">760</span>, <span class="hljs-number">810</span>, <span class="hljs-number">1000</span>, <span class="hljs-number">1000</span>, <span class="hljs-number">960</span>, <span class="hljs-number">960</span>],
|
||||
[<span class="hljs-number">960</span>, <span class="hljs-number">940</span>, <span class="hljs-number">960</span>, <span class="hljs-number">940</span>, <span class="hljs-number">880</span>, <span class="hljs-number">800</span>, <span class="hljs-number">850</span>, <span class="hljs-number">880</span>, <span class="hljs-number">900</span>, <span class="hljs-number">840</span>, <span class="hljs-number">830</span>, <span class="hljs-number">790</span>, <span class="hljs-number">810</span>, <span class="hljs-number">880</span>, <span class="hljs-number">880</span>, <span class="hljs-number">830</span>, <span class="hljs-number">800</span>, <span class="hljs-number">790</span>, <span class="hljs-number">760</span>, <span class="hljs-number">800</span>],
|
||||
[<span class="hljs-number">880</span>, <span class="hljs-number">880</span>, <span class="hljs-number">880</span>, <span class="hljs-number">860</span>, <span class="hljs-number">720</span>, <span class="hljs-number">720</span>, <span class="hljs-number">620</span>, <span class="hljs-number">860</span>, <span class="hljs-number">970</span>, <span class="hljs-number">950</span>, <span class="hljs-number">880</span>, <span class="hljs-number">910</span>, <span class="hljs-number">850</span>, <span class="hljs-number">870</span>, <span class="hljs-number">840</span>, <span class="hljs-number">840</span>, <span class="hljs-number">850</span>, <span class="hljs-number">840</span>, <span class="hljs-number">840</span>, <span class="hljs-number">840</span>],
|
||||
...
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="12">说明：一个箱形图的图表数据</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Dataset',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> dataset: [
|
||||
{
|
||||
source: data0
|
||||
},
|
||||
{
|
||||
source: data1
|
||||
},
|
||||
{
|
||||
source: data2
|
||||
},
|
||||
{
|
||||
fromDatasetIndex: <span class="hljs-number">0</span>,
|
||||
transform: { type: <span class="hljs-string">'boxplot'</span> }
|
||||
},
|
||||
{
|
||||
fromDatasetIndex: <span class="hljs-number">1</span>,
|
||||
transform: { type: <span class="hljs-string">'boxplot'</span> }
|
||||
},
|
||||
{
|
||||
fromDatasetIndex: <span class="hljs-number">2</span>,
|
||||
transform: { type: <span class="hljs-string">'boxplot'</span> }
|
||||
}
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="29">说明：自定义 dataset，需搭配自定义 series 使用，使用方式及属性和 eCharts 一致，请参考 eCharts 配置;</p>
|
||||
<div data-v-md-line="31"><p class="ev_expand_introduce">详细参数解释见：https://echarts.apache.org/zh/option.html#dataset</p>
|
||||
数据变换教程：https://echarts.apache.org/handbook/zh/concepts/data-transform/;
|
||||
</div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Series',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>series:[
|
||||
{
|
||||
name: <span class="hljs-string">'category0'</span>,
|
||||
type: <span class="hljs-string">'boxplot'</span>,
|
||||
datasetIndex: <span class="hljs-number">3</span>
|
||||
},
|
||||
{
|
||||
name: <span class="hljs-string">'category1'</span>,
|
||||
type: <span class="hljs-string">'boxplot'</span>,
|
||||
datasetIndex: <span class="hljs-number">4</span>
|
||||
},
|
||||
{
|
||||
name: <span class="hljs-string">'category2'</span>,
|
||||
type: <span class="hljs-string">'boxplot'</span>,
|
||||
datasetIndex: <span class="hljs-number">5</span>
|
||||
}
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="23">说明：自定义 series，需搭配自定义 dataset 使用，使用方式及属性和 eCharts 一致，请参考 eCharts 配置<br>
|
||||
详细参数解释见： https://echarts.apache.org/zh/option.html#series-sunburst.type</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
\` & lt; div& gt;
|
||||
& lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
|
||||
& lt; span style = "margin-left:5px;color:#ffffff" & gt;
|
||||
& lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
|
||||
& lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
|
||||
& lt; span style = "color:gray" & gt; out & lt; /span>
|
||||
& lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
|
||||
& lt; /span>
|
||||
& lt; /div>\`;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span ></code ></pre >
|
||||
</div ></div > <p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div ></div ></div ></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Event',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> event:{
|
||||
series：{
|
||||
click:(parms)=>{
|
||||
...
|
||||
},
|
||||
mousemove:(params)=>{
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
....
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="18">说明：自定义设置图表的处理事件,具体用法参考<a href="https://echarts.apache.org/zh/api.html#echartsInstance.on">https://echarts.apache.org/zh/api.html#echartsInstance.on</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,468 +1,314 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-candle',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array | string',
|
||||
defaultValue: '随主题',
|
||||
typeAnchorName: 'Color',
|
||||
desc: {
|
||||
'zh-CN': '图表颜色',
|
||||
'en-US': 'Chart color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'padding',
|
||||
type: 'array',
|
||||
defaultValue: '[50,20,50,20]',
|
||||
typeAnchorName: 'Padding',
|
||||
desc: {
|
||||
'zh-CN': '图表内边距值',
|
||||
'en-US': 'Margin values within the chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'legend',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Legend',
|
||||
desc: {
|
||||
'zh-CN': '图例配置',
|
||||
'en-US': 'Legend configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'dataZoom',
|
||||
type: 'object',
|
||||
defaultValue: '[50,20,50,20]',
|
||||
typeAnchorName: 'DataZoom',
|
||||
desc: {
|
||||
'zh-CN': '区域缩放轴配置',
|
||||
'en-US': 'Regional scaling axis configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'event',
|
||||
type: 'object',
|
||||
defaultValue: '默认不触发',
|
||||
typeAnchorName: 'Event',
|
||||
desc: {
|
||||
'zh-CN': '图表事件',
|
||||
'en-US': 'Chart Events'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'MA',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Ma',
|
||||
desc: {
|
||||
'zh-CN': 'k线图的MA数据均线',
|
||||
'en-US': 'MA data moving average of K-line chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'volume',
|
||||
type: 'boolean',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Volume',
|
||||
desc: {
|
||||
'zh-CN': '显示volume数据',
|
||||
'en-US': 'Display volume data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
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: ''
|
||||
}
|
||||
],
|
||||
|
||||
{
|
||||
name: 'upColor',
|
||||
type: 'string',
|
||||
defaultValue: '错误主题色',
|
||||
typeAnchorName: 'UpColor',
|
||||
desc: {
|
||||
'zh-CN': '上行数据颜色',
|
||||
'en-US': 'Upward data color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'downColor',
|
||||
type: 'string',
|
||||
defaultValue: '成功主题色',
|
||||
typeAnchorName: 'DownColor',
|
||||
desc: {
|
||||
'zh-CN': '下行数据颜色',
|
||||
'en-US': 'Downward data color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>data: [
|
||||
{ time: <span class="hljs-string">'2013/1/24'</span>,open: <span class="hljs-number">2320.26</span>,close:<span class="hljs-number">2320.26</span>,lowest:<span class="hljs-number">2287.3</span>,highest:<span class="hljs-number">2362.94</span>,volume:<span class="hljs-number">197310000</span>},
|
||||
{ time: <span class="hljs-string">'2013/1/25'</span>,open:<span class="hljs-number">2300</span>,close:<span class="hljs-number">2291.3</span>,lowest:<span class="hljs-number">2288.26</span>,highest:<span class="hljs-number">2308.38</span>,volume:<span class="hljs-number">221290000</span>},
|
||||
{ time: <span class="hljs-string">'2013/1/26'</span>,open:<span class="hljs-number">2295.35</span>,close:<span class="hljs-number">2346.5</span>,lowest:<span class="hljs-number">2295.35</span>,highest:<span class="hljs-number">2346.92</span>,volume:<span class="hljs-number">191460000</span>},
|
||||
...
|
||||
];
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="11">说明：图表数据 , time 为 x 轴数据 , open为开盘价, close 为 收盘价, lowest为最低价, highest 为最高价,volume为成交价<br><br>
|
||||
open、close、lowest、highest、volume属性名称不可更换，volume可选，如没有volume则不配<br>
|
||||
time名称（key 值）可更换,通过配置xAxis:{keyName:“key”}实现自定义<br></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'DownColor',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：配置k线图的下行数据的颜色</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Ma',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：控制k线图的数据均线显示,数组中的数值代表你想显示的数据均线的天数，确保data中的数据包含MA中所填的数据天数<br><br>
|
||||
格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>MA:[<span class="hljs-number">5</span>,<span class="hljs-number">10</span>,<span class="hljs-number">20</span>]
|
||||
</code></pre>
|
||||
</div></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Padding',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：<code>padding仅在不显示的volume的时候可用!!!</code><br><br>
|
||||
设置图表四个方向的 <code>padding</code> 值<br><br>
|
||||
<code>padding : [top, right, bottom, left]</code><br><br>
|
||||
top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’<br><br>
|
||||
left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’<br><br>
|
||||
right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比<br><br>
|
||||
bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'UpColor',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：配置k线图的上行数据的颜色</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Volume',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：控制图表中是否显示volume数据<code>如需使用这个功能，图表data中需要配置volume字段</code></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Legend',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-javascript extra-class"><pre class="v-md-hljs-javascript"><code><span class="hljs-attr">legend</span>: {
|
||||
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">position</span>:{
|
||||
<span class="hljs-attr">left</span>:<span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">bottom</span>:<span class="hljs-number">15</span>
|
||||
},
|
||||
<span class="hljs-attr">itemGap</span>:<span class="hljs-number">28</span>,
|
||||
<span class="hljs-attr">orient</span>:<span class="hljs-string">'horizontal'</span>,
|
||||
<span class="hljs-attr">reverseEvent</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">selectedMode</span>:<span class="hljs-literal">true</span>,
|
||||
<span class="hljs-attr">icon</span>:<span class="hljs-string">'circle'</span>,
|
||||
<span class="hljs-attr">itemHeight</span>:<span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">itemWeight</span>:<span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">textStyle</span>:{
|
||||
<span class="hljs-attr">fontSize</span>:<span class="hljs-number">12</span>,
|
||||
<span class="hljs-attr">padding</span>:[<span class="hljs-number">4</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>]，
|
||||
<span class="hljs-attr">color</span>:<span class="hljs-string">'#4e4e4e'</span>,
|
||||
<span class="hljs-attr">overflow</span>:<span class="hljs-string">'none'</span>,
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="26">说明：自定义图例</p>
|
||||
<div data-v-md-line="28"><p class="ev_expand_title">legend.show<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p></div><div data-v-md-line="30"><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p></div><div data-v-md-line="32"><p class="ev_expand_introduce">说明：图例是否显示
|
||||
</p></div><div data-v-md-line="34"><p class="ev_expand_title">legend.itemGap<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="36"><p class="ev_expand_introduce">默认值：<code>28</code>
|
||||
</p></div><div data-v-md-line="38"><p class="ev_expand_introduce">说明：设置图例的间隔
|
||||
</p></div><div data-v-md-line="40"><p class="ev_expand_title">legend.type<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="42"><p class="ev_expand_introduce">说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果
|
||||
</p></div><div data-v-md-line="44"><p class="ev_expand_title">legend.width<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="46"><p class="ev_expand_introduce">说明：图例组件的整体宽度
|
||||
</p></div><div data-v-md-line="48"><p class="ev_expand_title">legend.height<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="50"><p class="ev_expand_introduce">说明：图例组件的整体高度
|
||||
</p></div><div data-v-md-line="52"><p class="ev_expand_title">legend.position<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p></div><div data-v-md-line="54"><p class="ev_expand_introduce">默认值：
|
||||
</p></div><div data-v-md-line="56"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code><span class="hljs-attribute">position</span>:{
|
||||
<span class="hljs-attribute">left</span>:<span class="hljs-string">'center'</span>,
|
||||
bottom:<span class="hljs-number">15</span>
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="63"><p class="ev_expand_introduce">说明：<br>
|
||||
自定义图例的位置<br>
|
||||
<code>position : {top, left, right, bottom}</code><br>
|
||||
top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'<br>
|
||||
left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'<br>
|
||||
right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比<br>
|
||||
bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
|
||||
</p></div><div data-v-md-line="71"><p class="ev_expand_title">legend.orient<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="73"><p class="ev_expand_introduce">默认值：<code>horizontal</code>(水平)
|
||||
</p></div><div data-v-md-line="75"><p class="ev_expand_introduce">可选值：<code>horizontal</code>（水平） 、 <code>vertical</code>（垂直）
|
||||
</p></div><div data-v-md-line="77"><p class="ev_expand_introduce">说明：图例的方向
|
||||
</p></div><div data-v-md-line="79"><p class="ev_expand_title">legend.reverseEvent<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p></div><div data-v-md-line="81"><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p></div><div data-v-md-line="83"><p class="ev_expand_introduce">说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;<br>图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。
|
||||
</p></div><div data-v-md-line="85"><p class="ev_expand_title">legend.selectedMode<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p></div><div data-v-md-line="87"><p class="ev_expand_introduce">默认值：<code>true</code>
|
||||
</p></div><div data-v-md-line="89"><p class="ev_expand_introduce">说明：是否可以通过点击图例改变系列的显示状态
|
||||
</p></div><div data-v-md-line="91"><p class="ev_expand_title">legend.icon<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="93"><p class="ev_expand_introduce">默认值：<code>circle</code>（圆形）
|
||||
</p></div><div data-v-md-line="95"><p class="ev_expand_introduce">可选值：<code>circle</code>（圆形）、<code>line</code>（线段） 、<code>rect</code>（长方形） 、 <code>roundRect</code>（圆角长方形） 、 <code>triangle</code>（三角形） 、 <code>diamond</code>（菱形）
|
||||
</p></div><div data-v-md-line="97"><p class="ev_expand_introduce">说明：图例的图标 ， 若定义了 <code>legend.data</code> ， 则此属性失效
|
||||
</p></div><div data-v-md-line="99"><p class="ev_expand_title">legend.data<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Array</span>
|
||||
</p></div><div data-v-md-line="101"><p class="ev_expand_introduce">样式：
|
||||
</p></div><div data-v-md-line="103"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>data:[
|
||||
{
|
||||
<span class="hljs-attribute">icon</span>:<span class="hljs-string">'image://public/image/LineChart/Domestic.png'</span>,
|
||||
iconChange:<span class="hljs-string">'image://public/image/LineChart/change.png'</span>,
|
||||
name:<span class="hljs-string">'Domestic'</span>,
|
||||
},
|
||||
{
|
||||
<span class="hljs-attribute">icon</span>:<span class="hljs-string">'image://public/image/LineChart/Abroad.png'</span>,
|
||||
iconChange:<span class="hljs-string">'image://public/image/LineChart/change.png'</span>,
|
||||
name:<span class="hljs-string">'Abroad'</span>,
|
||||
}
|
||||
],
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="118"><p class="ev_expand_introduce">说明：<br>
|
||||
针对不同的图例图标以数组的方式管理 ， 定义此属性后则 <code>legend.icon</code> 失效<br><code>icon</code>:图例未选中时的背景 ， 可使用 base64 编码的路径格式<br><code>iconChange</code>:图例选中时的背景 ， 可使用 base64 编码的路径格式<br><code>name</code>:图例对应的名称
|
||||
</p></div><div data-v-md-line="121"><p class="ev_expand_title">legend.itemHeight<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Nmuber</span>
|
||||
</p></div><div data-v-md-line="123"><p class="ev_expand_introduce">默认值：<code>14</code>
|
||||
</p></div><div data-v-md-line="125"><p class="ev_expand_introduce">说明：图例图标的高度
|
||||
</p></div><div data-v-md-line="127"><p class="ev_expand_title">legend.itemWidth<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Nmuber</span>
|
||||
</p></div><div data-v-md-line="129"><p class="ev_expand_introduce">默认值：<code>14</code>
|
||||
</p></div><div data-v-md-line="131"><p class="ev_expand_introduce">说明：图例图标的宽度 ， <code>legend.icon</code> 不为 <code>circle</code> 时 ， 此默认值为 25
|
||||
</p></div><div data-v-md-line="133"><p class="ev_expand_title">legend.formatter<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">String/Function</span>
|
||||
</p></div><div data-v-md-line="135"><p class="ev_expand_introduce">说明：用来自定义图例的文本显示。
|
||||
</p></div><div data-v-md-line="137"><p class="ev_expand_title">legend.textStyle<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p></div><div data-v-md-line="139"><p class="ev_expand_introduce">默认值：
|
||||
</p></div><div data-v-md-line="141"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>textStyle:{
|
||||
fontSize:<span class="hljs-number">12</span>,
|
||||
padding:[<span class="hljs-number">4</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>]，
|
||||
color:<span class="hljs-string">'#4e4e4e'</span>,
|
||||
overflow:<span class="hljs-string">'none'</span>,
|
||||
width:<span class="hljs-number">50</span>,
|
||||
rich:{ // 图例文本富文本配置
|
||||
title:{ // 文本对应的名称
|
||||
align:<span class="hljs-string">'right'</span>, // 设置文本右对齐
|
||||
width:<span class="hljs-number">100</span> // 设置文本显示宽度
|
||||
}
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="157"><p class="ev_expand_introduce">说明：图例图标的富文本配置 ， <code>theme=light</code>,color='#4e4e4e' ， <code>theme=dark</code>,color='#bbbbbb'。<code>width</code>设置每个图例文本的宽度，<code>overflow</code>设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。
|
||||
</p></div><div data-v-md-line="159"><p class="ev_expand_title">legend.tooltip<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p></div><div data-v-md-line="161"><p class="ev_expand_introduce">示例：
|
||||
</p></div><div data-v-md-line="163"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>tooltip:{
|
||||
show: true
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="169"><p class="ev_expand_introduce">说明：图例是否显示悬浮提示框
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'DataZoom',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>dataZoom:{
|
||||
start:<span class="hljs-number">0</span>,
|
||||
end:<span class="hljs-number">100</span>,
|
||||
show:<span class="hljs-literal">false</span>,
|
||||
position:{
|
||||
left:<span class="hljs-number">36</span>,
|
||||
bottom:<span class="hljs-number">20</span>
|
||||
},
|
||||
height:<span class="hljs-number">24</span>
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="16">说明：设置折线图区域缩放轴是否展示及位置</p>
|
||||
<div data-v-md-line="18"><p class="ev_expand_title">dataZoom.start<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="20"><p class="ev_expand_introduce">默认值：<code>0</code>
|
||||
</p></div><div data-v-md-line="22"><p class="ev_expand_introduce">说明：区域缩放轴的数据窗口范围的起始百分比
|
||||
</p></div><div data-v-md-line="24"><p class="ev_expand_title">dataZoom.end<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="26"><p class="ev_expand_introduce">默认值：<code>100</code>
|
||||
</p></div><div data-v-md-line="28"><p class="ev_expand_introduce">说明：区域缩放轴的数据窗口范围的结束百分比
|
||||
</p></div><div data-v-md-line="30"><p class="ev_expand_title">dataZoom.show<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p></div><div data-v-md-line="32"><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p></div><div data-v-md-line="34"><p class="ev_expand_introduce">说明：是否展示区域缩放轴
|
||||
</p></div><div data-v-md-line="36"><p class="ev_expand_title">dataZoom.position<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p></div><div data-v-md-line="38"><p class="ev_expand_introduce">默认值：<code>position:{left:36,bottom:20}</code>
|
||||
</p></div><div data-v-md-line="40"><p class="ev_expand_introduce">说明：<br>
|
||||
自定义区域缩放轴的位置<br>
|
||||
<code>position:{top, left, right, bottom}</code><br>
|
||||
top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'<br>
|
||||
left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'<br>
|
||||
right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比<br>
|
||||
bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
|
||||
</p></div><div data-v-md-line="48"><p class="ev_expand_title">dataZoom.style<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p></div><div data-v-md-line="50"><p class="ev_expand_introduce">格式：
|
||||
</p></div><div data-v-md-line="52"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code> style:{
|
||||
// 背景底色
|
||||
backgroundColor: <span class="hljs-string">'#111'</span>,
|
||||
// 选中区域数据填充色
|
||||
selectDataColor:<span class="hljs-string">'#314461'</span>,
|
||||
// 未选中区域数据填充色
|
||||
unSelectDataColor:<span class="hljs-string">'#454749'</span>,
|
||||
// 选中区域的蒙层颜色
|
||||
middleFillerColor:<span class="hljs-string">'rgba(49,68,97,.5)'</span>,
|
||||
// 设置手柄样式
|
||||
handleStyle:{
|
||||
<span class="hljs-attribute">color</span>:<span class="hljs-string">'red'</span>,
|
||||
borderColor:<span class="hljs-string">'yellow'</span>,
|
||||
shadowColor:<span class="hljs-string">'blue'</span>
|
||||
}
|
||||
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 // 下行数据颜色
|
||||
|
||||
}`
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="71"><p class="ev_expand_introduce">说明：自定义区域缩放轴的相关颜色样式配置
|
||||
</p></div><div data-v-md-line="73"><p class="ev_expand_title">dataZoom.height<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="75"><p class="ev_expand_introduce">默认值：<code>24</code>
|
||||
</p></div><div data-v-md-line="77"><p class="ev_expand_introduce">说明：设置区域缩放轴的高度
|
||||
</p></div></div></div></div></td></tr></div> `
|
||||
},
|
||||
{
|
||||
name: 'Event',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> event:{
|
||||
series：{
|
||||
click:(parms)=>{
|
||||
...
|
||||
},
|
||||
mousemove:(params)=>{
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
....
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="18">说明：自定义设置图表的处理事件,具体用法参考<a href="https://echarts.apache.org/zh/api.html#echartsInstance.on">https://echarts.apache.org/zh/api.html#echartsInstance.on</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,403 +1,297 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart',
|
||||
type: 'component',
|
||||
props: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'cancel-resize-check',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否禁用 resize 时的容器检测',
|
||||
'en-US': 'Whether to disable container detection during resize'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'0'",
|
||||
desc: {
|
||||
'zh-CN': '属性修改触发图表重绘回调的延迟',
|
||||
'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
|
||||
'en-US':
|
||||
'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'events',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '事件绑定',
|
||||
'en-US': 'Event binding'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'extend',
|
||||
typeAnchorName: 'chart#IChartProps',
|
||||
type: 'objcet',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'echarts 的配置项',
|
||||
'en-US': 'Configuration items of echarts'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
type: 'string',
|
||||
defaultValue: "'400px'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的高度。',
|
||||
'en-US': 'Set the height of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'init-options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'init 附加参数',
|
||||
'en-US': 'Init Additional Parameters'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'judge-width',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否处理生成图表时的宽度问题',
|
||||
'en-US': 'Do you want to process the width issue when generating charts?'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'legend-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示图例',
|
||||
'en-US': 'Display legend'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'not-set-unchange',
|
||||
type: 'array',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '未发生变化时不参加 setOption 的属性',
|
||||
'en-US': 'The setOption attribute does not change.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resize-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'200'",
|
||||
desc: {
|
||||
'zh-CN': '窗口 resize 事件回调的延迟',
|
||||
'en-US': 'Delay of the window resize event callback'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resizeable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否处理窗口 resize 事件',
|
||||
'en-US': 'Whether to process the window resize event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'set-option-opts',
|
||||
type: 'boolean | object',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': 'echarts setOption 的第二个参数',
|
||||
'en-US': 'Echarts setOption second parameter'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
mode: []
|
||||
},
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称。;自定义主题对象。',
|
||||
'en-US': 'User-defined theme name. ;User-defined theme object.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'theme-name',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
|
||||
'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示提示框',
|
||||
'en-US': 'Display dialog box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
type: 'string',
|
||||
defaultValue: "'auto'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的宽度。',
|
||||
'en-US': 'Set the width of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width-change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'300'",
|
||||
desc: {
|
||||
'zh-CN': '容器宽度变化的延迟',
|
||||
'en-US': 'Container width change delay'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表配置项(无法与settings混用)',
|
||||
'en-US': 'Chart Configuration item (cannot be used together with settings)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'settings',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置项',
|
||||
'en-US': 'Chart Configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color-mode',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义颜色模式',
|
||||
'en-US': 'Custom color mode'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-line',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标线',
|
||||
'en-US': 'Chart markings'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-area',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标志区域',
|
||||
'en-US': 'Chart symbol area'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-point',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标点',
|
||||
'en-US': 'Chart punctuation'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表加载状态',
|
||||
'en-US': 'Chart loading status'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data-empty',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '暂无数据状态',
|
||||
'en-US': 'No data status available at the moment'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'before-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option-once',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
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: [
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartProps {
|
||||
afterConfig: () => void
|
||||
afterSetOption: () => void
|
||||
afterSetOptionOnce: () => void
|
||||
animation: object
|
||||
axisPointer: object | array
|
||||
backgroundColor: object | string
|
||||
beforeConfig: () => void
|
||||
brush: object | array
|
||||
cancelResizeCheck: boolean
|
||||
changeDelay: number // 默认值 0
|
||||
colorMode: string
|
||||
colors: array
|
||||
data: object | array
|
||||
dataEmpty: boolean
|
||||
dataZoom: object | array
|
||||
events: object
|
||||
extend: object
|
||||
geo: object | array
|
||||
graphic: object | array
|
||||
grid: object | array
|
||||
height: string // 默认值 '400px'
|
||||
initOptions: object
|
||||
judgeWidth: boolean // 默认值 false
|
||||
legend: object | array
|
||||
legendPosition: string
|
||||
legendVisible: boolean // 默认值 true
|
||||
loading: boolean
|
||||
markArea: object
|
||||
markLine: object
|
||||
markPoint: object
|
||||
notSetUnchange: array
|
||||
radar: object
|
||||
resizeDelay: number // 默认值 200
|
||||
resizeable: boolean // 默认值 true
|
||||
series: object | array
|
||||
setOptionOpts: boolean | object // 默认值 true
|
||||
settings: object
|
||||
textStyle: object | array
|
||||
theme: object
|
||||
themeName: object | string
|
||||
timeline: object | array
|
||||
title: object | array
|
||||
toolbox: object | array
|
||||
tooltip: object
|
||||
tooltipFormatter: () => void
|
||||
tooltipVisible: boolean // 默认值 true
|
||||
visualMap: object | array
|
||||
width: string // 默认值 'auto'
|
||||
widthChangeDelay: number // 默认值 300
|
||||
xAxis: object | array
|
||||
yAxis: object | array
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 见具体图表组件
|
||||
}`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,403 +0,0 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'cancel-resize-check',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否禁用 resize 时的容器检测',
|
||||
'en-US': 'Whether to disable container detection during resize'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'0'",
|
||||
desc: {
|
||||
'zh-CN': '属性修改触发图表重绘回调的延迟',
|
||||
'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
|
||||
'en-US':
|
||||
'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'events',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '事件绑定',
|
||||
'en-US': 'Event binding'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'extend',
|
||||
typeAnchorName: 'chart#IChartProps',
|
||||
type: 'objcet',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'echarts 的配置项',
|
||||
'en-US': 'Configuration items of echarts'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
type: 'string',
|
||||
defaultValue: "'400px'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的高度。',
|
||||
'en-US': 'Set the height of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'init-options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'init 附加参数',
|
||||
'en-US': 'Init Additional Parameters'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'judge-width',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否处理生成图表时的宽度问题',
|
||||
'en-US': 'Do you want to process the width issue when generating charts?'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'legend-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示图例',
|
||||
'en-US': 'Display legend'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'not-set-unchange',
|
||||
type: 'array',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '未发生变化时不参加 setOption 的属性',
|
||||
'en-US': 'The setOption attribute does not change.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resize-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'200'",
|
||||
desc: {
|
||||
'zh-CN': '窗口 resize 事件回调的延迟',
|
||||
'en-US': 'Delay of the window resize event callback'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resizeable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否处理窗口 resize 事件',
|
||||
'en-US': 'Whether to process the window resize event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'set-option-opts',
|
||||
type: 'boolean | object',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': 'echarts setOption 的第二个参数',
|
||||
'en-US': 'Echarts setOption second parameter'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
mode: []
|
||||
},
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称。;自定义主题对象。',
|
||||
'en-US': 'User-defined theme name. ;User-defined theme object.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'theme-name',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
|
||||
'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示提示框',
|
||||
'en-US': 'Display dialog box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
type: 'string',
|
||||
defaultValue: "'auto'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的宽度。',
|
||||
'en-US': 'Set the width of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width-change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'300'",
|
||||
desc: {
|
||||
'zh-CN': '容器宽度变化的延迟',
|
||||
'en-US': 'Container width change delay'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表配置项(无法与settings混用)',
|
||||
'en-US': 'Chart Configuration item (cannot be used together with settings)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'settings',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置项',
|
||||
'en-US': 'Chart Configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color-mode',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义颜色模式',
|
||||
'en-US': 'Custom color mode'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-line',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标线',
|
||||
'en-US': 'Chart markings'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-area',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标志区域',
|
||||
'en-US': 'Chart symbol area'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-point',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标点',
|
||||
'en-US': 'Chart punctuation'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表加载状态',
|
||||
'en-US': 'Chart loading status'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data-empty',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '暂无数据状态',
|
||||
'en-US': 'No data status available at the moment'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'before-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option-once',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 见具体图表组件
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,403 +1,297 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart',
|
||||
type: 'component',
|
||||
props: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'cancel-resize-check',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否禁用 resize 时的容器检测',
|
||||
'en-US': 'Whether to disable container detection during resize'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'0'",
|
||||
desc: {
|
||||
'zh-CN': '属性修改触发图表重绘回调的延迟',
|
||||
'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
|
||||
'en-US':
|
||||
'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'events',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '事件绑定',
|
||||
'en-US': 'Event binding'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'extend',
|
||||
typeAnchorName: 'chart#IChartProps',
|
||||
type: 'objcet',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'echarts 的配置项',
|
||||
'en-US': 'Configuration items of echarts'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
type: 'string',
|
||||
defaultValue: "'400px'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的高度。',
|
||||
'en-US': 'Set the height of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'init-options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'init 附加参数',
|
||||
'en-US': 'Init Additional Parameters'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'judge-width',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否处理生成图表时的宽度问题',
|
||||
'en-US': 'Do you want to process the width issue when generating charts?'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'legend-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示图例',
|
||||
'en-US': 'Display legend'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'not-set-unchange',
|
||||
type: 'array',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '未发生变化时不参加 setOption 的属性',
|
||||
'en-US': 'The setOption attribute does not change.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resize-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'200'",
|
||||
desc: {
|
||||
'zh-CN': '窗口 resize 事件回调的延迟',
|
||||
'en-US': 'Delay of the window resize event callback'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resizeable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否处理窗口 resize 事件',
|
||||
'en-US': 'Whether to process the window resize event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'set-option-opts',
|
||||
type: 'boolean | object',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': 'echarts setOption 的第二个参数',
|
||||
'en-US': 'Echarts setOption second parameter'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
mode: []
|
||||
},
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称。;自定义主题对象。',
|
||||
'en-US': 'User-defined theme name. ;User-defined theme object.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'theme-name',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
|
||||
'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示提示框',
|
||||
'en-US': 'Display dialog box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
type: 'string',
|
||||
defaultValue: "'auto'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的宽度。',
|
||||
'en-US': 'Set the width of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width-change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'300'",
|
||||
desc: {
|
||||
'zh-CN': '容器宽度变化的延迟',
|
||||
'en-US': 'Container width change delay'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表配置项(无法与settings混用)',
|
||||
'en-US': 'Chart Configuration item (cannot be used together with settings)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'settings',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置项',
|
||||
'en-US': 'Chart Configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color-mode',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义颜色模式',
|
||||
'en-US': 'Custom color mode'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-line',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标线',
|
||||
'en-US': 'Chart markings'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-area',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标志区域',
|
||||
'en-US': 'Chart symbol area'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-point',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标点',
|
||||
'en-US': 'Chart punctuation'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表加载状态',
|
||||
'en-US': 'Chart loading status'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data-empty',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '暂无数据状态',
|
||||
'en-US': 'No data status available at the moment'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'before-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option-once',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
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: [
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartProps {
|
||||
afterConfig: () => void
|
||||
afterSetOption: () => void
|
||||
afterSetOptionOnce: () => void
|
||||
animation: object
|
||||
axisPointer: object | array
|
||||
backgroundColor: object | string
|
||||
beforeConfig: () => void
|
||||
brush: object | array
|
||||
cancelResizeCheck: boolean
|
||||
changeDelay: number // 默认值 0
|
||||
colorMode: string
|
||||
colors: array
|
||||
data: object | array
|
||||
dataEmpty: boolean
|
||||
dataZoom: object | array
|
||||
events: object
|
||||
extend: object
|
||||
geo: object | array
|
||||
graphic: object | array
|
||||
grid: object | array
|
||||
height: string // 默认值 '400px'
|
||||
initOptions: object
|
||||
judgeWidth: boolean // 默认值 false
|
||||
legend: object | array
|
||||
legendPosition: string
|
||||
legendVisible: boolean // 默认值 true
|
||||
loading: boolean
|
||||
markArea: object
|
||||
markLine: object
|
||||
markPoint: object
|
||||
notSetUnchange: array
|
||||
radar: object
|
||||
resizeDelay: number // 默认值 200
|
||||
resizeable: boolean // 默认值 true
|
||||
series: object | array
|
||||
setOptionOpts: boolean | object // 默认值 true
|
||||
settings: object
|
||||
textStyle: object | array
|
||||
theme: object
|
||||
themeName: object | string
|
||||
timeline: object | array
|
||||
title: object | array
|
||||
toolbox: object | array
|
||||
tooltip: object
|
||||
tooltipFormatter: () => void
|
||||
tooltipVisible: boolean // 默认值 true
|
||||
visualMap: object | array
|
||||
width: string // 默认值 'auto'
|
||||
widthChangeDelay: number // 默认值 300
|
||||
xAxis: object | array
|
||||
yAxis: object | array
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 见具体图表组件
|
||||
}`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,444 +1,316 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-funnel',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '图表主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array | array',
|
||||
typeAnchorName: 'Color',
|
||||
defaultValue: '-',
|
||||
desc: {
|
||||
'zh-CN': '颜色',
|
||||
'en-US': 'Color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'event',
|
||||
type: 'object',
|
||||
defaultValue: '默认不触发',
|
||||
typeAnchorName: 'Event',
|
||||
desc: {
|
||||
'zh-CN': '图表事件',
|
||||
'en-US': 'Chart Events'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'legend',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Legend',
|
||||
desc: {
|
||||
'zh-CN': '图例配置',
|
||||
'en-US': 'Legend configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'gap',
|
||||
type: 'number',
|
||||
defaultValue: '1',
|
||||
typeAnchorName: 'Gap',
|
||||
desc: {
|
||||
'zh-CN': '数据图形间距',
|
||||
'en-US': 'Data graphic spacing'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'sort',
|
||||
type: 'string',
|
||||
defaultValue: 'descending',
|
||||
typeAnchorName: 'Sort',
|
||||
desc: {
|
||||
'zh-CN': '数据排序方式',
|
||||
'en-US': 'Data sorting method'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Size',
|
||||
desc: {
|
||||
'zh-CN': '图表大小',
|
||||
'en-US': 'Chart size'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'position',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Position',
|
||||
desc: {
|
||||
'zh-CN': '图表位置',
|
||||
'en-US': 'Chart position'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'label',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Label',
|
||||
desc: {
|
||||
'zh-CN': '图表文本',
|
||||
'en-US': 'Chart Text'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart Data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'series',
|
||||
type: 'object',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Series',
|
||||
desc: {
|
||||
'zh-CN': '图表series',
|
||||
'en-US': 'Chart Series'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
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: ''
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> data:[
|
||||
{ value: <span class="hljs-number">60</span>, name: <span class="hljs-string">'Visit'</span> },
|
||||
{ value: <span class="hljs-number">40</span>, name: <span class="hljs-string">'Inquiry'</span>},
|
||||
{ value: <span class="hljs-number">20</span>, name: <span class="hljs-string">'Order'</span> },
|
||||
{ value: <span class="hljs-number">80</span>, name: <span class="hljs-string">'Click'</span> },
|
||||
{ value: <span class="hljs-number">100</span>, name: <span class="hljs-string">'Show'</span> }
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="13">说明：图表数据，<code>value</code>表示为数据值，<code>name</code>表示为数据名称。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Gap',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>10</code><br><br>
|
||||
说明：表示数据图形之间的间距。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Label',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="2">默认值：</p>
|
||||
<div data-v-md-line="4"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> label: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
position: <span class="hljs-string">'outside'</span>,
|
||||
formatter: <span class="hljs-string"><code>{ b| { b }:}{ c | { c } %} </code></span>,
|
||||
rich: {
|
||||
b: {
|
||||
color: <span class="hljs-string">'#191919'</span>,
|
||||
padding: [<span class="hljs-number">2</span>, <span class="hljs-number">4</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>]
|
||||
},
|
||||
c: {
|
||||
color: <span class="hljs-string">'#000000'</span>,
|
||||
fontWeight: <span class="hljs-string">'bold'</span>,
|
||||
padding: [<span class="hljs-number">2</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>]
|
||||
}
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="23">说明：通过配置<code>label</code>属性，来修改图表的文本。<br><br>
|
||||
<code>show</code>：选择是否展现图表文本。<br><br>
|
||||
<code>position</code>：图表文本的位置。可选值：<code>'left/right/top/bottom/inside/insideRight/insideLeft/leftTop/leftBottom/rightTop/rightBottom'</code>。<br><br>
|
||||
<code>formatter</code>：文本内容格式器，支持字符串模板和回调函数两种形式，详细参数解释见：<br>
|
||||
<a href="https://echarts.apache.org/zh/option.html#series-funnel.label.formatter" target="_blank">https://echarts.apache.org/zh/option.html#series-funnel.label.formatter</a>。<br><br>
|
||||
<code>rich</code>：自定义富文本样式，可以配置formatter文本格式，详细参数解释见：<br>
|
||||
<a href="https://echarts.apache.org/zh/option.html#series-funnel.label.rich" target="_blank">https://echarts.apache.org/zh/option.html#series-funnel.label.rich</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Legend',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="2">默认值：</p>
|
||||
<div data-v-md-line="4"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>legend: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
icon: <span class="hljs-string">'circle'</span>,
|
||||
left: <span class="hljs-string">'right'</span>,
|
||||
orient: <span class="hljs-string">'vertical'</span>,
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="13">说明：通过配置<code>legend</code>属性，来修改图表的图例。<br><br>
|
||||
<code>show</code>：选择是否展现图表。<br><br>
|
||||
<code>icon</code>：图例的icon。可选值：<code>'circle/rect/roundRect/triangle/diamond/pin/arrow/none'</code>，也可以通过<code>'image://url'</code>设置为图片。<br><br>
|
||||
<code>left</code>：图例离容器左侧的距离。可选值：像素<code>'20'</code>、百分比：<code>'20%'</code>、<code>'left/center/right'</code>。<br><br>
|
||||
<code>orient</code>：图例列表的布局朝向。可选值：<code>'horizontal/vertical'</code>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Position',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="2">格式：</p>
|
||||
<div data-v-md-line="4"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>position: {
|
||||
left: <span class="hljs-string">'center'</span>,
|
||||
right: <span class="hljs-string">'80'</span>,
|
||||
top: <span class="hljs-number">60</span>,
|
||||
bottom: <span class="hljs-number">60</span>,
|
||||
funnelAlign: <span class="hljs-string">'center'</span>,
|
||||
orient: <span class="hljs-string">'horizontal'</span>,
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="15">说明：通过配置<code>position</code>属性，来修改图表位置。<br><br>
|
||||
<code>left</code>：图表离容器左侧的距离。可选值：像素<code>'20'</code>、百分比：<code>'20%'</code>、<code>'left/center/right'</code>。<br><br>
|
||||
<code>right</code>：图表离容器右侧的距离。可选值：像素<code>'20'</code>、百分比：<code>'20%'</code>。<br><br>
|
||||
<code>top</code>：图表离容器上侧的距离。可选值：像素<code>'20'</code>、百分比：<code>'20%'</code>、<code>'top/middle/bottom'</code>。<br><br>
|
||||
<code>bottom</code>：图表离容器下侧的距离。可选值：像素<code>'20'</code>、百分比：<code>'20%'</code>。<br><br>
|
||||
<code>funnelAlign</code>：水平方向对齐布局类型。可选值：<code>'left/center/right'</code>。<br><br>
|
||||
<code>orient</code>：图表朝向，可选值：<code>'vertical'</code>或者<code>'horizontal'</code>。<br>
|
||||
以上属性均为ECharts漏斗图的原生属性，详情见：<br>
|
||||
<a href="https://echarts.apache.org/examples/zh/editor.html?c=funnel" target="_blank">https://echarts.apache.org/examples/zh/editor.html?c=funnel</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Series',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>series:{
|
||||
name: <span class="hljs-string">'Expected'</span>,
|
||||
type: <span class="hljs-string">'funnel'</span>,
|
||||
left: <span class="hljs-string">'10%'</span>,
|
||||
width: <span class="hljs-string">'80%'</span>,
|
||||
label: {
|
||||
formatter: <span class="hljs-string">'{b}Expected'</span>
|
||||
],
|
||||
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
|
||||
}`
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: <span class="hljs-number">0.7</span>,
|
||||
borderColor: <span class="hljs-string">'#fff'</span>,
|
||||
{
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
position: <span class="hljs-string">'inside'</span>,
|
||||
formatter: <span class="hljs-string">'{b}Expected: {c}%'</span>
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: <span class="hljs-number">60</span>, name: <span class="hljs-string">'Visit'</span> },
|
||||
{ value: <span class="hljs-number">40</span>, name: <span class="hljs-string">'Inquiry'</span> },
|
||||
{ value: <span class="hljs-number">20</span>, name: <span class="hljs-string">'Order'</span> },
|
||||
{ value: <span class="hljs-number">80</span>, name: <span class="hljs-string">'Click'</span> },
|
||||
{ value: <span class="hljs-number">100</span>, name: <span class="hljs-string">'Show'</span> }
|
||||
]
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="32">说明：自定义series，{{VITE_BASECOPYRIGHTS}} 仅对此部分的series进行覆盖，详细参数解释见：<br>
|
||||
<a href="https://echarts.apache.org/zh/option.html#series-funnel" target="_blank">https://echarts.apache.org/zh/option.html#series-funnel</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Size',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="2">格式：</p>
|
||||
<div data-v-md-line="4"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>size: {
|
||||
width: <span class="hljs-string">'80%'</span>,
|
||||
height:<span class="hljs-string">'80%'</span>,
|
||||
min: <span class="hljs-number">0</span>,
|
||||
max: <span class="hljs-number">100</span>,
|
||||
minSize: <span class="hljs-string">'0%'</span>,
|
||||
maxSize: <span class="hljs-string">'100%'</span>,
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="15">说明：通过配置<code>size</code>属性，来修改图表大小。<br><br>
|
||||
<code>width</code>：图表的宽度，可自适应auto。<br><br>
|
||||
<code>height</code>：图表的高度，可自适应auto。<br><br>
|
||||
<code>min</code>：指定的数据最小值。<br><br>
|
||||
<code>max</code>：指定的数据最大值。<br><br>
|
||||
<code>minSize</code>：数据最小值min映射的宽度。<br><br>
|
||||
<code>maxSize</code>：数据最大值max映射的宽度。<br>
|
||||
以上属性均为ECharts漏斗图的原生属性，详情见：<br>
|
||||
<a href="https://echarts.apache.org/examples/zh/editor.html?c=funnel" target="_blank">https://echarts.apache.org/examples/zh/editor.html?c=funnel</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Sort',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>descending</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>descending</code>：降序 <br><br>
|
||||
<code>ascending</code>：升序 <br><br>
|
||||
<code>none</code>：默认按data顺序<br></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
\` & lt; div& gt;
|
||||
& lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
|
||||
& lt; span style = "margin-left:5px;color:#ffffff" & gt;
|
||||
& lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
|
||||
& lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
|
||||
& lt; span style = "color:gray" & gt; out & lt; /span>
|
||||
& lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
|
||||
& lt; /span>
|
||||
& lt; /div>\`;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span ></code ></pre >
|
||||
</div ></div > <p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div ></div ></div ></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Event',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> event:{
|
||||
series：{
|
||||
click:(parms)=>{
|
||||
...
|
||||
},
|
||||
mousemove:(params)=>{
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
....
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="18">说明：自定义设置图表的处理事件,具体用法参考<a href="https://echarts.apache.org/zh/api.html#echartsInstance.on">https://echarts.apache.org/zh/api.html#echartsInstance.on</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
{
|
||||
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
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,676 +1,327 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-gauge',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '图表主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array | string',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Color',
|
||||
desc: {
|
||||
'zh-CN': '颜色',
|
||||
'en-US': 'Color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'event',
|
||||
type: 'object',
|
||||
defaultValue: '默认不触发',
|
||||
typeAnchorName: 'Event',
|
||||
desc: {
|
||||
'zh-CN': '图表事件',
|
||||
'en-US': 'Chart Events'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: "[ value: 90, name: 'Utilization rate' ]",
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据(必填)',
|
||||
'en-US': 'Chart data (required)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'position',
|
||||
type: 'object',
|
||||
defaultValue: "{center:['50%', '50%'],radius: '70%'}",
|
||||
typeAnchorName: 'Position',
|
||||
desc: {
|
||||
'zh-CN': '图表位置及大小',
|
||||
'en-US': 'Chart position and size'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'pointer',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
typeAnchorName: 'Pointer',
|
||||
desc: {
|
||||
'zh-CN': '刻度指针是否显示',
|
||||
'en-US': 'Is the scale pointer displayed'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
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: ''
|
||||
}
|
||||
],
|
||||
|
||||
{
|
||||
name: 'min',
|
||||
type: 'number',
|
||||
defaultValue: '0',
|
||||
typeAnchorName: 'Min',
|
||||
desc: {
|
||||
'zh-CN': '刻度盘最小刻度',
|
||||
'en-US': 'Minimum scale of dial'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'max',
|
||||
type: 'number',
|
||||
defaultValue: '100',
|
||||
typeAnchorName: 'Max',
|
||||
desc: {
|
||||
'zh-CN': '刻度盘最大刻度',
|
||||
'en-US': 'Maximum scale of dial'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
|
||||
{
|
||||
name: 'text',
|
||||
type: 'object',
|
||||
defaultValue: '默认居中',
|
||||
typeAnchorName: 'Text',
|
||||
desc: {
|
||||
'zh-CN': '中心文本配置',
|
||||
'en-US': 'Central Text Configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'startAngle',
|
||||
type: 'number',
|
||||
defaultValue: '225',
|
||||
typeAnchorName: 'StartAngle',
|
||||
desc: {
|
||||
'zh-CN': '仪表盘起始角度',
|
||||
'en-US': 'Starting angle of dashboard'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
|
||||
{
|
||||
name: 'endAngle',
|
||||
type: 'number',
|
||||
defaultValue: '-45',
|
||||
typeAnchorName: 'EndAngle',
|
||||
desc: {
|
||||
'zh-CN': '仪表盘结束角度',
|
||||
'en-US': 'End angle of dashboard'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'splitColor',
|
||||
type: 'array',
|
||||
defaultValue: '随主题',
|
||||
typeAnchorName: 'SplitColor',
|
||||
desc: {
|
||||
'zh-CN': '配置分割区间及颜色',
|
||||
'en-US': 'Configure segmentation intervals and colors'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'splitNumber',
|
||||
type: 'number',
|
||||
defaultValue: '4',
|
||||
typeAnchorName: 'SplitNumber',
|
||||
desc: {
|
||||
'zh-CN': '刻度线数量配置',
|
||||
'en-US': 'Quantity configuration of scale lines'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'splitLine',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'SplitLine',
|
||||
desc: {
|
||||
'zh-CN': '刻度线及文本配置',
|
||||
'en-US': 'Scale lines and text configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'markLine',
|
||||
type: 'number',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'MarkLine',
|
||||
desc: {
|
||||
'zh-CN': '阈值线配置',
|
||||
'en-US': 'Threshold line configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'gradientColor',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'GradientColor',
|
||||
desc: {
|
||||
'zh-CN': '线性渐变',
|
||||
'en-US': 'Linear gradient'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'itemStyle',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'ItemStyle',
|
||||
desc: {
|
||||
'zh-CN': '进度条样式配置',
|
||||
'en-US': 'Progress bar style configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'axisLabelStyle',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'AxisLabelStyle',
|
||||
desc: {
|
||||
'zh-CN': '刻度线文本样式配置',
|
||||
'en-US': 'Scale line text style configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'pointerStyle',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'PointerStyle',
|
||||
desc: {
|
||||
'zh-CN': '调整指针样式',
|
||||
'en-US': 'Adjust pointer style'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mask',
|
||||
type: 'object',
|
||||
defaultValue: '{show: false, highLight: true}',
|
||||
typeAnchorName: 'Mask',
|
||||
desc: {
|
||||
'zh-CN': '外层光晕蒙层配置',
|
||||
'en-US': 'Outer halo mask configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'orbitalColor',
|
||||
type: 'string',
|
||||
defaultValue: '随主题',
|
||||
typeAnchorName: 'OrbitalColor',
|
||||
desc: {
|
||||
'zh-CN': '仪表盘的轨道颜色',
|
||||
'en-US': 'Track color of dashboard'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'silent',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
typeAnchorName: 'Silent',
|
||||
desc: {
|
||||
'zh-CN': '是否关闭hover动效',
|
||||
'en-US': 'Do you want to turn off the hover effect'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
events: [
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartProps {
|
||||
afterConfig: () => void
|
||||
afterSetOption: () => void
|
||||
afterSetOptionOnce: () => void
|
||||
animation: object
|
||||
axisPointer: object | array
|
||||
backgroundColor: object | string
|
||||
beforeConfig: () => void
|
||||
brush: object | array
|
||||
cancelResizeCheck: boolean
|
||||
changeDelay: number // 默认值 0
|
||||
colorMode: string
|
||||
colors: array
|
||||
data: object | array
|
||||
dataEmpty: boolean
|
||||
dataZoom: object | array
|
||||
events: object
|
||||
extend: object
|
||||
geo: object | array
|
||||
graphic: object | array
|
||||
grid: object | array
|
||||
height: string // 默认值 '400px'
|
||||
initOptions: object
|
||||
judgeWidth: boolean // 默认值 false
|
||||
legend: object | array
|
||||
legendPosition: string
|
||||
legendVisible: boolean // 默认值 true
|
||||
loading: boolean
|
||||
markArea: object
|
||||
markLine: object
|
||||
markPoint: object
|
||||
notSetUnchange: array
|
||||
radar: object
|
||||
resizeDelay: number // 默认值 200
|
||||
resizeable: boolean // 默认值 true
|
||||
series: object | array
|
||||
setOptionOpts: boolean | object // 默认值 true
|
||||
settings: object
|
||||
textStyle: object | array
|
||||
theme: object
|
||||
themeName: object | string
|
||||
timeline: object | array
|
||||
title: object | array
|
||||
toolbox: object | array
|
||||
tooltip: object
|
||||
tooltipFormatter: () => void
|
||||
tooltipVisible: boolean // 默认值 true
|
||||
visualMap: object | array
|
||||
width: string // 默认值 'auto'
|
||||
widthChangeDelay: number // 默认值 300
|
||||
xAxis: object | array
|
||||
yAxis: object | array
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
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
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'AxisLabelStyle',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：用于调整刻度文本的样式。</p>
|
||||
<div data-v-md-line="3"><p class="ev_expand_title">axisLabelStyle.color<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>theme===dark 为 #bbbbbb , theme===white 为 #4e4e4e</code>
|
||||
</p><p class="ev_expand_introduce">说明：调整刻度文本的字体颜色
|
||||
</p></div><div data-v-md-line="7"><p class="ev_expand_title">axisLabelStyle.fontSize<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>14</code>
|
||||
</p><p class="ev_expand_introduce">说明：调整刻度文本的字体大小
|
||||
</p></div><div data-v-md-line="11"><p class="ev_expand_title">axisLabelStyle.Weight<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>400</code>
|
||||
</p><p class="ev_expand_introduce">说明：调整刻度文本的字体宽度
|
||||
</p></div><div data-v-md-line="15"><p class="ev_expand_title">axisLabelStyle.distance<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>16</code>
|
||||
</p><p class="ev_expand_introduce">说明：调整刻度文本到刻度线的距离
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式:<code>[value:90, name:'Utilization rate']</code></p>
|
||||
<p data-v-md-line="3">说明：图表数据，value 为仪表盘的刻度,name 为数据名称。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'EndAngle',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>-45</code></p>
|
||||
<p data-v-md-line="3">说明：仪表盘结束角度。圆心正右手侧为 0 度，正上方为 90 度，正左手侧为 180 度</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'GradientColor',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：[<br>
|
||||
<span style="background:#5990fd;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span><br>
|
||||
‘#5990fd’，<br>
|
||||
<span style="background:#0d9458;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span><br>
|
||||
‘#0d9458’，<br>
|
||||
<span style="background:#eeba18;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span><br>
|
||||
‘#eeba18’，<br>
|
||||
<span style="background:#ec6f1a;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span><br>
|
||||
‘#ec6f1a’，<br>
|
||||
<span style="background:#f43146;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span><br>
|
||||
‘#f43146’]</p>
|
||||
<p data-v-md-line="13">说明：gradientColor 表示从仪表盘左到右的渐变色,gradientColor.length == 1 时也可以表示单色。注意：splitColor 的优先级高于 gradientColor</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'ItemStyle',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：自定义进度条的宽度</p>
|
||||
<div data-v-md-line="3"><p class="ev_expand_title">itemStyle.width<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>16</code>
|
||||
</p><p class="ev_expand_introduce">说明：自定义进度条的宽度
|
||||
</p></div><div data-v-md-line="7"><p class="ev_expand_title">itemStyle.lineStyle<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>{width:4,color:#4e4e4e||#bbbbbb,length:10}</code>
|
||||
</p><p class="ev_expand_introduce">说明：自定义多色盘进度条的间距（或者刻度线）样式，颜色及宽度长度。
|
||||
</p></div><div data-v-md-line="11"><p class="ev_expand_title">itemStyle.outerGauge<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>show:true</code>
|
||||
</p><p class="ev_expand_introduce">说明：自定义多色盘进度条外层光晕是否显示
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'MarkLine',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：设置阈值线，超出阈值时，进度条会变成warning色</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Mask',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>{show:false,hightLight:true}</code></p>
|
||||
<p data-v-md-line="3">说明：外层光晕蒙层配置。</p>
|
||||
<div data-v-md-line="5"><p class="ev_expand_title">mask.show<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p><p class="ev_expand_introduce">说明：外层光晕蒙层是否展示(蒙层区域的颜色为gradientColor循环取色，透明度.1)
|
||||
</p></div><div data-v-md-line="9"><p class="ev_expand_title">mask.hightLight<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>true</code>
|
||||
</p><p class="ev_expand_introduce">说明：外层光晕蒙层是否开启区域高亮<br>(高亮区域的颜色为gradientColor[0]，透明度1;高亮区域前面的颜色为gradientColor[0]，透明度.5;高亮区域后面的颜色为gradientColor循环取色，透明度.5)
|
||||
</p></div><div data-v-md-line="13"><p class="ev_expand_title">mask.width<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p><p class="ev_expand_introduce">说明：调整外层光晕到进度条之间的蒙层的宽度，不设置时则与lineDistance正相关。页面适配差异时需手动设置
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Max',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>100</code></p>
|
||||
<p data-v-md-line="3">说明：仪表盘的最大值</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Min',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>0</code></p>
|
||||
<p data-v-md-line="3">说明：仪表盘的最小值</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'OrbitalColor',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：用来控制仪表盘的轨道颜色</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Pointer',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>false</code></p>
|
||||
<p data-v-md-line="3">可选值：<code>true, false</code></p>
|
||||
<p data-v-md-line="5">说明：仪表盘的刻度指针是否显示</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'PointerStyle',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>pointerStyle:{
|
||||
width:<span class="hljs-number">16</span>;
|
||||
length:<span class="hljs-string">'10%'</span>
|
||||
pointerDistance:<span class="hljs-string">'-108%'</span>
|
||||
lineDistance:<span class="hljs-string">'5%'</span>
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="12">说明：用于调整指针样式。</p>
|
||||
<div data-v-md-line="14"><p class="ev_expand_title">pointerStyle.width<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>16</code>
|
||||
</p><p class="ev_expand_introduce">说明：调整指针宽度
|
||||
</p></div><div data-v-md-line="18"><p class="ev_expand_title">pointerStyle.length<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>10%</code>
|
||||
</p><p class="ev_expand_introduce">说明：调整指针长度
|
||||
</p></div><div data-v-md-line="22"><p class="ev_expand_title">pointerStyle.pointerDistance<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>-108%</code>
|
||||
</p><p class="ev_expand_introduce">说明：调整指针距离中心距离
|
||||
</p></div><div data-v-md-line="26"><p class="ev_expand_title">pointerStyle.lineDistance<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>5%</code>
|
||||
</p><p class="ev_expand_introduce">说明：调整外层光晕距离进度条距离
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Position',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">替代旧属性：<code>chartPosition</code></p>
|
||||
<p data-v-md-line="3">说明：position 用来控制仪表盘的位置和半径。</p>
|
||||
<div data-v-md-line="5"><p class="ev_expand_title">position.center<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Array</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>['50%','50%']</code>
|
||||
</p><p class="ev_expand_introduce">说明：center 为中心（圆心）坐标，<code>position.center[0]</code>为横坐标，<code>position.center[1]</code>为纵坐标。
|
||||
</p><p class="ev_expand_introduce">支持设置成百分比和数值，设置成百分比时<code>position.center[0]</code>是相对于容器宽度，<code>position.center[1]</code>是相对于容器高度。
|
||||
</p></div><div data-v-md-line="10"><p class="ev_expand_title">position.radius<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String | Number</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>'70%'</code>
|
||||
</p><p class="ev_expand_introduce">说明：radius 仪表盘半径，可以是相对于容器<code>高宽中较小的一项</code>的<code>一半</code>的百分比，也可以是绝对的数值。
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Slient',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>false</code></p>
|
||||
<p data-v-md-line="3">说明：是否关闭 hover 态的效果</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'SplitColor',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式:</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>[
|
||||
[<span class="hljs-number">0.25</span>, <span class="hljs-string">'#0d9458'</span>],
|
||||
[<span class="hljs-number">0.5</span> , <span class="hljs-string">'#eeba18'</span>],
|
||||
[<span class="hljs-number">0.75</span>, <span class="hljs-string">'#ec6f1a'</span>],
|
||||
[<span class="hljs-number">1</span> , <span class="hljs-string">'#f43146'</span>]
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="12">默认值：<code>'#1f55b5'</code></p>
|
||||
<p data-v-md-line="14">说明：仪表盘的分割颜色，<code>splitColor[i][0]</code> 的值代表整根轴线的百分比，应在 0 到 1 之间, <code>splitColor[i][1]</code> 是对应的颜色</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'SplitLine',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：控制刻度线及刻度文本是否显示</p>
|
||||
<div data-v-md-line="3"><p class="ev_expand_title">splitLine.show<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>true</code>
|
||||
</p><p class="ev_expand_introduce">可选值：<code>true, false</code>
|
||||
</p><p class="ev_expand_introduce">说明：控制刻度线及刻度文本是否显示
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'SplitNumber',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>4</code></p>
|
||||
<p data-v-md-line="3">说明：整个仪表盘被分成的份数，splitNumber = n 时表示被分成了 n 份，有 n+1 条刻度线</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'StartAngle',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>225</code></p>
|
||||
<p data-v-md-line="3">说明：仪表盘起始角度。圆心正右手侧为 0 度，正上方为 90 度，正左手侧为 180 度</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Text',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值:显示 data 中的 value 和 name 值</p>
|
||||
<p data-v-md-line="3">说明：仪表盘中间显示的文本格式配置。</p>
|
||||
<div data-v-md-line="5"><p class="ev_expand_title">text.offset<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Array</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<vode>[0, 0]</code>
|
||||
</p><p class="ev_expand_introduce">说明：text 文本相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
</p></div><div data-v-md-line="9"><p class="ev_expand_title">text.formatter<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Function</span>
|
||||
</p><p class="ev_expand_introduce">格式：
|
||||
<code>css
|
||||
formatter：(value) =& gt; {
|
||||
return '{value|' + value + '}{unit|%}\n{name|Winning Percentages}'
|
||||
}
|
||||
</code>
|
||||
</p><p class="ev_expand_introduce">说明：格式化文本函数，参数 value 为数据数值，返回的字符串格式： {styleName|要显示的文本}，styleName为<code>text.formatterStyle</code>中的属性名
|
||||
</p></div><div data-v-md-line="18"><p class="ev_expand_title">text.formatterStyle<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p><p class="ev_expand_introduce">格式：
|
||||
<code>css
|
||||
formatterStyle: {
|
||||
value: {
|
||||
fontSize: 50,
|
||||
fontStyle: 'italic',
|
||||
fontWeight: 'bolder',
|
||||
color: '#ffff00',
|
||||
textShadowColor: '#ffffff',
|
||||
textShadowBlur: 1,
|
||||
textShadowOffsetX: 2,
|
||||
textShadowOffsetY: 2,
|
||||
padding: [0, 0, 30, 0]
|
||||
},
|
||||
unit: {
|
||||
fontSize: 12,
|
||||
fontStyle: 'italic',
|
||||
color: '#ffff00',
|
||||
textShadowColor: '#ffffff',
|
||||
textShadowBlur: 1,
|
||||
textShadowOffsetX: 2,
|
||||
textShadowOffsetY: 2,
|
||||
padding: [22, 0, 30, 6],
|
||||
},
|
||||
name: {
|
||||
fontSize: 14,
|
||||
color: '#ffffff',
|
||||
borderColor: '#ffffff',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
padding: [5, 5, 5, 5],
|
||||
}
|
||||
}
|
||||
</code>
|
||||
</p><p class="ev_expand_introduce">说明：格式化文本样式，与上述 formatter 搭配使用，具体支持的样式可见：https://echarts.apache.org/zh/option.html#series-gauge.detail.rich.%3Cstyle_name%3E
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
\` & lt; div& gt;
|
||||
& lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
|
||||
& lt; span style = "margin-left:5px;color:#ffffff" & gt;
|
||||
& lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
|
||||
& lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
|
||||
& lt; span style = "color:gray" & gt; out & lt; /span>
|
||||
& lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
|
||||
& lt; /span>
|
||||
& lt; /div>\`;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span ></code ></pre >
|
||||
</div ></div > <p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div ></div ></div ></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Event',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> event:{
|
||||
series：{
|
||||
click:(parms)=>{
|
||||
...
|
||||
},
|
||||
mousemove:(params)=>{
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
....
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="18">说明：自定义设置图表的处理事件,具体用法参考<a href="https://echarts.apache.org/zh/api.html#echartsInstance.on">https://echarts.apache.org/zh/api.html#echartsInstance.on</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Silent',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>false</code></p>
|
||||
<p data-v-md-line="3">说明：是否关闭 hover 态的效果</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,79 +1,305 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-graph',
|
||||
type: 'component',
|
||||
props: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'Options',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
typeAnchorName: 'Options',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'关系图目前仅支持 eCharts 原生属性配置，使用方式和 eCharts 一致。详细配置请参考：https://echarts.apache.org/examples/zh/index.html#chart-type-graph',
|
||||
'en-US':
|
||||
'关系图目前仅支持 eCharts 原生属性配置，使用方式和 eCharts 一致。详细配置请参考：https://echarts.apache.org/examples/zh/index.html#chart-type-graph'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
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: [
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartProps {
|
||||
afterConfig: () => void
|
||||
afterSetOption: () => void
|
||||
afterSetOptionOnce: () => void
|
||||
animation: object
|
||||
axisPointer: object | array
|
||||
backgroundColor: object | string
|
||||
beforeConfig: () => void
|
||||
brush: object | array
|
||||
cancelResizeCheck: boolean
|
||||
changeDelay: number // 默认值 0
|
||||
colorMode: string
|
||||
colors: array
|
||||
data: object | array
|
||||
dataEmpty: boolean
|
||||
dataZoom: object | array
|
||||
events: object
|
||||
extend: object
|
||||
geo: object | array
|
||||
graphic: object | array
|
||||
grid: object | array
|
||||
height: string // 默认值 '400px'
|
||||
initOptions: object
|
||||
judgeWidth: boolean // 默认值 false
|
||||
legend: object | array
|
||||
legendPosition: string
|
||||
legendVisible: boolean // 默认值 true
|
||||
loading: boolean
|
||||
markArea: object
|
||||
markLine: object
|
||||
markPoint: object
|
||||
notSetUnchange: array
|
||||
radar: object
|
||||
resizeDelay: number // 默认值 200
|
||||
resizeable: boolean // 默认值 true
|
||||
series: object | array
|
||||
setOptionOpts: boolean | object // 默认值 true
|
||||
settings: object
|
||||
textStyle: object | array
|
||||
theme: object
|
||||
themeName: object | string
|
||||
timeline: object | array
|
||||
title: object | array
|
||||
toolbox: object | array
|
||||
tooltip: object
|
||||
tooltipFormatter: () => void
|
||||
tooltipVisible: boolean // 默认值 true
|
||||
visualMap: object | array
|
||||
width: string // 默认值 'auto'
|
||||
widthChangeDelay: number // 默认值 300
|
||||
xAxis: object | array
|
||||
yAxis: object | array
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-graph
|
||||
`
|
||||
}
|
||||
]
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,579 +1,324 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-heatmap',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '图表主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array | string',
|
||||
typeAnchorName: 'Color',
|
||||
defaultValue: '随主题',
|
||||
desc: {
|
||||
'zh-CN': '颜色',
|
||||
'en-US': 'Color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'padding',
|
||||
type: 'array',
|
||||
defaultValue: '[50,20,50,20]',
|
||||
typeAnchorName: 'Padding',
|
||||
desc: {
|
||||
'zh-CN': '图表内边距值',
|
||||
'en-US': 'Margin values within the chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'event',
|
||||
type: 'object',
|
||||
defaultValue: '默认不触发',
|
||||
typeAnchorName: 'Event',
|
||||
desc: {
|
||||
'zh-CN': '图表事件',
|
||||
'en-US': 'Chart Events'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Type',
|
||||
desc: {
|
||||
'zh-CN': '配置热力图类型(必填)',
|
||||
'en-US': 'Configure heatmap type (required)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'borderColor',
|
||||
type: 'string',
|
||||
defaultValue: '#1F55B5',
|
||||
typeAnchorName: 'BorderColor',
|
||||
desc: {
|
||||
'zh-CN': '日历热力图矩形边框色',
|
||||
'en-US': 'Calendar heatmap rectangle border color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'showLabel',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
typeAnchorName: 'ShowLabel',
|
||||
desc: {
|
||||
'zh-CN': '日历热力图矩形文本显示',
|
||||
'en-US': 'Calendar heatmap rectangular text display'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'rectangleSize',
|
||||
type: 'number',
|
||||
defaultValue: '8',
|
||||
typeAnchorName: 'RectangleSize',
|
||||
desc: {
|
||||
'zh-CN': '矩形热力图矩形大小',
|
||||
'en-US': 'Rectangular heatmap with rectangular size'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'handle',
|
||||
type: 'object',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Handle',
|
||||
desc: {
|
||||
'zh-CN': '日历热力图手柄相关配置',
|
||||
'en-US': 'Calendar heatmap controller related configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
type: 'number',
|
||||
defaultValue: '40',
|
||||
typeAnchorName: 'Quantity',
|
||||
desc: {
|
||||
'zh-CN': '蜂窝热力图手柄相关配置',
|
||||
'en-US': 'Honeycomb heatmap handle related configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'changeProperty',
|
||||
type: 'string',
|
||||
defaultValue: 'opacity',
|
||||
typeAnchorName: 'ChangeProperty',
|
||||
desc: {
|
||||
'zh-CN': '日历热力图热力的变化设置',
|
||||
'en-US': 'Calendar heat map heat change settings'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
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: 'xAxis',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'XAxis',
|
||||
desc: {
|
||||
'zh-CN': '配置x轴坐标数据',
|
||||
'en-US': 'Configure x-axis coordinate data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
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: 'yAxis',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'YAxis',
|
||||
desc: {
|
||||
'zh-CN': '配置y轴',
|
||||
'en-US': 'Configure y-axis'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
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
|
||||
}`
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'BorderColor',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值:<code>'#1F55B5'</code></p>
|
||||
<p data-v-md-line="3">说明：设置<code>CalendarHeatMapChart</code>图表的 borderColor,仅 type 为<code>CalendarHeatMapChart</code>有效</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'ChangeProperty',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>opcity</code></p>
|
||||
<p data-v-md-line="3">可选值：<code>opcity,color</code></p>
|
||||
<p data-v-md-line="5">说明：控制<code>CalendarHeatMapChart</code>图表根据什么来体现热力的变化,仅 type 为<code>CalendarHeatMapChart</code>时有效。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>type 为RectangularHeatMapChart时
|
||||
<span class="hljs-comment">// [[x,y,z,name],[x,y,z,name],...]</span>
|
||||
<span class="hljs-comment">// [维度X数据 维度Y数据 矩形透明度维度数据 单项数据名称]</span>
|
||||
<span class="hljs-comment">// 坐标轴的数据根据相应维度数据从小到大排序生成。</span>
|
||||
data:[
|
||||
[<span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-string">'Australia'</span>],
|
||||
[<span class="hljs-number">30</span>, <span class="hljs-number">20</span>, <span class="hljs-number">21</span>, <span class="hljs-string">'Canada'</span>],
|
||||
[<span class="hljs-number">40</span>, <span class="hljs-number">60</span>, <span class="hljs-number">29</span>, <span class="hljs-string">'China'</span>],
|
||||
...
|
||||
]
|
||||
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="17"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>type 为CalendarHeatMapChart时
|
||||
<span class="hljs-comment">// [</span>
|
||||
<span class="hljs-comment">// { Name: 'Q1', Week:'Monday', Value: 88,},</span>
|
||||
<span class="hljs-comment">// { Name: 'Q1', Week:'Tuesday', Value: 66,},</span>
|
||||
<span class="hljs-comment">// { Name: 'Q1', Week:'Wednesday', Value: 78,}</span>
|
||||
<span class="hljs-comment">// ...</span>
|
||||
<span class="hljs-comment">// ]</span>
|
||||
<span class="hljs-comment">// [{维度X数据 维度Y数据 单项数据}]</span>
|
||||
<span class="hljs-comment">// Name:x 轴数据类别,属性名称自定义， Week:y 轴数据类别,属性名称自定义， Value:显示的文本,属性名称自定义。x,y 轴的数据类别显示顺序按照 data 中书写顺序决定。</span>
|
||||
data: [
|
||||
{ Name: <span class="hljs-string">'Q1'</span>, Week:<span class="hljs-string">'Monday'</span>, Value: <span class="hljs-number">88</span>,},
|
||||
{ Name: <span class="hljs-string">'Q1'</span>, Week:<span class="hljs-string">'Tuesday'</span>, Value: <span class="hljs-number">66</span>,},
|
||||
{ Name: <span class="hljs-string">'Q1'</span>, Week:<span class="hljs-string">'Wednesday'</span>, Value: <span class="hljs-number">78</span>,},
|
||||
...
|
||||
{ Name: <span class="hljs-string">'Q2'</span>, Week:<span class="hljs-string">'Monday'</span>, Value: <span class="hljs-number">36</span>,},
|
||||
{ Name: <span class="hljs-string">'Q2'</span>, Week:<span class="hljs-string">'Tuesday'</span>, Value: <span class="hljs-number">22</span>,},
|
||||
{ Name: <span class="hljs-string">'Q2'</span>, Week:<span class="hljs-string">'Wednesday'</span>, Value: <span class="hljs-number">99</span>,},
|
||||
...
|
||||
{ Name: <span class="hljs-string">'Q3'</span>, Week:<span class="hljs-string">'Monday'</span>, Value: <span class="hljs-number">77</span>,},
|
||||
{ Name: <span class="hljs-string">'Q3'</span>, Week:<span class="hljs-string">'Tuesday'</span>, Value: <span class="hljs-number">46</span>,},
|
||||
{ Name: <span class="hljs-string">'Q3'</span>, Week:<span class="hljs-string">'Wednesday'</span>, Value: <span class="hljs-number">30</span>,},
|
||||
...
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="43"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>type 为HexagonHeatMapChart时
|
||||
data: [
|
||||
{
|
||||
name:<span class="hljs-string">'A'</span>,
|
||||
value:<span class="hljs-number">24</span>
|
||||
},
|
||||
...
|
||||
]
|
||||
<span class="hljs-comment">//name为节点的名称，value为节点的值</span>
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="55">说明：图表的数据</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Handle',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：设置<code>CalendarHeatMapChart</code>图表的手柄，不传不显示手柄，仅 type 为<code>CalendarHeatMapChart</code>时有效。</p>
|
||||
<div data-v-md-line="3"><p class="ev_expand_title">handle.inverse<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p><p class="ev_expand_introduce">可选值：<code>true, false</code>
|
||||
</p><p class="ev_expand_introduce">说明：设置<code>CalendarHeatMapChart</code>图表的手柄两端文本是否反转显示
|
||||
</p></div><div data-v-md-line="8"><p class="ev_expand_title">handle.text<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Array</span>
|
||||
</p><p class="ev_expand_introduce">格式:[A,B]
|
||||
</p><p class="ev_expand_introduce">默认值：data 第三个属性值的最大值和最小值
|
||||
</p><p class="ev_expand_introduce">说明：设置<code>CalendarHeatMapChart</code>图表的手柄两端文本。
|
||||
</p></div><div data-v-md-line="13"><p class="ev_expand_title">handle.calculable<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p><p class="ev_expand_introduce">可选值：<code>true, false</code>
|
||||
</p><p class="ev_expand_introduce">说明：设置<code>CalendarHeatMapChart</code>图表的手柄滑块是否显示。
|
||||
</p></div><div data-v-md-line="18"><p class="ev_expand_title">handle.orient<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>vertical</code>
|
||||
</p><p class="ev_expand_introduce">可选值：<code>vertical,horizontal</code>
|
||||
</p><p class="ev_expand_introduce">说明：设置<code>CalendarHeatMapChart</code>图表的手柄显示方向。<code>vertical</code>表示垂直，<code>horizontal</code>表示水平。
|
||||
</p></div><div data-v-md-line="23"><p class="ev_expand_title">handle.width<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>20</code>
|
||||
</p><p class="ev_expand_introduce">说明：设置<code>CalendarHeatMapChart</code>图表的手柄宽度。
|
||||
</p></div><div data-v-md-line="27"><p class="ev_expand_title">handle.height<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>400</code>
|
||||
</p><p class="ev_expand_introduce">说明：设置<code>CalendarHeatMapChart</code>图表的手柄高度。
|
||||
</p></div><div data-v-md-line="31"><p class="ev_expand_title">handle.position<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>{right:'4%', bottom:'6%'}</code>
|
||||
</p><p class="ev_expand_introduce">可选值：<code>top, left, right, bottom</code>
|
||||
</p><p class="ev_expand_introduce">说明：设置<code>CalendarHeatMapChart</code>图表的手柄位置,top 的值可以是 20 这样的具体像素值,可以是 '20%' 这样相对于容器高宽的百分比,left 的值可以是 20 这样的具体像素值,可以是 '20%' 这样相对于容器高宽的百分比, right 的值可以是 20 这样的具体像素值,可以是 '20%' 这样相对于容器高宽的百分比,bottom 的值可以是 20 这样的具体像素值,可以是 '20%' 这样相对于容器高宽的百分比。
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Quantity',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>40</code></p>
|
||||
<p data-v-md-line="3">说明：设置<code>HexagonHeatMapChart</code>图表的蜂窝的排列数量,仅 type 为<code>HexagonHeatMapChart</code>时有效。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'RectangleSize',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值:<code>8</code></p>
|
||||
<p data-v-md-line="3">说明：控制矩形的大小，仅 type 为<code>RectangularHeatMapChart</code>时有效。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'ShowLabel',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值:<code>true</code></p>
|
||||
<p data-v-md-line="3">可选值：<code>true, false</code></p>
|
||||
<p data-v-md-line="5">说明：设置<code>CalendarHeatMapChart</code>图表的图元的文本显示,仅 type 为<code>CalendarHeatMapChart</code>有效</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Type',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值:<code>true</code></p>
|
||||
<p data-v-md-line="3">可选值：<code>true, false</code></p>
|
||||
<p data-v-md-line="5">说明：设置<code>CalendarHeatMapChart</code>图表的图元的文本显示,仅 type 为<code>CalendarHeatMapChart</code>有效</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'YAxis',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式:</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>yAxis:{
|
||||
<span class="hljs-comment">// 设置单位</span>
|
||||
unit:<span class="hljs-string">'%'</span>,
|
||||
<span class="hljs-comment">// 设置刻度文本间隔</span>
|
||||
interval:<span class="hljs-number">29</span>,
|
||||
<span class="hljs-comment">// 坐标轴的位置</span>
|
||||
position:<span class="hljs-string">'right'</span>,
|
||||
<span class="hljs-comment">// 坐标轴的名称</span>
|
||||
name: <span class="hljs-string">'Number'</span>,
|
||||
<span class="hljs-comment">// 坐标轴的名称位置调整</span>
|
||||
nameTextStyle:{
|
||||
<span class="hljs-keyword">align</span>: <span class="hljs-string">'right'</span>,
|
||||
<span class="hljs-comment">// 用于调整y轴标题的位置</span>
|
||||
padding: [<span class="hljs-number">0</span>, -<span class="hljs-number">38</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>]
|
||||
},
|
||||
},
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="22"><p class="ev_expand_title">yAxis.unit<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="24"><p class="ev_expand_introduce">说明：设置y轴label的单位。
|
||||
</p></div><div data-v-md-line="26"><p class="ev_expand_title">yAxis.interval<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Number | Function</span>
|
||||
</p></div><div data-v-md-line="28"><p class="ev_expand_introduce">格式：
|
||||
</p></div><div data-v-md-line="30"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>// 当interval为<span class="hljs-number">2</span>时，y轴的<span class="hljs-selector-tag">label</span>会每隔<span class="hljs-number">2</span>个显示
|
||||
interval: <span class="hljs-number">2</span>;
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="35"><p class="ev_expand_introduce">
|
||||
</p></div><div data-v-md-line="37"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>// 当interval为function时，y轴的<span class="hljs-selector-tag">label</span>会根据函数的返回结果展示。
|
||||
// 返回true表示显示
|
||||
// 返回false表示不显示
|
||||
// index表示当前x轴数据的索引,value表示当前x轴数据的值
|
||||
interval: (index,value) => {
|
||||
if (index % <span class="hljs-number">24</span> === <span class="hljs-number">0</span>) {
|
||||
return true;
|
||||
}
|
||||
if (index === <span class="hljs-number">61</span>) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="53"><p class="ev_expand_introduce">说明：自定义 y 轴label显示，仅 type 为<code>CalendarHeatMapChart</code>时有效。
|
||||
</p></div><div data-v-md-line="55"><p class="ev_expand_title">yAxis.position<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="57"><p class="ev_expand_introduce">默认值：<code>'left'</code>
|
||||
</p></div><div data-v-md-line="59"><p class="ev_expand_introduce">可选值：<code>'left','right'</code>
|
||||
</p></div><div data-v-md-line="61"><p class="ev_expand_introduce">说明：设置y轴的位置。
|
||||
</p></div><div data-v-md-line="63"><p class="ev_expand_title">yAxis.name<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="65"><p class="ev_expand_introduce">说明：设置y轴label的名称,此时不用配置yAxisName属性。
|
||||
</p></div><div data-v-md-line="67"><p class="ev_expand_title">yAxis.nameTextStyle<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Obiect</span>
|
||||
</p></div><div data-v-md-line="69"><p class="ev_expand_introduce">说明：设置y轴名称样式，具体属性参考https://echarts.apache.org/zh/option.html#yAxis.nameTextStyle。
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Padding',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：设置图表四个方向的 <code>padding</code> 值<br>
|
||||
<code>padding : [top, right, bottom, left]</code><br>
|
||||
top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’<br>
|
||||
left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’<br>
|
||||
right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比<br>
|
||||
bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
\` & lt; div& gt;
|
||||
& lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
|
||||
& lt; span style = "margin-left:5px;color:#ffffff" & gt;
|
||||
& lt; span style = "display:inline-block;width:100px;" & gt;\${ item.seriesName } User & lt; /span>
|
||||
& lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
|
||||
& lt; span style = "color:gray" & gt; out & lt; /span>
|
||||
& lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
|
||||
& lt; /span>
|
||||
& lt; /div>\`;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span ></code ></pre >
|
||||
</div ></div > <p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div ></div ></div ></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Event',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> event:{
|
||||
series：{
|
||||
click:(parms)=>{
|
||||
...
|
||||
},
|
||||
mousemove:(params)=>{
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
....
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="18">说明：自定义设置图表的处理事件,具体用法参考<a href="https://echarts.apache.org/zh/api.html#echartsInstance.on">https://echarts.apache.org/zh/api.html#echartsInstance.on</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'XAxis',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>Object类型
|
||||
xAxis:{
|
||||
name:<span class="hljs-string">'Utils'</span>,
|
||||
line:{
|
||||
show:<span class="hljs-literal">true</span>,
|
||||
lineStyle:{
|
||||
color:<span class="hljs-string">'red'</span>,
|
||||
type:<span class="hljs-string">'dashed'</span>,
|
||||
width:<span class="hljs-number">2</span>
|
||||
}
|
||||
},
|
||||
interval:<span class="hljs-number">2</span>,
|
||||
fullGrid:<span class="hljs-literal">true</span>,
|
||||
labelRotate:<span class="hljs-number">45</span>,
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="21">说明：自定义 x 轴配置(将<code>xAxisName</code>、<code>xAxisLine</code>、<code>xAxisInterval</code>、<code>xAxisFullGrid</code>、<code>xAxisLabelRotate</code>属性统一整合到 <code>Object</code> 类型的 <code>xAxis</code> 内部)</p>
|
||||
<div data-v-md-line="23"><p class="ev_expand_title">xAxis.name<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="25"><p class="ev_expand_introduce">说明：配置x轴文本名称（<code>xAxis.name</code>即<code>xAxisName</code>）
|
||||
</p></div><div data-v-md-line="27"><p class="ev_expand_title">xAxis.line<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p></div><div data-v-md-line="29"><p class="ev_expand_introduce">默认值：
|
||||
<code>css
|
||||
xAxisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: theme === 'dark' ? rgba(238, 238, 238, .1) : rgba(25, 25, 25, .1),
|
||||
type: 'solid',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
<code>
|
||||
</p><p class="ev_expand_introduce">说明：设置 x 轴样式(<code>xAxis.line</code>即<code>xAxisLine</code>)
|
||||
</p></div><div data-v-md-line="42"><p class="ev_expand_title">xAxis.interval<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number | Function</span>
|
||||
</p></div><div data-v-md-line="44"><p class="ev_expand_introduce">默认值：<code>0</code>
|
||||
</p></div><div data-v-md-line="46"><p class="ev_expand_introduce">格式：
|
||||
</p></div><div data-v-md-line="48"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>// 当xAxisInterval为<span class="hljs-number">2</span>时，x轴的<span class="hljs-selector-tag">label</span>会每隔<span class="hljs-number">2</span>个显示
|
||||
xAxisInterval: <span class="hljs-number">2</span>
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="53"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>// 当xAxisInterval为function时，x轴的<span class="hljs-selector-tag">label</span>会根据函数的返回结果展示。
|
||||
// 返回true表示显示
|
||||
// 返回false表示不显示
|
||||
// index表示当前x轴数据的索引,value表示当前x轴数据的值
|
||||
xAxisInterval: (index,value) => {
|
||||
if (index % <span class="hljs-number">24</span> === <span class="hljs-number">0</span>) {
|
||||
return true;
|
||||
}
|
||||
if (index === <span class="hljs-number">61</span>) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="69"><p class="ev_expand_introduce">说明：设置 x 轴 label 的间距 ， 默认不设置时 ， 会根据图表宽度自适应（<code>xAxis.interval</code>即<code>xAxisInterval</code>）
|
||||
</p></div><div data-v-md-line="71"><p class="ev_expand_title">xAxis.fullGrid<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p></div><div data-v-md-line="73"><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p><p class="ev_expand_introduce">说明：设置图表是否顶格到 x 轴左右两边(<code>xAxis.fullGrid</code>即<code>xAxisFullGrid</code>)
|
||||
</p></div><div data-v-md-line="76"><p class="ev_expand_title">xAxis.labelRotate<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="78"><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p><p class="ev_expand_introduce">说明：设置 x 轴文本的旋转角度取值范围 -90 度到 90 度(<code>xAxis.labelRotate</ode>即<code>xAxisLabelRotate</code>)
|
||||
</code></p></div></div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,344 +1,314 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-liquidfill',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '图表主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array | string',
|
||||
defaultValue: '随主题',
|
||||
typeAnchorName: 'Color',
|
||||
desc: {
|
||||
'zh-CN': '颜色',
|
||||
'en-US': 'Color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'waveAnimation',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
typeAnchorName: 'WaveAnimation',
|
||||
desc: {
|
||||
'zh-CN': '图表动画',
|
||||
'en-US': 'Chart animation'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'backgroundStyle',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'BackgroundStyle',
|
||||
desc: {
|
||||
'zh-CN': '图表背景配置',
|
||||
'en-US': 'Chart background configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'shape',
|
||||
type: 'string',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Shape',
|
||||
desc: {
|
||||
'zh-CN': '图表形状',
|
||||
'en-US': 'Chart shape'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'outline',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Outline',
|
||||
desc: {
|
||||
'zh-CN': '图表外框配置',
|
||||
'en-US': 'Chart Frame Configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'label',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Label',
|
||||
desc: {
|
||||
'zh-CN': '图表文本',
|
||||
'en-US': 'Chart Text'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart Data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'series',
|
||||
type: 'object',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Series',
|
||||
desc: {
|
||||
'zh-CN': '图表series',
|
||||
'en-US': 'Chart Series'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
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: ''
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'BackgroundStyle',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式示例：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>backgroundStyle: {
|
||||
borderWidth: <span class="hljs-number">5</span>,
|
||||
borderColor: <span class="hljs-string">'#FDC000'</span>,
|
||||
color: <span class="hljs-string">'#fff'</span>
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="11">说明：通过配置<code>backgroundStyle</code>属性，修改图表背景。<br><br>
|
||||
<code>borderWidth</code>：水球图的背景边框宽度。<br><br>
|
||||
<code>borderColor</code>：水球图的背景边框颜色。<br><br>
|
||||
<code>color</code>：水球图的背景颜色。<br><br>
|
||||
其他更多属性配置可见水球图的git网址：<a href="https://github.com/ecomfe/echarts-liquidfill" target="_blank">https://github.com/ecomfe/echarts-liquidfill</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式示例：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> data: [<span class="hljs-number">0.6</span>, <span class="hljs-number">0.5</span>, <span class="hljs-number">0.4</span>]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">说明：水球图数据，数组里每个数表示不同波浪面积的占比。例如上面数据代表水球图的各个波浪占整个水球的 60%, 50%, 40%。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Label',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式示例：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> label: {
|
||||
formatter: <span class="hljs-string">'{a}\n{b}\n购房比: {c}'</span>,
|
||||
fontSize: <span class="hljs-number">40</span>,
|
||||
color: <span class="hljs-string">'green'</span>,
|
||||
},
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="12">说明：通过配置<code>label</code>属性，来修改图表的文本<br><br>
|
||||
<code>formatter</code>：文本内容格式器，支持字符串模板和回调函数两种形式。详细参数可参照漏斗图的formatter：https://echarts.apache.org/zh/option.html#series-funnel.label.formatter。<br><br>
|
||||
<code>font</code>：文本的字体大小。<br><br>
|
||||
<code>color</code>：文本的颜色。<br><br>
|
||||
其他更多属性配置可见水球图的git网址：<a href="https://github.com/ecomfe/echarts-liquidfill" target="_blank">https://github.com/ecomfe/echarts-liquidfill</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Outline',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式示例：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> outline: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
itemStyle: {
|
||||
borderColor: <span class="hljs-string">'#BD72F0'</span>,
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="12">说明：通过配置<code>outline</code>属性，来修改图表的外边框<br><br>
|
||||
<code>show</code>：选择是否展现图表。<br><br>
|
||||
<code>itemStyle</code>：修改水球图外边框样式的属性。<br><br>
|
||||
<code>borderColor</code>：水球图的外边框颜色。<br><br>
|
||||
其他更多属性配置可见水球图的git网址：<a href="https://github.com/ecomfe/echarts-liquidfill" target="_blank">https://github.com/ecomfe/echarts-liquidfill</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Series',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式示例：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>series:{
|
||||
name: <span class="hljs-string">'广东深圳'</span>,
|
||||
data: [
|
||||
<span class="hljs-number">0.6</span>,
|
||||
{
|
||||
value: <span class="hljs-number">0.5</span>,
|
||||
itemStyle: {
|
||||
color: <span class="hljs-string">'red'</span>
|
||||
}
|
||||
},
|
||||
<span class="hljs-number">0.4</span>
|
||||
],
|
||||
center: [<span class="hljs-string">'25%'</span>, <span class="hljs-string">'50%'</span>],
|
||||
shape: <span class="hljs-string">'circle'</span>,
|
||||
label: {
|
||||
fontSize: <span class="hljs-number">40</span>
|
||||
},
|
||||
waveAnimation: <span class="hljs-literal">false</span>
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="25">说明：自定义 series，{{VITE_BASECOPYRIGHTS}} 仅对此部分的series进行覆盖，详细参数解释见：<a href="https://github.com/ecomfe/echarts-liquidfill" target="_blank">https://github.com/ecomfe/echarts-liquidfill</a>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Shape',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式示例：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>shape: <span class="hljs-string">'container'</span>
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">说明：水球图的形状属性。可选值为：<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>,<code>'container'</code>。<br><br>
|
||||
除此之外也可以使用<code>'path://'</code>自定义SVG形状。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'WaveAnimation',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式示例：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>waveAnimation: <span class="hljs-literal">true</span>
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">说明：通过配置waveAnimation属性，开启或关闭水球图动画。可选值为：<code>true</code>、<code>false</code>。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
\` <div>
|
||||
<i style="display:inline-block;width:10px;height:10px;background-color:\${item.color};"></i>
|
||||
<span style="margin-left:5px;color:#ffffff">
|
||||
<span style="display:inline-block;width:100px;">\${item.seriesName} User</span>
|
||||
<span style="font-weight:bold"> \${item.value} %</span>
|
||||
<span style="color:gray"> out </span>
|
||||
<span style="color:red"> \${100 - item.value} %</span>
|
||||
</span>
|
||||
</div>\`;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span></code></pre>
|
||||
</div></div><p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
],
|
||||
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
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,79 +1,305 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-map',
|
||||
type: 'component',
|
||||
props: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'Options',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
typeAnchorName: 'Options',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'关系图目前仅支持 eCharts 原生属性配置，使用方式和 eCharts 一致。详细配置请参考：https://echarts.apache.org/examples/zh/index.html#chart-type-graph',
|
||||
'en-US':
|
||||
'关系图目前仅支持 eCharts 原生属性配置，使用方式和 eCharts 一致。详细配置请参考：https://echarts.apache.org/examples/zh/index.html#chart-type-graph'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
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: [
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartProps {
|
||||
afterConfig: () => void
|
||||
afterSetOption: () => void
|
||||
afterSetOptionOnce: () => void
|
||||
animation: object
|
||||
axisPointer: object | array
|
||||
backgroundColor: object | string
|
||||
beforeConfig: () => void
|
||||
brush: object | array
|
||||
cancelResizeCheck: boolean
|
||||
changeDelay: number // 默认值 0
|
||||
colorMode: string
|
||||
colors: array
|
||||
data: object | array
|
||||
dataEmpty: boolean
|
||||
dataZoom: object | array
|
||||
events: object
|
||||
extend: object
|
||||
geo: object | array
|
||||
graphic: object | array
|
||||
grid: object | array
|
||||
height: string // 默认值 '400px'
|
||||
initOptions: object
|
||||
judgeWidth: boolean // 默认值 false
|
||||
legend: object | array
|
||||
legendPosition: string
|
||||
legendVisible: boolean // 默认值 true
|
||||
loading: boolean
|
||||
markArea: object
|
||||
markLine: object
|
||||
markPoint: object
|
||||
notSetUnchange: array
|
||||
radar: object
|
||||
resizeDelay: number // 默认值 200
|
||||
resizeable: boolean // 默认值 true
|
||||
series: object | array
|
||||
setOptionOpts: boolean | object // 默认值 true
|
||||
settings: object
|
||||
textStyle: object | array
|
||||
theme: object
|
||||
themeName: object | string
|
||||
timeline: object | array
|
||||
title: object | array
|
||||
toolbox: object | array
|
||||
tooltip: object
|
||||
tooltipFormatter: () => void
|
||||
tooltipVisible: boolean // 默认值 true
|
||||
visualMap: object | array
|
||||
width: string // 默认值 'auto'
|
||||
widthChangeDelay: number // 默认值 300
|
||||
xAxis: object | array
|
||||
yAxis: object | array
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-map
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
// 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-graph
|
||||
`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,421 +1,49 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-process',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '图表主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Color',
|
||||
desc: {
|
||||
'zh-CN': '颜色',
|
||||
'en-US': 'Color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'padding',
|
||||
type: 'array',
|
||||
defaultValue: '[50,20,50,20]',
|
||||
typeAnchorName: 'Padding',
|
||||
desc: {
|
||||
'zh-CN': '图表内边距值',
|
||||
'en-US': 'Margin values within the chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'event',
|
||||
type: 'object',
|
||||
defaultValue: '默认不触发',
|
||||
typeAnchorName: 'Event',
|
||||
desc: {
|
||||
'zh-CN': '图表事件',
|
||||
'en-US': 'Chart Events'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Name',
|
||||
desc: {
|
||||
'zh-CN': '图表数据(必填)',
|
||||
'en-US': 'Chart data (required)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'unit',
|
||||
type: 'string',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Unit',
|
||||
desc: {
|
||||
'zh-CN': '进度图右侧文本单位',
|
||||
'en-US': 'Text units on the right side of the progress chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'barWidth',
|
||||
type: 'number',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'BarWidth',
|
||||
desc: {
|
||||
'zh-CN': '进度图柱形宽度',
|
||||
'en-US': 'Progress chart column width'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'minWidth',
|
||||
type: 'string',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'MinWidth',
|
||||
desc: {
|
||||
'zh-CN': '进度图单项数据的最小宽度',
|
||||
'en-US': 'Minimum width of individual data in the progress chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'calibrationValue',
|
||||
type: 'number',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'CalibrationValue',
|
||||
desc: {
|
||||
'zh-CN': '进度图标定值',
|
||||
'en-US': 'Progress icon fixed value'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'label',
|
||||
type: 'object',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Label',
|
||||
desc: {
|
||||
'zh-CN': '堆叠进度图图表图元文本样式',
|
||||
'en-US': 'Stacking progress chart, graphic element, text style'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'state',
|
||||
type: 'object',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'State',
|
||||
desc: {
|
||||
'zh-CN': '根据状态设置颜色',
|
||||
'en-US': 'Set color based on status'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
|
||||
{
|
||||
name: 'title',
|
||||
type: 'object',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Title',
|
||||
desc: {
|
||||
'zh-CN': '进度图图表标题样式',
|
||||
'en-US': 'Title Style of Progress Chart and Chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'text',
|
||||
type: 'object',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Text',
|
||||
desc: {
|
||||
'zh-CN': '进度图图表右侧文本样式',
|
||||
'en-US': 'Text Style on the Right Side of the Progress Chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
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: 'BarWidth',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：横向进度图 ProcessBarChart:<code>8</code><br>
|
||||
，堆叠横向进度图 StackProcessBarChart:<code>20</code>，<br>
|
||||
说明：用来控制进度图柱形宽度</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'CalibrationValue',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：进度图：<code>100</code>，堆叠进度图：当前 data 中各项 children 的 value 总和的最大值,</p>
|
||||
<p data-v-md-line="3">说明：用于进度图展示 data 中每项数据在标定值的占据比例</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>进度图
|
||||
data:[
|
||||
{ name:<span class="hljs-string">'UniEPMgr'</span>, value:<span class="hljs-number">80</span> },
|
||||
{ name:<span class="hljs-string">'SMLoglic'</span>, value:<span class="hljs-number">65</span> },
|
||||
{ name:<span class="hljs-string">'SSO'</span>, value:<span class="hljs-number">45</span> },
|
||||
...
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="13">说明：图表数据 ， name 为页面横向进度条名称 ， value 为页面横向进度条长度</p>
|
||||
<div data-v-md-line="15"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>堆叠进度图
|
||||
data:[
|
||||
{
|
||||
name: <span class="hljs-string">'China'</span>,
|
||||
children: [
|
||||
{ type: <span class="hljs-string">'Game'</span>, value: <span class="hljs-number">30</span> },
|
||||
{ type: <span class="hljs-string">'Move'</span>, value: <span class="hljs-number">20</span> },
|
||||
{ type: <span class="hljs-string">'Animation'</span>, value: <span class="hljs-number">45</span> },
|
||||
{ type: <span class="hljs-string">'Fiction'</span>, value: <span class="hljs-number">60</span> },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: <span class="hljs-string">'Mexico'</span>,
|
||||
children: [
|
||||
{ type: <span class="hljs-string">'Game'</span>, value: <span class="hljs-number">12</span> },
|
||||
{ type: <span class="hljs-string">'Move'</span>, value: <span class="hljs-number">14</span> },
|
||||
{ type: <span class="hljs-string">'Animation'</span>, value: <span class="hljs-number">33</span> },
|
||||
{ type: <span class="hljs-string">'Fiction'</span>, value: <span class="hljs-number">44</span> },
|
||||
],
|
||||
},
|
||||
....
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="40">说明：图表数据 ， name 为当前的系列名称 ， children 为该系列的具体数据，type 为具体数据的分类名称，value 为具体数据的值</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Label',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> label:{
|
||||
color:<span class="hljs-string">'#191919'</span>,
|
||||
fontSize:<span class="hljs-number">16</span>,
|
||||
width:<span class="hljs-number">50</span>
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="12">说明：用于堆叠进度图设置图表图元文本样式,具体用法参考<a target="_blank" href="https://echarts.apache.org/zh/option.html#series-bar.label">https://echarts.apache.org/zh/option.html#series-bar.label</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'MinWidth',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：用于进度图图表解决各项数据差值过大，导致部分数据显示不明显的问题，是百分比数值，表示占据当前数据的比例，例如’2%'。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Name',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：图表名称，不允许自定义<br><br>
|
||||
横向进度图–<code>name: 'ProcessBarChart'</code>,<br><br>
|
||||
堆叠横向进度图–<code>name: 'StackProcessBarChart'</code>,<br></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'State',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>state:{
|
||||
error:<span class="hljs-number">75</span>,
|
||||
warning:<span class="hljs-number">60</span>,
|
||||
subwarning:<span class="hljs-number">50</span>,
|
||||
success:<span class="hljs-number">20</span>
|
||||
},
|
||||
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="13">说明：用于根据状态显示不同柱形颜色，状态有 error,warning,subwarning,success 四种，颜色分别为<br>
|
||||
<span style="background:#F23030;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span>‘#F23030’,<br>
|
||||
<span style="background:#FF8800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span>‘#FF8800’,<br>
|
||||
<span style="background:#F7D916;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span>‘#F7D916’,<br>
|
||||
<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span>‘#5CB300’</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Text',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> text:{
|
||||
color:<span class="hljs-string">'#191919'</span>,
|
||||
fontSize:<span class="hljs-number">16</span>,
|
||||
width:<span class="hljs-number">50</span>
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="12">说明：用于进度图设置图表右侧文本样式,具体用法参考<a target="_blank" href="https://echarts.apache.org/zh/option.html#series-bar.label">https://echarts.apache.org/zh/option.html#series-bar.label</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Title',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> title:{
|
||||
color:<span class="hljs-string">'#191919'</span>,
|
||||
fontSize:<span class="hljs-number">16</span>,
|
||||
width:<span class="hljs-number">50</span>
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="12">说明：用于进度图设置图表标题样式,具体用法参考<a target="_blank" href="https://echarts.apache.org/zh/option.html#series-bar.label">https://echarts.apache.org/zh/option.html#series-bar.label</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Unit',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：横向进度图：<code>%</code>，堆叠横向进度图：无</p>
|
||||
<p data-v-md-line="3">说明：用来控制进度图右侧的文本显示单位</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Padding',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：设置图表四个方向的 <code>padding</code> 值<br>
|
||||
<code>padding : [top, right, bottom, left]</code><br>
|
||||
top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’<br>
|
||||
left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’<br>
|
||||
right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比<br>
|
||||
bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
\` & lt; div& gt;
|
||||
& lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
|
||||
& lt; span style = "margin-left:5px;color:#ffffff" & gt;
|
||||
& lt; span style = "display:inline-block;width:100px;" & gt; \${item.seriesName} User & lt; /span>
|
||||
& lt; span style = "font-weight:bold" & gt; \${item.value} %& lt; /span>
|
||||
& lt; span style = "color:gray" & gt; out & lt; /span>
|
||||
& lt; span style = "color:red" & gt; \${100 - item.value} %& lt; /span>
|
||||
& lt; /span>
|
||||
& lt; /div>\`;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span ></code ></pre >
|
||||
</div ></div > <p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div ></div ></div ></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Event',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> event:{
|
||||
series：{
|
||||
click:(parms)=>{
|
||||
...
|
||||
},
|
||||
mousemove:(params)=>{
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
....
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="18">说明：自定义设置图表的处理事件,具体用法参考<a href="https://echarts.apache.org/zh/api.html#echartsInstance.on">https://echarts.apache.org/zh/api.html#echartsInstance.on</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
],
|
||||
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 // 进度图图表右侧文本样式
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,403 +1,297 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart',
|
||||
type: 'component',
|
||||
props: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'cancel-resize-check',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否禁用 resize 时的容器检测',
|
||||
'en-US': 'Whether to disable container detection during resize'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'0'",
|
||||
desc: {
|
||||
'zh-CN': '属性修改触发图表重绘回调的延迟',
|
||||
'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
|
||||
'en-US':
|
||||
'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'events',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '事件绑定',
|
||||
'en-US': 'Event binding'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'extend',
|
||||
typeAnchorName: 'chart#IChartProps',
|
||||
type: 'objcet',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'echarts 的配置项',
|
||||
'en-US': 'Configuration items of echarts'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
type: 'string',
|
||||
defaultValue: "'400px'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的高度。',
|
||||
'en-US': 'Set the height of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'init-options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'init 附加参数',
|
||||
'en-US': 'Init Additional Parameters'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'judge-width',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否处理生成图表时的宽度问题',
|
||||
'en-US': 'Do you want to process the width issue when generating charts?'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'legend-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示图例',
|
||||
'en-US': 'Display legend'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'not-set-unchange',
|
||||
type: 'array',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '未发生变化时不参加 setOption 的属性',
|
||||
'en-US': 'The setOption attribute does not change.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resize-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'200'",
|
||||
desc: {
|
||||
'zh-CN': '窗口 resize 事件回调的延迟',
|
||||
'en-US': 'Delay of the window resize event callback'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'resizeable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否处理窗口 resize 事件',
|
||||
'en-US': 'Whether to process the window resize event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'set-option-opts',
|
||||
type: 'boolean | object',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': 'echarts setOption 的第二个参数',
|
||||
'en-US': 'Echarts setOption second parameter'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
mode: []
|
||||
},
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称。;自定义主题对象。',
|
||||
'en-US': 'User-defined theme name. ;User-defined theme object.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'theme-name',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
|
||||
'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip-visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示提示框',
|
||||
'en-US': 'Display dialog box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
type: 'string',
|
||||
defaultValue: "'auto'",
|
||||
desc: {
|
||||
'zh-CN': '设置图表容器的宽度。',
|
||||
'en-US': 'Set the width of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width-change-delay',
|
||||
type: 'number',
|
||||
defaultValue: "'300'",
|
||||
desc: {
|
||||
'zh-CN': '容器宽度变化的延迟',
|
||||
'en-US': 'Container width change delay'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表配置项(无法与settings混用)',
|
||||
'en-US': 'Chart Configuration item (cannot be used together with settings)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'settings',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置项',
|
||||
'en-US': 'Chart Configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color-mode',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义颜色模式',
|
||||
'en-US': 'Custom color mode'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-line',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标线',
|
||||
'en-US': 'Chart markings'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-area',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标志区域',
|
||||
'en-US': 'Chart symbol area'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-point',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标点',
|
||||
'en-US': 'Chart punctuation'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表加载状态',
|
||||
'en-US': 'Chart loading status'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data-empty',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '暂无数据状态',
|
||||
'en-US': 'No data status available at the moment'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'before-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option-once',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
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: [
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartProps {
|
||||
afterConfig: () => void
|
||||
afterSetOption: () => void
|
||||
afterSetOptionOnce: () => void
|
||||
animation: object
|
||||
axisPointer: object | array
|
||||
backgroundColor: object | string
|
||||
beforeConfig: () => void
|
||||
brush: object | array
|
||||
cancelResizeCheck: boolean
|
||||
changeDelay: number // 默认值 0
|
||||
colorMode: string
|
||||
colors: array
|
||||
data: object | array
|
||||
dataEmpty: boolean
|
||||
dataZoom: object | array
|
||||
events: object
|
||||
extend: object
|
||||
geo: object | array
|
||||
graphic: object | array
|
||||
grid: object | array
|
||||
height: string // 默认值 '400px'
|
||||
initOptions: object
|
||||
judgeWidth: boolean // 默认值 false
|
||||
legend: object | array
|
||||
legendPosition: string
|
||||
legendVisible: boolean // 默认值 true
|
||||
loading: boolean
|
||||
markArea: object
|
||||
markLine: object
|
||||
markPoint: object
|
||||
notSetUnchange: array
|
||||
radar: object
|
||||
resizeDelay: number // 默认值 200
|
||||
resizeable: boolean // 默认值 true
|
||||
series: object | array
|
||||
setOptionOpts: boolean | object // 默认值 true
|
||||
settings: object
|
||||
textStyle: object | array
|
||||
theme: object
|
||||
themeName: object | string
|
||||
timeline: object | array
|
||||
title: object | array
|
||||
toolbox: object | array
|
||||
tooltip: object
|
||||
tooltipFormatter: () => void
|
||||
tooltipVisible: boolean // 默认值 true
|
||||
visualMap: object | array
|
||||
width: string // 默认值 'auto'
|
||||
widthChangeDelay: number // 默认值 300
|
||||
xAxis: object | array
|
||||
yAxis: object | array
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartSettings',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartSettings {
|
||||
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
|
||||
}`
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Options',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 见具体图表组件
|
||||
}`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,554 +1,319 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-radar',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据(必填)',
|
||||
'en-US': 'Chart data (required)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '图表主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Color',
|
||||
desc: {
|
||||
'zh-CN': '颜色',
|
||||
'en-US': 'Color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
type: 'object',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Title',
|
||||
desc: {
|
||||
'zh-CN': '中心文本配置',
|
||||
'en-US': 'Central Text Configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'legend',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Legend',
|
||||
desc: {
|
||||
'zh-CN': '图例配置',
|
||||
'en-US': 'Legend configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'markLine',
|
||||
type: 'number | array',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'MarkLine',
|
||||
desc: {
|
||||
'zh-CN': '阈值线配置',
|
||||
'en-US': 'Threshold line configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'radarMax',
|
||||
type: 'number | array',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'RadarMax',
|
||||
desc: {
|
||||
'zh-CN': '最外圈代表的数值',
|
||||
'en-US': 'The value represented by the outermost circle'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'event',
|
||||
type: 'object',
|
||||
defaultValue: '默认不触发',
|
||||
typeAnchorName: 'Event',
|
||||
desc: {
|
||||
'zh-CN': '图表事件',
|
||||
'en-US': 'Chart Events'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'position',
|
||||
type: 'object',
|
||||
defaultValue: "{center:['50%', '50%'],radius: '50%'}",
|
||||
typeAnchorName: 'Position',
|
||||
desc: {
|
||||
'zh-CN': '图表位置及大小',
|
||||
'en-US': 'Chart position and size'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'radarMark',
|
||||
type: 'boolean',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'RadarMark',
|
||||
desc: {
|
||||
'zh-CN': '底部坐标系刻度值显示',
|
||||
'en-US': 'Bottom coordinate system scale value display'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'radar',
|
||||
type: 'object',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Radar',
|
||||
desc: {
|
||||
'zh-CN': '雷达图的坐标系配置',
|
||||
'en-US': 'Coordinate system configuration of radar chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'area',
|
||||
type: 'object',
|
||||
defaultValue: '-',
|
||||
typeAnchorName: 'Area',
|
||||
desc: {
|
||||
'zh-CN': '雷达图图形区域配置',
|
||||
'en-US': 'Radar chart graphic area configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
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: ''
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'Area',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：area 用来控制用雷达图图形区域。</p>
|
||||
<div data-v-md-line="3"><p class="ev_expand_title">area.show<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p><p class="ev_expand_introduce">默认值：true
|
||||
</p><p class="ev_expand_introduce">说明：控制图形区域的填充是否显示。</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>data:{
|
||||
<span class="hljs-string">'Domestic'</span>:{
|
||||
<span class="hljs-string">'Equipment'</span>: <span class="hljs-number">43</span>,
|
||||
<span class="hljs-string">'VM'</span>: <span class="hljs-number">90</span>,
|
||||
<span class="hljs-string">'CSP'</span>: <span class="hljs-number">80</span>,
|
||||
<span class="hljs-string">'RD'</span>: <span class="hljs-number">53</span>,
|
||||
<span class="hljs-string">'Markets'</span>: <span class="hljs-number">78</span>
|
||||
},
|
||||
<span class="hljs-string">'Abroad'</span>:{
|
||||
<span class="hljs-string">'Equipment'</span>: <span class="hljs-number">75</span>,
|
||||
<span class="hljs-string">'VM'</span>: <span class="hljs-number">55</span>,
|
||||
<span class="hljs-string">'CSP'</span>: <span class="hljs-number">93</span>,
|
||||
<span class="hljs-string">'RD'</span>: <span class="hljs-number">90</span>,
|
||||
<span class="hljs-string">'Markets'</span>: <span class="hljs-number">86</span>
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="22">说明：图表的数据,可以有多组数据，但每组数据的维度名称必须一致。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'MarkLine',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>number类型，相对于所有数据项作比较，超过数据为红色
|
||||
markLine：<span class="hljs-number">20</span>
|
||||
Object类型,threshold为阈值的配置选项，需要针对所有data中的数据项配置，不能缺少
|
||||
markLine:{
|
||||
threshold:{
|
||||
<span class="hljs-string">'Equipment'</span>: <span class="hljs-number">25</span>,
|
||||
<span class="hljs-string">'VM'</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-string">'CSP'</span>: <span class="hljs-number">35</span>,
|
||||
<span class="hljs-string">'RD'</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-string">'Markets'</span>: <span class="hljs-number">50</span>
|
||||
}
|
||||
},
|
||||
雷达图的数据
|
||||
data:{
|
||||
<span class="hljs-string">'Domestic'</span>:{
|
||||
<span class="hljs-string">'Equipment'</span>: <span class="hljs-number">43</span>,
|
||||
<span class="hljs-string">'VM'</span>: <span class="hljs-number">90</span>,
|
||||
<span class="hljs-string">'CSP'</span>: <span class="hljs-number">80</span>,
|
||||
<span class="hljs-string">'RD'</span>: <span class="hljs-number">53</span>,
|
||||
<span class="hljs-string">'Markets'</span>: <span class="hljs-number">78</span>
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="28">说明:图表的阈值线</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Position',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：position 用来控制用雷达图的位置和半径。</p>
|
||||
<div data-v-md-line="3"><p class="ev_expand_title">position.center<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Array</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>['50%','50%']</code>
|
||||
</p><p class="ev_expand_introduce">说明：center 为中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
|
||||
</p></div><div data-v-md-line="7"><p class="ev_expand_title">position.radius<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String | Number |Array</span>
|
||||
</p><p class="ev_expand_introduce">默认值：<code>'50%'</code>
|
||||
</p><p class="ev_expand_introduce">说明：为number时，直接指定外半径值。为string时，50%表示外半径为可视区尺寸（容器高宽中较小一项）的50%长度。为数组时，数组的第一项是内半径，第二项是外半径，每一项遵从上述 number string 的描述（数组需要同时满足内外半径两项，请勿只有一项的情况）。
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Radar',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>说明：控制单组数据雷达图的顶部显示数据的单位
|
||||
radar: {
|
||||
<span class="hljs-comment">// 开启标签响应鼠标事件</span>
|
||||
triggerEvent:<span class="hljs-literal">true</span>,
|
||||
axisName: {
|
||||
formatter: (indicatorName,indicator) => {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-string">\`\${ indicatorName }系列\`</span>
|
||||
},
|
||||
color:<span class="hljs-string">'#191919'</span>
|
||||
}
|
||||
},
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="17">详细请看https://echarts.apache.org/zh/option.html#radar</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'RadarMark',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>true</code></p>
|
||||
<p data-v-md-line="3">可选值:<code>true,false</code></p>
|
||||
<p data-v-md-line="5">说明：雷达图底部坐标系是否显示刻度值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'RadarMax',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>雷达图坐标系的最外圈为数据中的最大值</code></p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>number类型，统一设置雷达图最外圈代表的数值
|
||||
Array类型,name为数据子项的key，max为设置的最大值,此时如果配置markLine阈值线的红圈不会显示，如果markLine单独配置数据子项的阈值，请确保小于radarMax
|
||||
radarMax: [
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name:<span class="hljs-string">'Equipment'</span>,
|
||||
max:<span class="hljs-number">20</span>
|
||||
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 // 雷达图的坐标系配置
|
||||
|
||||
}`
|
||||
}
|
||||
],
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="14">说明:用来设置雷达图最外圈代表的数值</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div> `
|
||||
},
|
||||
{
|
||||
name: 'Title',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：对齐 echarts 的 <code>title</code> 属性，替代旧属性<code>text</code></p>
|
||||
<p data-v-md-line="3">格式：</p>
|
||||
<div data-v-md-line="5"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>title:{
|
||||
text: <span class="hljs-string">" "</span>,
|
||||
subtext: <span class="hljs-string">" "</span>,
|
||||
top: <span class="hljs-string">'center'</span>,
|
||||
left: <span class="hljs-string">'center'</span>,
|
||||
itemGap: <span class="hljs-number">8</span>,
|
||||
textStyle: {
|
||||
color: <span class="hljs-string">'#191919'</span>,
|
||||
fontSize: <span class="hljs-number">28</span>,
|
||||
lineHeight: <span class="hljs-number">28</span>,
|
||||
fontWeight: <span class="hljs-string">'normal'</span>,
|
||||
},
|
||||
subtextStyle: {
|
||||
color: <span class="hljs-string">'#bbbbbb'</span>,
|
||||
fontSize: <span class="hljs-number">16</span>,
|
||||
lineHeight: <span class="hljs-number">24</span>,
|
||||
fontWeight: <span class="hljs-string">'normal'</span>,
|
||||
},
|
||||
}
|
||||
</code></pre>
|
||||
</div></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Legend',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-javascript extra-class"><pre class="v-md-hljs-javascript"><code><span class="hljs-attr">legend</span>: {
|
||||
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">position</span>:{
|
||||
<span class="hljs-attr">left</span>:<span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">bottom</span>:<span class="hljs-number">15</span>
|
||||
},
|
||||
<span class="hljs-attr">itemGap</span>:<span class="hljs-number">28</span>,
|
||||
<span class="hljs-attr">orient</span>:<span class="hljs-string">'horizontal'</span>,
|
||||
<span class="hljs-attr">reverseEvent</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">selectedMode</span>:<span class="hljs-literal">true</span>,
|
||||
<span class="hljs-attr">icon</span>:<span class="hljs-string">'circle'</span>,
|
||||
<span class="hljs-attr">itemHeight</span>:<span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">itemWeight</span>:<span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">textStyle</span>:{
|
||||
<span class="hljs-attr">fontSize</span>:<span class="hljs-number">12</span>,
|
||||
<span class="hljs-attr">padding</span>:[<span class="hljs-number">4</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>]，
|
||||
<span class="hljs-attr">color</span>:<span class="hljs-string">'#4e4e4e'</span>,
|
||||
<span class="hljs-attr">overflow</span>:<span class="hljs-string">'none'</span>,
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="26">说明：自定义图例</p>
|
||||
<div data-v-md-line="28"><p class="ev_expand_title">legend.show<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p></div><div data-v-md-line="30"><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p></div><div data-v-md-line="32"><p class="ev_expand_introduce">说明：图例是否显示
|
||||
</p></div><div data-v-md-line="34"><p class="ev_expand_title">legend.itemGap<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="36"><p class="ev_expand_introduce">默认值：<code>28</code>
|
||||
</p></div><div data-v-md-line="38"><p class="ev_expand_introduce">说明：设置图例的间隔
|
||||
</p></div><div data-v-md-line="40"><p class="ev_expand_title">legend.type<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="42"><p class="ev_expand_introduce">说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果
|
||||
</p></div><div data-v-md-line="44"><p class="ev_expand_title">legend.width<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="46"><p class="ev_expand_introduce">说明：图例组件的整体宽度
|
||||
</p></div><div data-v-md-line="48"><p class="ev_expand_title">legend.height<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Number</span>
|
||||
</p></div><div data-v-md-line="50"><p class="ev_expand_introduce">说明：图例组件的整体高度
|
||||
</p></div><div data-v-md-line="52"><p class="ev_expand_title">legend.position<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p></div><div data-v-md-line="54"><p class="ev_expand_introduce">默认值：
|
||||
</p></div><div data-v-md-line="56"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code><span class="hljs-attribute">position</span>:{
|
||||
<span class="hljs-attribute">left</span>:<span class="hljs-string">'center'</span>,
|
||||
bottom:<span class="hljs-number">15</span>
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="63"><p class="ev_expand_introduce">说明：<br>
|
||||
自定义图例的位置<br>
|
||||
<code>position : {top, left, right, bottom}</code><br>
|
||||
top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'<br>
|
||||
left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'<br>
|
||||
right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比<br>
|
||||
bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
|
||||
</p></div><div data-v-md-line="71"><p class="ev_expand_title">legend.orient<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="73"><p class="ev_expand_introduce">默认值：<code>horizontal</code>(水平)
|
||||
</p></div><div data-v-md-line="75"><p class="ev_expand_introduce">可选值：<code>horizontal</code>（水平） 、 <code>vertical</code>（垂直）
|
||||
</p></div><div data-v-md-line="77"><p class="ev_expand_introduce">说明：图例的方向
|
||||
</p></div><div data-v-md-line="79"><p class="ev_expand_title">legend.reverseEvent<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p></div><div data-v-md-line="81"><p class="ev_expand_introduce">默认值：<code>false</code>
|
||||
</p></div><div data-v-md-line="83"><p class="ev_expand_introduce">说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;<br>图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。
|
||||
</p></div><div data-v-md-line="85"><p class="ev_expand_title">legend.selectedMode<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Boolean</span>
|
||||
</p></div><div data-v-md-line="87"><p class="ev_expand_introduce">默认值：<code>true</code>
|
||||
</p></div><div data-v-md-line="89"><p class="ev_expand_introduce">说明：是否可以通过点击图例改变系列的显示状态
|
||||
</p></div><div data-v-md-line="91"><p class="ev_expand_title">legend.icon<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">String</span>
|
||||
</p></div><div data-v-md-line="93"><p class="ev_expand_introduce">默认值：<code>circle</code>（圆形）
|
||||
</p></div><div data-v-md-line="95"><p class="ev_expand_introduce">可选值：<code>circle</code>（圆形）、<code>line</code>（线段） 、<code>rect</code>（长方形） 、 <code>roundRect</code>（圆角长方形） 、 <code>triangle</code>（三角形） 、 <code>diamond</code>（菱形）
|
||||
</p></div><div data-v-md-line="97"><p class="ev_expand_introduce">说明：图例的图标 ， 若定义了 <code>legend.data</code> ， 则此属性失效
|
||||
</p></div><div data-v-md-line="99"><p class="ev_expand_title">legend.data<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Array</span>
|
||||
</p></div><div data-v-md-line="101"><p class="ev_expand_introduce">样式：
|
||||
</p></div><div data-v-md-line="103"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>data:[
|
||||
{
|
||||
<span class="hljs-attribute">icon</span>:<span class="hljs-string">'image://public/image/LineChart/Domestic.png'</span>,
|
||||
iconChange:<span class="hljs-string">'image://public/image/LineChart/change.png'</span>,
|
||||
name:<span class="hljs-string">'Domestic'</span>,
|
||||
},
|
||||
{
|
||||
<span class="hljs-attribute">icon</span>:<span class="hljs-string">'image://public/image/LineChart/Abroad.png'</span>,
|
||||
iconChange:<span class="hljs-string">'image://public/image/LineChart/change.png'</span>,
|
||||
name:<span class="hljs-string">'Abroad'</span>,
|
||||
}
|
||||
],
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="118"><p class="ev_expand_introduce">说明：<br>
|
||||
针对不同的图例图标以数组的方式管理 ， 定义此属性后则 <code>legend.icon</code> 失效<br><code>icon</code>:图例未选中时的背景 ， 可使用 base64 编码的路径格式<br><code>iconChange</code>:图例选中时的背景 ， 可使用 base64 编码的路径格式<br><code>name</code>:图例对应的名称
|
||||
</p></div><div data-v-md-line="121"><p class="ev_expand_title">legend.itemHeight<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Nmuber</span>
|
||||
</p></div><div data-v-md-line="123"><p class="ev_expand_introduce">默认值：<code>14</code>
|
||||
</p></div><div data-v-md-line="125"><p class="ev_expand_introduce">说明：图例图标的高度
|
||||
</p></div><div data-v-md-line="127"><p class="ev_expand_title">legend.itemWidth<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Nmuber</span>
|
||||
</p></div><div data-v-md-line="129"><p class="ev_expand_introduce">默认值：<code>14</code>
|
||||
</p></div><div data-v-md-line="131"><p class="ev_expand_introduce">说明：图例图标的宽度 ， <code>legend.icon</code> 不为 <code>circle</code> 时 ， 此默认值为 25
|
||||
</p></div><div data-v-md-line="133"><p class="ev_expand_title">legend.formatter<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">String/Function</span>
|
||||
</p></div><div data-v-md-line="135"><p class="ev_expand_introduce">说明：用来自定义图例的文本显示。
|
||||
</p></div><div data-v-md-line="137"><p class="ev_expand_title">legend.textStyle<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">有默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p></div><div data-v-md-line="139"><p class="ev_expand_introduce">默认值：
|
||||
</p></div><div data-v-md-line="141"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>textStyle:{
|
||||
fontSize:<span class="hljs-number">12</span>,
|
||||
padding:[<span class="hljs-number">4</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>]，
|
||||
color:<span class="hljs-string">'#4e4e4e'</span>,
|
||||
overflow:<span class="hljs-string">'none'</span>,
|
||||
width:<span class="hljs-number">50</span>,
|
||||
rich:{ // 图例文本富文本配置
|
||||
title:{ // 文本对应的名称
|
||||
align:<span class="hljs-string">'right'</span>, // 设置文本右对齐
|
||||
width:<span class="hljs-number">100</span> // 设置文本显示宽度
|
||||
}
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="157"><p class="ev_expand_introduce">说明：图例图标的富文本配置 ， <code>theme=light</code>,color='#4e4e4e' ， <code>theme=dark</code>,color='#bbbbbb'。<code>width</code>设置每个图例文本的宽度，<code>overflow</code>设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。
|
||||
</p></div><div data-v-md-line="159"><p class="ev_expand_title">legend.tooltip<span class="ev_expand_required">非必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Object</span>
|
||||
</p></div><div data-v-md-line="161"><p class="ev_expand_introduce">示例：
|
||||
</p></div><div data-v-md-line="163"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>tooltip:{
|
||||
show: true
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="169"><p class="ev_expand_introduce">说明：图例是否显示悬浮提示框
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
\` & lt; div& gt;
|
||||
& lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
|
||||
& lt; span style = "margin-left:5px;color:#ffffff" & gt;
|
||||
& lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
|
||||
& lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
|
||||
& lt; span style = "color:gray" & gt; out & lt; /span>
|
||||
& lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
|
||||
& lt; /span>
|
||||
& lt; /div>\`;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span ></code ></pre >
|
||||
</div ></div > <p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div ></div ></div ></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Event',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> event:{
|
||||
series：{
|
||||
click:(parms)=>{
|
||||
...
|
||||
},
|
||||
mousemove:(params)=>{
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
....
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="18">说明：自定义设置图表的处理事件,具体用法参考<a href="https://echarts.apache.org/zh/api.html#echartsInstance.on">https://echarts.apache.org/zh/api.html#echartsInstance.on</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,463 +1,322 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-sankey',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '图表主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array | string',
|
||||
defaultValue: '随主题',
|
||||
typeAnchorName: 'Color',
|
||||
desc: {
|
||||
'zh-CN': '颜色',
|
||||
'en-US': 'Color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'padding',
|
||||
type: 'array',
|
||||
defaultValue: '根据文本长度自适应',
|
||||
typeAnchorName: 'Padding',
|
||||
desc: {
|
||||
'zh-CN': '图表内边距值',
|
||||
'en-US': 'Margin values within the chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'object',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'dragggble',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
typeAnchorName: 'Draggable',
|
||||
desc: {
|
||||
'zh-CN': '页面节点是否可拖动',
|
||||
'en-US': 'Is the page node draggable'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'widthSpace',
|
||||
type: 'array',
|
||||
defaultValue: '[10, 30]',
|
||||
typeAnchorName: 'WidthSpace',
|
||||
desc: {
|
||||
'zh-CN': '节点矩形样式配置',
|
||||
'en-US': 'Node rectangle style configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'nodeAlign',
|
||||
type: 'string',
|
||||
defaultValue: 'justify',
|
||||
typeAnchorName: 'NodeAlign',
|
||||
desc: {
|
||||
'zh-CN': '桑基图中节点的对齐方式',
|
||||
'en-US': 'Alignment of nodes in Sankey diagram'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'label',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Label',
|
||||
desc: {
|
||||
'zh-CN': '节点矩形中文本标签的样式',
|
||||
'en-US': 'Style of Text Labels in Node Rectangle'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'itemStyle',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'ItemStyle',
|
||||
desc: {
|
||||
'zh-CN': '节点矩形的样式',
|
||||
'en-US': 'Style of Node Rectangle'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'lineStyle',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'LineStyle',
|
||||
desc: {
|
||||
'zh-CN': '节点矩形连接带的样式',
|
||||
'en-US': 'Style of Node Rectangular Connection Strip'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'sortType',
|
||||
type: 'string',
|
||||
defaultValue: 'unset',
|
||||
typeAnchorName: 'SortType',
|
||||
desc: {
|
||||
'zh-CN': '每列数据的排序方式',
|
||||
'en-US': 'Sorting method for each column of data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'emptyStatus',
|
||||
type: 'string',
|
||||
defaultValue: 'node',
|
||||
typeAnchorName: 'EmptyStatus',
|
||||
desc: {
|
||||
'zh-CN': '空节点的展示状态',
|
||||
'en-US': 'Display status of empty nodes'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'series',
|
||||
type: 'array',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Echarts',
|
||||
desc: {
|
||||
'zh-CN': 'echarts原生属性',
|
||||
'en-US': 'Echarts native properties'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'grid',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Echarts',
|
||||
desc: {
|
||||
'zh-CN': 'echarts原生属性',
|
||||
'en-US': 'Echarts native properties'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'xAxis',
|
||||
type: 'array',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Echarts',
|
||||
desc: {
|
||||
'zh-CN': 'echarts原生属性',
|
||||
'en-US': 'Echarts native properties'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'yAxis',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Echarts',
|
||||
desc: {
|
||||
'zh-CN': 'echarts原生属性',
|
||||
'en-US': 'Echarts native properties'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Echarts',
|
||||
desc: {
|
||||
'zh-CN': 'echarts原生属性',
|
||||
'en-US': 'Echarts native properties'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
type: 'object',
|
||||
defaultValue: '见详情',
|
||||
typeAnchorName: 'Echarts',
|
||||
desc: {
|
||||
'zh-CN': 'echarts原生属性',
|
||||
'en-US': 'Echarts native properties'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
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: ''
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>data:{
|
||||
nodes:[
|
||||
{name:<span class="hljs-string">'a'</span>,value:<span class="hljs-number">70</span>},
|
||||
{name:<span class="hljs-string">'b'</span>,value:<span class="hljs-number">50</span>},
|
||||
{name:<span class="hljs-string">'c'</span>,value:<span class="hljs-number">20</span>},
|
||||
...
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
links:[
|
||||
{source:<span class="hljs-string">'a'</span>,target:<span class="hljs-string">'b'</span>,value:<span class="hljs-number">50</span>},
|
||||
{source:<span class="hljs-string">'a'</span>,target:<span class="hljs-string">'c'</span>,value:<span class="hljs-number">20</span>},
|
||||
...
|
||||
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原生属性
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="19">说明：图表数据 ， <code>nodes</code> 为页面节点数据 ， <code>links</code> 为页面节点之间的连接关系数据</p>
|
||||
<div data-v-md-line="21"><p class="ev_expand_title">data.nodes<span class="ev_expand_required">必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Array</span>
|
||||
</p></div><div data-v-md-line="23"><p class="ev_expand_introduce">格式：
|
||||
</p></div><div data-v-md-line="25"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code>nodes:[
|
||||
{name:<span class="hljs-string">'a'</span>,value:<span class="hljs-number">70</span>},
|
||||
{name:<span class="hljs-string">'b'</span>,value:<span class="hljs-number">50</span>},
|
||||
{name:<span class="hljs-string">'c'</span>,value:<span class="hljs-number">20</span>},
|
||||
...
|
||||
],
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="34"><p class="ev_expand_introduce">说明：页面节点数据 ； <code>name</code> 为节点名称 ， <code>value</code> 为节点的数据值 ， 未定义 <code>value</code> 则默认为 0
|
||||
</p></div><div data-v-md-line="36"><p class="ev_expand_title">data.links<span class="ev_expand_required">必填</span><span class="ev_expand_defaults">无默认值</span><span class="ev_expand_type">Array</span>
|
||||
</p></div><div data-v-md-line="38"><p class="ev_expand_introduce">格式：
|
||||
</p></div><div data-v-md-line="40"><div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class"><pre class="v-md-hljs-css"><code> links:[
|
||||
{source:<span class="hljs-string">'a'</span>,target:<span class="hljs-string">'b'</span>,value:<span class="hljs-number">50</span>},
|
||||
{source:<span class="hljs-string">'a'</span>,target:<span class="hljs-string">'c'</span>,value:<span class="hljs-number">20</span>},
|
||||
...
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><div data-v-md-line="48"><p class="ev_expand_introduce">说明：页面节点之间的连接关系数据 ； <code>source</code> 为节点起点 ， <code>target</code> 为节点终点 ， <code>value</code> 为节点间传递的数据值
|
||||
</p></div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Draggable',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值:<code>true</code></p>
|
||||
<p data-v-md-line="3">说明：页面节点是否可被拖动</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Echarts',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">此属性配置和eCharts一致，详细配置请参考：<a target="_blank" href="https://echarts.apache.org/zh/option.html#series-sankey">https://echarts.apache.org/zh/option.html#series-sankey</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'EmptyStatus',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>node</code></p>
|
||||
<p data-v-md-line="3">可选值：<code>node</code>(只展示其占位节点)，<br>
|
||||
<code>churnBar</code>(展示占位节点及其连接流失条)，</p>
|
||||
<p data-v-md-line="6">说明：空节点的展示状态</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'ItemStyle',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">此属性配置和eCharts一致，详细配置请参考：<a target="_blank" href="https://echarts.apache.org/zh/option.html#series-sankey">https://echarts.apache.org/zh/option.html#series-sankey</a></p>
|
||||
<p data-v-md-line="3">注意：在data.nodes中对每个节点设置itemStyle属性的权重>全局的itemStyle属性的权重>color属性的权重</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Label',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">此属性配置和 eCharts 基本一致，详细配置请参考：<a target="_blank" href="https://echarts.apache.org/zh/option.html#series-sankey">https://echarts.apache.org/zh/option.html#series-sankey</a></p>
|
||||
<p data-v-md-line="3">此外，SankeyChart 内置了一部分默认如何和自定义属性，如下：</p>
|
||||
<div data-v-md-line="5"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>label: { <span class="hljs-comment">// 节点的label默认是由其name和value组成</span>
|
||||
distance:<span class="hljs-number">5</span>,
|
||||
textArrange: <span class="hljs-string">'horizontal'</span> || <span class="hljs-string">'vertical'</span>, <span class="hljs-comment">// name和value的排列方向(只在全局label属性设置生效)</span>
|
||||
overHide: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 当节点label的高度超过节点高度，是否隐藏其label(只在全局label属性设置生效)</span>
|
||||
formatter: (params) => { <span class="hljs-comment">// 节点的label默认值，用户可自定义（自定义则textArrange、rich需要用户自己实现）</span>
|
||||
<span class="hljs-keyword">if</span>(textArrange===<span class="hljs-string">'horizontal'</span>){
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-string">\`{name|\${params.name}} {value|\${params.data.empty ? 0 : params.data.value}}\`</span>; <span class="hljs-comment">// 横向排列的label默认展示</span>
|
||||
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(textArrange===<span class="hljs-string">'vertical'</span>){
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-string">\`{name|\${params.name}}\n{value|\${params.data.empty ? 0 : params.data.value}}\`</span>; <span class="hljs-comment">// 纵向排列的label默认展示</span>
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
name: { <span class="hljs-comment">// 配置name字段的样式</span>
|
||||
fontSize: <span class="hljs-number">12</span>,
|
||||
color:<span class="hljs-string">'#777777'</span>
|
||||
},
|
||||
value: { <span class="hljs-comment">// 配置value字段的样式</span>
|
||||
fontSize: <span class="hljs-number">12</span>,
|
||||
color:<span class="hljs-string">'#191919'</span>,
|
||||
<span class="hljs-keyword">align</span>:<span class="hljs-string">'center'</span>
|
||||
}
|
||||
}
|
||||
};
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="31">注意：在 data.nodes 中对每个节点设置 label 属性的权重>全局的 label 属性的权重</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'LineStyle',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">此属性配置和eCharts一致，详细配置请参考：<a target="_blank" href="https://echarts.apache.org/zh/option.html#series-sankey">https://echarts.apache.org/zh/option.html#series-sankey</a></p>
|
||||
<p data-v-md-line="3">注意：在data.links中对每个节点设置lineStyle属性的权重>全局的lineStyle属性的权重>color属性的权重</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'NodeAlign',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>justify</code></p>
|
||||
<p data-v-md-line="3">可选值：<code>right</code> ， <code>left</code> ，<code>justify</code></p>
|
||||
<p data-v-md-line="5">说明：桑基图中节点的对齐方式</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'SortType',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>unset</code></p>
|
||||
<p data-v-md-line="3">可选值：<code>unset</code>(不设置，则按照数据在 nodes 的出现顺序排列)，<br>
|
||||
<code>ascend</code>(根据 value 值升序排列)，<br>
|
||||
<code>decline</code>(根据 value 值降序排列)</p>
|
||||
<p data-v-md-line="7">说明：每列数据的排序方式</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'WidthSpace',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>[10,30]</code></p>
|
||||
<p data-v-md-line="3">说明：自定义节点矩形宽度及每列间距 ； 第一个值与节点矩形宽度正相关 ， 第二个值与节点距下方节点的间距正相关</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">此属性配置和eCharts一致，详细配置请参考：<a target="_blank" href="https://echarts.apache.org/zh/option.html#series-sankey">https://echarts.apache.org/zh/option.html#series-sankey</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Padding',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：设置图表四个方向的 <code>padding</code> 值<br>
|
||||
<code>padding : [top, right, bottom, left]</code><br>
|
||||
top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’<br>
|
||||
left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’<br>
|
||||
right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比<br>
|
||||
bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,276 +1,311 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-sunburst',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array | string',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Color',
|
||||
desc: {
|
||||
'zh-CN': '图表颜色',
|
||||
'en-US': 'Chart color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'event',
|
||||
type: 'object',
|
||||
defaultValue: '默认不触发',
|
||||
typeAnchorName: 'Event',
|
||||
desc: {
|
||||
'zh-CN': '图表事件',
|
||||
'en-US': 'Chart Event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'series',
|
||||
type: 'object',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Series',
|
||||
desc: {
|
||||
'zh-CN': '图表series',
|
||||
'en-US': 'Chart series'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> data:[
|
||||
{
|
||||
value: <span class="hljs-number">10</span>,
|
||||
name: <span class="hljs-string">'a1'</span>,
|
||||
children:[
|
||||
name: 'chart',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: <span class="hljs-string">'a2'</span>,
|
||||
value: <span class="hljs-number">2</span>
|
||||
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: <span class="hljs-string">'a3'</span>,
|
||||
value: <span class="hljs-number">4</span>
|
||||
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
|
||||
}`
|
||||
},
|
||||
{
|
||||
value: <span class="hljs-number">20</span>,
|
||||
name: <span class="hljs-string">'b1'</span>,
|
||||
children:[
|
||||
{
|
||||
name: <span class="hljs-string">'b2'</span>,
|
||||
value: <span class="hljs-number">5</span>
|
||||
},
|
||||
{
|
||||
name: <span class="hljs-string">'b3'</span>,
|
||||
value: <span class="hljs-number">4</span>
|
||||
},
|
||||
]
|
||||
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
|
||||
}`
|
||||
}
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="37">说明：图表数据 , <code>value</code>表示为数据值 ， <code>name</code>表示为数据名称</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Series',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>series:{
|
||||
center: [<span class="hljs-string">'50%'</span>, <span class="hljs-string">'50%'</span>],
|
||||
radius: [<span class="hljs-string">'12%'</span>, <span class="hljs-string">'70%'</span>],
|
||||
type: <span class="hljs-string">'sunburst'</span>,
|
||||
sort: undefined,
|
||||
emphasis: {
|
||||
focus: <span class="hljs-string">'ancestor'</span>
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: <span class="hljs-number">4</span>,
|
||||
borderWidth: <span class="hljs-number">2</span>,
|
||||
borderColor: <span class="hljs-string">'#fff'</span>,
|
||||
},
|
||||
label: {
|
||||
rotate: <span class="hljs-number">0</span>,
|
||||
color: <span class="hljs-string">'#191919'</span>,
|
||||
},
|
||||
data: [],
|
||||
levels:[],
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="26">说明：自定义 series，使用方式及属性和 eCharts 一致，请参考 eCharts 配置</p>
|
||||
<div data-v-md-line="28"><p class="ev_expand_introduce">详细参数解释见： https://echarts.apache.org/zh/option.html#series-sunburst.type</p>
|
||||
</div></div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
\` & lt; div& gt;
|
||||
& lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
|
||||
& lt; span style = "margin-left:5px;color:#ffffff" & gt;
|
||||
& lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
|
||||
& lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
|
||||
& lt; span style = "color:gray" & gt; out & lt; /span>
|
||||
& lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
|
||||
& lt; /span>
|
||||
& lt; /div>\`;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span ></code ></pre >
|
||||
</div ></div > <p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div ></div ></div ></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Event',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> event:{
|
||||
series：{
|
||||
click:(parms)=>{
|
||||
...
|
||||
},
|
||||
mousemove:(params)=>{
|
||||
...
|
||||
},
|
||||
...
|
||||
},
|
||||
....
|
||||
}
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="18">说明：自定义设置图表的处理事件,具体用法参考<a href="https://echarts.apache.org/zh/api.html#echartsInstance.on">https://echarts.apache.org/zh/api.html#echartsInstance.on</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,299 +1,313 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-tree',
|
||||
type: 'component',
|
||||
options: [
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'padding',
|
||||
type: 'array',
|
||||
defaultValue: '[50,20,50,20]',
|
||||
typeAnchorName: 'Padding',
|
||||
desc: {
|
||||
'zh-CN': '图表内边距值',
|
||||
'en-US': 'Margin values within the chart'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Type',
|
||||
desc: {
|
||||
'zh-CN': '树图类型',
|
||||
'en-US': 'Tree diagram type'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
|
||||
{
|
||||
name: 'direction',
|
||||
type: 'string',
|
||||
defaultValue: 'left',
|
||||
typeAnchorName: 'Direction',
|
||||
desc: {
|
||||
'zh-CN': '线性树图起点方向',
|
||||
'en-US': 'Starting direction of linear tree graph'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'symbolSize',
|
||||
type: 'number',
|
||||
defaultValue: '10',
|
||||
typeAnchorName: 'SymbolSize',
|
||||
desc: {
|
||||
'zh-CN': '树图图元大小',
|
||||
'en-US': 'Tree diagram element size'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'lineType',
|
||||
type: 'string',
|
||||
defaultValue: 'curve',
|
||||
typeAnchorName: 'LineType',
|
||||
desc: {
|
||||
'zh-CN': '线性树图连线形状',
|
||||
'en-US': 'Linear tree graph connection shape'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'initialTreeDepth',
|
||||
type: 'number',
|
||||
defaultValue: '1',
|
||||
typeAnchorName: 'InitialTreeDepth',
|
||||
desc: {
|
||||
'zh-CN': '树图初始展开层级',
|
||||
'en-US': 'Initial unfolding hierarchy of tree diagram'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>data: [
|
||||
{
|
||||
name: <span class="hljs-string">'节点'</span>,
|
||||
data: [
|
||||
{
|
||||
name: <span class="hljs-string">'flare'</span>,
|
||||
children: [
|
||||
{
|
||||
name: <span class="hljs-string">'data'</span>,
|
||||
children: [
|
||||
name: 'chart',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: <span class="hljs-string">'converters'</span>,
|
||||
children: [
|
||||
{ name: <span class="hljs-string">'Converters'</span>, value: <span class="hljs-number">721</span> },
|
||||
{ name: <span class="hljs-string">'DelimitedTextConverter'</span>, value: <span class="hljs-number">4294</span> },
|
||||
...
|
||||
],
|
||||
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: <span class="hljs-string">'DataUtil'</span>,
|
||||
value: <span class="hljs-number">3322</span>,
|
||||
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
|
||||
}`
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="36">说明：树图的数据, 最外层name为本系列的数据的名称，data为需要渲染的树的数据，树的数据中name:节点的名称,value:节点的数值,children: 子节点。name,value,children 的名称是固定的，不允许做更改。name 为必传,value 和 children 可不传。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Direction',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>'left'</code></p>
|
||||
<p data-v-md-line="3">可选值：<code>'left','right','top','bottom'</code></p>
|
||||
<p data-v-md-line="5">说明：树图的起点方向,仅 type 为<code>LineTreeChart</code>时有效</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'InitialTreeDepth',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>1</code></p>
|
||||
<p data-v-md-line="3">说明：树图的初始展开层级,最小值为 1</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'LineType',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>'curve'</code></p>
|
||||
<p data-v-md-line="3">可选值：<code>'curve','polyline'</code></p>
|
||||
<p data-v-md-line="5">说明：树图的连线的形状,仅 type 为<code>LineTreeChart</code>时有效,<code>'polyline'</code>表示折线，<code>'curve'</code>表示曲线。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'SymbolSize',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>10</code></p>
|
||||
<p data-v-md-line="3">说明：树图的图元的大小</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Type',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">可选值：<code>LineTreeChart，RingTreeChart</code></p>
|
||||
<p data-v-md-line="3">说明：图表类型，共有线形树图和环形树图两套</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Padding',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：设置图表四个方向的 <code>padding</code> 值<br>
|
||||
<code>padding : [top, right, bottom, left]</code><br>
|
||||
top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’<br>
|
||||
left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’<br>
|
||||
right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比<br>
|
||||
bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
<code> <div>
|
||||
<i style="display:inline-block;width:10px;height:10px;background-color:\${item.color};"></i>
|
||||
<span style="margin-left:5px;color:#ffffff">
|
||||
<span style="display:inline-block;width:100px;">\${item.seriesName} User</span>
|
||||
<span style="font-weight:bold"> \${item.value} %</span>
|
||||
<span style="color:gray"> out </span>
|
||||
<span style="color:red"> \${100 - item.value} %</span>
|
||||
</span>
|
||||
</div></code>;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span></code></pre>
|
||||
</div></div><p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div></div></div></td></tr></div>`
|
||||
}
|
||||
]
|
||||
{
|
||||
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
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,365 +1,317 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
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: ''
|
||||
}
|
||||
],
|
||||
|
||||
apis: [
|
||||
{
|
||||
name: 'chart-wordcloud',
|
||||
type: 'component',
|
||||
options: [
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'string',
|
||||
defaultValue: 'cloud-light',
|
||||
typeAnchorName: 'Theme',
|
||||
desc: {
|
||||
'zh-CN': '主题',
|
||||
'en-US': 'Chart theme'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'array | string',
|
||||
defaultValue: '随主题',
|
||||
typeAnchorName: 'Color',
|
||||
desc: {
|
||||
'zh-CN': '图表颜色',
|
||||
'en-US': 'Chart color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
type: 'object',
|
||||
defaultValue: '默认显示',
|
||||
typeAnchorName: 'Tooltip',
|
||||
desc: {
|
||||
'zh-CN': '悬浮提示框内容配置',
|
||||
'en-US': 'Content configuration of floating prompt box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'Data',
|
||||
desc: {
|
||||
'zh-CN': '图表数据',
|
||||
'en-US': 'Chart data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
|
||||
{
|
||||
name: 'gridSize',
|
||||
type: 'number',
|
||||
defaultValue: '16',
|
||||
typeAnchorName: 'GridSize',
|
||||
desc: {
|
||||
'zh-CN': '词云图文本间距',
|
||||
'en-US': 'Word cloud map text spacing'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'sizeRange',
|
||||
type: 'array',
|
||||
defaultValue: '[14, 60]',
|
||||
typeAnchorName: 'SizeRange',
|
||||
desc: {
|
||||
'zh-CN': '字体范围',
|
||||
'en-US': 'Font Range'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
|
||||
{
|
||||
name: 'rotationRange',
|
||||
type: 'array',
|
||||
defaultValue: '[0,0]',
|
||||
typeAnchorName: 'RotationRange',
|
||||
desc: {
|
||||
'zh-CN': '文字旋转范围',
|
||||
'en-US': 'Text rotation range'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'rotationStep',
|
||||
type: 'number',
|
||||
defaultValue: '0',
|
||||
typeAnchorName: 'RotationStep',
|
||||
desc: {
|
||||
'zh-CN': '文字旋转步值',
|
||||
'en-US': 'Text rotation step value'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'shape',
|
||||
type: 'string',
|
||||
defaultValue: 'circle',
|
||||
typeAnchorName: 'Shape',
|
||||
desc: {
|
||||
'zh-CN': '词云图形状',
|
||||
'en-US': 'Word cloud shape'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
type: 'string',
|
||||
defaultValue: '75%',
|
||||
typeAnchorName: 'Width',
|
||||
desc: {
|
||||
'zh-CN': '词云图宽度',
|
||||
'en-US': 'Word cloud width'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
type: 'string',
|
||||
defaultValue: '80%',
|
||||
typeAnchorName: 'Height',
|
||||
desc: {
|
||||
'zh-CN': '词云图高度',
|
||||
'en-US': 'Word cloud height'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'maskImage',
|
||||
type: 'string',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'MaskImage',
|
||||
desc: {
|
||||
'zh-CN': '词云图形状图片配置',
|
||||
'en-US': 'Word cloud shape image configuration'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'textColor',
|
||||
type: 'function',
|
||||
defaultValue: '无',
|
||||
typeAnchorName: 'TextColor',
|
||||
desc: {
|
||||
'zh-CN': '词云图文本颜色',
|
||||
'en-US': 'Word cloud map text color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
events: [
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IChartProps {
|
||||
afterConfig: () => void
|
||||
afterSetOption: () => void
|
||||
afterSetOptionOnce: () => void
|
||||
animation: object
|
||||
axisPointer: object | array
|
||||
backgroundColor: object | string
|
||||
beforeConfig: () => void
|
||||
brush: object | array
|
||||
cancelResizeCheck: boolean
|
||||
changeDelay: number // 默认值 0
|
||||
colorMode: string
|
||||
colors: array
|
||||
data: object | array
|
||||
dataEmpty: boolean
|
||||
dataZoom: object | array
|
||||
events: object
|
||||
extend: object
|
||||
geo: object | array
|
||||
graphic: object | array
|
||||
grid: object | array
|
||||
height: string // 默认值 '400px'
|
||||
initOptions: object
|
||||
judgeWidth: boolean // 默认值 false
|
||||
legend: object | array
|
||||
legendPosition: string
|
||||
legendVisible: boolean // 默认值 true
|
||||
loading: boolean
|
||||
markArea: object
|
||||
markLine: object
|
||||
markPoint: object
|
||||
notSetUnchange: array
|
||||
radar: object
|
||||
resizeDelay: number // 默认值 200
|
||||
resizeable: boolean // 默认值 true
|
||||
series: object | array
|
||||
setOptionOpts: boolean | object // 默认值 true
|
||||
settings: object
|
||||
textStyle: object | array
|
||||
theme: object
|
||||
themeName: object | string
|
||||
timeline: object | array
|
||||
title: object | array
|
||||
toolbox: object | array
|
||||
tooltip: object
|
||||
tooltipFormatter: () => void
|
||||
tooltipVisible: boolean // 默认值 true
|
||||
visualMap: object | array
|
||||
width: string // 默认值 'auto'
|
||||
widthChangeDelay: number // 默认值 300
|
||||
xAxis: object | array
|
||||
yAxis: object | array
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
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 // 词云图文本颜色
|
||||
}`
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Data',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code> data:[
|
||||
{
|
||||
name: <span class="hljs-string">'visualMap'</span>,
|
||||
value: <span class="hljs-number">122199</span>,
|
||||
},
|
||||
{
|
||||
name: <span class="hljs-string">'continuous'</span>,
|
||||
value: <span class="hljs-number">10288</span>,
|
||||
},
|
||||
{
|
||||
name: <span class="hljs-string">'contoller'</span>,
|
||||
value: <span class="hljs-number">620</span>,
|
||||
},
|
||||
...
|
||||
]
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="21">说明：图表数据 ， name 为页面节点名称 ， value 与页面节点大小正相关</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'GridSize',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>16</code></p>
|
||||
<p data-v-md-line="3">说明：网格大小 ， 自定义各文本之间距离</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Height',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>80%</code></p>
|
||||
<p data-v-md-line="3">说明：配置词云图形状高度</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'MaskImage',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">说明：配置词云图的形状图片</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'RotationRange',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>[0,0]</code></p>
|
||||
<p data-v-md-line="3">说明：文字旋转角度范围</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'RotationStep',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>0</code></p>
|
||||
<p data-v-md-line="3">说明：文字旋转步值 ， 未配置 <code>rotationRange</code> 时 ， <code>rotationStep</code> 值恒为 0 ； 配置 <code>rotationRange</code> 时 ， <code>rotationStep</code> 值不得为 0</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Shape',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>circle</code>（圆形）</p>
|
||||
<p data-v-md-line="3">可选值：<code>circle</code>（圆形） , <code>cardioid</code>（心形） , <code>diamond</code>（菱形） , <code>triangle-forward</code>（前三角形） , <code>triangle</code>（三角形） , <code>pentagon</code>（五角形） , <code>star</code>（星形）</p>
|
||||
<p data-v-md-line="5">说明：配置词云图形状</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'SizeRange',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>[14,60]</code></p>
|
||||
<p data-v-md-line="3">说明：字体大小范围</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'TextColor',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">格式：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>textColor: (data) => {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-string">'#191919'</span>;
|
||||
},
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="9">说明：自定义词云图每个文本的颜色 ； 若同时定义了属性<code>color</code> ， 则以<code>textColor</code>为准</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Width',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>75%</code></p>
|
||||
<p data-v-md-line="3">说明：配置词云图形状宽度</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Theme',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：<code>light</code></p>
|
||||
<p data-v-md-line="3">可选值：</p>
|
||||
<p data-v-md-line="5"><code>light</code> ：ICT3.0图表浅色主题<br>
|
||||
<code>dark</code> ：ICT3.0图表深色主题<br>
|
||||
<code>hdesign-light</code> ：H Design1.1图表浅色主题<br>
|
||||
<code>hdesign-dark</code> ：H Design1.1图表深色主题<br>
|
||||
<code>cloud-light</code> ：华为云图表浅色主题<br>
|
||||
<code>bpit-light</code> ：质量&流程IT图表浅色主题<br>
|
||||
<code>bpit-dark</code> ：质量&流程IT图表深色主题</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Color',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<p data-v-md-line="3">如<code>theme='light'</code>时，color 取[ <span style="background:#6D8FF0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6D8FF0’ ，<span style="background:#00A874;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A874’， <span style="background:#BD72F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BD72F0’ ，<span style="background:#54BCCE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#54BCCE’ ，<span style="background:#FDC000;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FDC000’ ，<span style="background:#9185F0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#9185F0’，<span style="background:#00A2B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#00A2B5’ ]<br>
|
||||
如<code>theme='dark'</code>时，color 取[ <span style="background:#1F55B5;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1F55B5’ ，<span style="background:#278661;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#278661’ ，<span style="background:#8A21BC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#8A21BC’ ，<span style="background:#26616B;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#26616B’ ，<span style="background:#B98C1D;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B98C1D’ ，<span style="background:#745EF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#745EF7’，<span style="background:#2A8290;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2A8290’ ]<br>
|
||||
如<code>theme='cloud-light'</code>时，color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='cloud-dark'</code>时，color 取[ color 取[ <span style="background:#1476FF;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#1476FF’ ，<span style="background:#0BB8B2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0BB8B2’ ，<span style="background:#6E51E0;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#6E51E0’ ，<span style="background:#5CB300;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#5CB300’ ，<span style="background:#FFB700;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FFB700’ ，<span style="background:#33BCF2;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#33BCF2’ ，<span style="background:#BA53E6;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#BA53E6’ ，<span style="background:#F24998;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F24998’ ]<br>
|
||||
如<code>theme='hdesign-light'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#87C859;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#87C859’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F69E39;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F69E39’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#E049CE;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E049CE’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCD72E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCD72E’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#ED448A;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#ED448A’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
如<code>theme='hdesign-dark'</code>时，color 取[ color 取[ <span style="background:#2070F3;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2070F3’ ，<span style="background:#62B42E;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#62B42E’ ，<span style="background:#715AFB;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#715AFB’ ，<span style="background:#F4840C;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#F4840C’ ，<span style="background:#2CB8C9;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#2CB8C9’ ，<span style="background:#D41DBC;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#D41DBC’ ，<span style="background:#09AA71;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#09AA71’ ，<span style="background:#FCC800;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#FCC800’，<span style="background:#B62BF7;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#B62BF7’，<span style="background:#E61866;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#E61866’，<span style="background:#0067D1;display:inline-block;width:16px;height:16px;transform:translateY(3px)"></span> ‘#0067D1’]<br>
|
||||
说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 <code>theme</code> 决定默认值。</p>
|
||||
</div></div></div></td></tr></div>`
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
type: 'interface',
|
||||
code: `<div class="tiny-huicharts"><tr class="tiny-grid-body__expanded-row"><td class="tiny-grid-body__expanded-column" colspan="5"><div class="tiny-grid-body__expanded-cell"><div class="v-md-editor-preview main-editor api-table" style="tab-size: 2;"><div class="github-markdown-body"><p data-v-md-line="1">默认值：</p>
|
||||
<div data-v-md-line="3"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip 提示框组件：tooltip.show = <span class="hljs-literal">true</span> 默认显示
|
||||
</code></pre>
|
||||
</div></div><p data-v-md-line="7">格式：</p>
|
||||
<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-d extra-class"><pre class="v-md-hljs-d"><code>tooltip: {
|
||||
show: <span class="hljs-literal">true</span>,
|
||||
formatter: (params, ticket, callback) => {
|
||||
let htmlString = <span class="hljs-string">'';
|
||||
params.map((item, index) => {
|
||||
if (index === 0) htmlString += item.name + '</span><br/><span class="hljs-string">';
|
||||
htmlString +=
|
||||
\` & lt; div& gt;
|
||||
& lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
|
||||
& lt; span style = "margin-left:5px;color:#ffffff" & gt;
|
||||
& lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
|
||||
& lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
|
||||
& lt; span style = "color:gray" & gt; out & lt; /span>
|
||||
& lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
|
||||
& lt; /span>
|
||||
& lt; /div>\`;
|
||||
});
|
||||
return htmlString;
|
||||
}
|
||||
};
|
||||
</span ></code ></pre >
|
||||
</div ></div > <p data-v-md-line="32">说明：通过回调函数的参数，自行制作一个 HTML 片段<br>
|
||||
详细参数解释见： <a target="_blank" href="https://echarts.apache.org/zh/option.html#tooltip.formatter">https://echarts.apache.org/zh/option.html#tooltip.formatter</a></p>
|
||||
</div ></div ></div ></td></tr></div>`
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
'en-US': 'Whether to disable container detection during resize'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart/question#question-base'
|
||||
},
|
||||
{
|
||||
name: 'change-delay',
|
||||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart/question#question-base'
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart'
|
||||
},
|
||||
{
|
||||
name: 'events',
|
||||
|
|
@ -48,19 +48,19 @@ export default {
|
|||
'en-US': 'Event binding'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart-events'
|
||||
},
|
||||
{
|
||||
name: 'extend',
|
||||
typeAnchorName: 'chart#IChartProps',
|
||||
type: 'objcet',
|
||||
type: 'IChartProps',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'echarts 的配置项',
|
||||
'en-US': 'Configuration items of echarts'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart'
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
|
|
@ -71,7 +71,7 @@ export default {
|
|||
'en-US': 'Set the height of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart/attributes-demo#props-demo10'
|
||||
},
|
||||
{
|
||||
name: 'init-options',
|
||||
|
|
@ -82,7 +82,7 @@ export default {
|
|||
'en-US': 'Init Additional Parameters'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart/attributes-demo#props-demo10'
|
||||
},
|
||||
{
|
||||
name: 'judge-width',
|
||||
|
|
@ -93,7 +93,7 @@ export default {
|
|||
'en-US': 'Do you want to process the width issue when generating charts?'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart-events'
|
||||
},
|
||||
{
|
||||
name: 'legend-visible',
|
||||
|
|
@ -104,7 +104,7 @@ export default {
|
|||
'en-US': 'Display legend'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart/attributes-demo#props-demo10'
|
||||
},
|
||||
{
|
||||
name: 'not-set-unchange',
|
||||
|
|
@ -126,7 +126,7 @@ export default {
|
|||
'en-US': 'Delay of the window resize event callback'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart/attributes-demo#props-demo10'
|
||||
},
|
||||
{
|
||||
name: 'resizeable',
|
||||
|
|
@ -137,7 +137,7 @@ export default {
|
|||
'en-US': 'Whether to process the window resize event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart/question#question-base'
|
||||
},
|
||||
{
|
||||
name: 'set-option-opts',
|
||||
|
|
@ -162,7 +162,7 @@ export default {
|
|||
'en-US': 'User-defined theme name. ;User-defined theme object.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart#base'
|
||||
},
|
||||
{
|
||||
name: 'theme-name',
|
||||
|
|
@ -173,7 +173,7 @@ export default {
|
|||
'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart#base'
|
||||
},
|
||||
{
|
||||
name: 'tooltip-visible',
|
||||
|
|
@ -184,7 +184,7 @@ export default {
|
|||
'en-US': 'Display dialog box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart/attributes-demo#props-demo10'
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
|
|
@ -195,7 +195,7 @@ export default {
|
|||
'en-US': 'Set the width of the chart container.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
pcDemo: 'chart/attributes-demo#props-demo10'
|
||||
},
|
||||
{
|
||||
name: 'width-change-delay',
|
||||
|
|
@ -206,198 +206,80 @@ export default {
|
|||
'en-US': 'Container width change delay'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表配置项(无法与settings混用)',
|
||||
'en-US': 'Chart Configuration item (cannot be used together with settings)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'settings',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置项',
|
||||
'en-US': 'Chart Configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'color-mode',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义颜色模式',
|
||||
'en-US': 'Custom color mode'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-line',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标线',
|
||||
'en-US': 'Chart markings'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-area',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标志区域',
|
||||
'en-US': 'Chart symbol area'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'mark-point',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表标点',
|
||||
'en-US': 'Chart punctuation'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表加载状态',
|
||||
'en-US': 'Chart loading status'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'data-empty',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '暂无数据状态',
|
||||
'en-US': 'No data status available at the moment'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'before-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-config',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
|
||||
'en-US':
|
||||
'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'after-set-option-once',
|
||||
type: 'object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
|
||||
'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
|
||||
events: [
|
||||
{
|
||||
name: 'ready',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，每次渲染都会触发一次',
|
||||
'en-US': 'Triggered after the completion of chart rendering, it will be triggered once every rendering'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'ready-once',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图表渲染完成后触发，只会在首次渲染完成后触发',
|
||||
'en-US':
|
||||
'Triggered after the completion of chart rendering, it will only be triggered after the first rendering is completed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
pcDemo: 'chart/question#question-base'
|
||||
}
|
||||
],
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'Options',
|
||||
name: 'IChartProps',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface Options {
|
||||
// 见具体图表组件
|
||||
}`
|
||||
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 '
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,18 @@ export default {
|
|||
name: 'checkbox',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'border',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否显示边框',
|
||||
'en-US': 'Display border'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'border',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'checked',
|
||||
type: 'boolean',
|
||||
|
|
@ -128,6 +140,18 @@ export default {
|
|||
mode: ['pc'],
|
||||
pcDemo: 'shape'
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
type: "'medium' | 'small' | 'mini'",
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'checkbox 的尺寸，仅在 border 为真时有效',
|
||||
'en-US': 'Checkbox size. This parameter is valid only when border is set to true'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'size',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'text',
|
||||
type: 'string',
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export default {
|
|||
events: [
|
||||
{
|
||||
name: 'cancel',
|
||||
type: '() =>void',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '按下取消或点击外部的时触发该事件',
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export default {
|
|||
events: [
|
||||
{
|
||||
name: 'cancel',
|
||||
type: '() =>void',
|
||||
type: '()=>void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '按下取消或点击外部的时触发该事件',
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ export default {
|
|||
{
|
||||
name: 'aspect-ratio',
|
||||
type: 'number',
|
||||
defaultValue: '16 / 9',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '裁剪框的宽高比',
|
||||
'en-US': 'Aspect-to-height ratio of the crop box'
|
||||
'zh-CN': '裁剪框的宽高比;默认为 16 / 9',
|
||||
'en-US': 'Aspect-to-height ratio of the crop box; The default value is 16 / 9'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'aspect-ratio'
|
||||
|
|
@ -19,10 +19,11 @@ export default {
|
|||
{
|
||||
name: 'auto-crop',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '初始化时，是否自动显示裁剪框',
|
||||
'en-US': 'Indicates whether to automatically display the crop box during initialization'
|
||||
'zh-CN': '初始化时，是否自动显示裁剪框;默认为 true',
|
||||
'en-US':
|
||||
'Indicates whether to automatically display the crop box during initialization. The default value is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'auto-crop-area'
|
||||
|
|
@ -30,10 +31,10 @@ export default {
|
|||
{
|
||||
name: 'auto-crop-area',
|
||||
type: 'number',
|
||||
defaultValue: '0.8',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '定义自动裁剪面积大小（百分比）',
|
||||
'en-US': 'Defines the automatic cropping area size (percentage)'
|
||||
'zh-CN': '定义自动裁剪面积大小（百分比）;默认为 0.8',
|
||||
'en-US': 'Defines the automatic cropping area size (percentage). The default value is 0.8'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'auto-crop-area'
|
||||
|
|
@ -41,10 +42,10 @@ export default {
|
|||
{
|
||||
name: 'background',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '是否显示容器的网格背景',
|
||||
'en-US': 'Whether to display the grid background of the container'
|
||||
'zh-CN': '是否显示容器的网格背景;默认为 true',
|
||||
'en-US': 'Whether to display the grid background of the container; The default value is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'no-background'
|
||||
|
|
@ -52,10 +53,10 @@ export default {
|
|||
{
|
||||
name: 'center',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '裁剪框是否在图片正中心,并显示一个 + 号',
|
||||
'en-US': 'Whether the cropping frame is in the center of the image'
|
||||
'zh-CN': '裁剪框是否在图片正中心;默认为 true',
|
||||
'en-US': 'Whether the cropping frame is in the center of the image; The default value is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'aspect-ratio'
|
||||
|
|
@ -63,10 +64,11 @@ export default {
|
|||
{
|
||||
name: 'crop-type',
|
||||
type: 'string',
|
||||
defaultValue: 'base64',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置图片裁剪后返回的类型，可配置为 blob 和 base64',
|
||||
'en-US': 'Type of the image that is returned after cropping. The value can be blob or base64'
|
||||
'zh-CN': '设置图片裁剪后返回的类型，可配置为 blob 和 base64，默认为 base64',
|
||||
'en-US':
|
||||
'Type of the image that is returned after cropping. The value can be blob or base64. The default value is base64'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'get-cropped-canvas'
|
||||
|
|
@ -74,23 +76,23 @@ export default {
|
|||
{
|
||||
name: 'cropvisible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置裁剪弹框是否可见',
|
||||
'en-US': 'Set whether the cropping dialog box is visible'
|
||||
'zh-CN': '设置裁剪弹框是否可见;默认为 false',
|
||||
'en-US': 'Set whether the cropping dialog box is visible. The default value is false'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
},
|
||||
{
|
||||
name: 'drag-mode',
|
||||
type: 'string',
|
||||
defaultValue: 'crop',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
"定义 cropper 的拖拽模式;'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理",
|
||||
"定义 cropper 的拖拽模式;默认为 'crop';'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理",
|
||||
'en-US':
|
||||
"Defines the drag mode of the cropper.'Crop': A new crop box 3 can be generated. 'move': Only image 3 can be moved. 'none': no action is required"
|
||||
"Defines the drag mode of the cropper. The default value is'crop'. 'Crop': A new crop box 3 can be generated. 'move': Only image 3 can be moved. 'none': no action is required"
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'drag-mode'
|
||||
|
|
@ -98,10 +100,10 @@ export default {
|
|||
{
|
||||
name: 'guides',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '是否在裁剪框上方显示虚线',
|
||||
'en-US': 'Whether to display dotted lines above the crop box;'
|
||||
'zh-CN': '是否在裁剪框上方显示虚线;默认为 true',
|
||||
'en-US': 'Whether to display dotted lines above the crop box; The default value is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'no-guides'
|
||||
|
|
@ -109,10 +111,11 @@ export default {
|
|||
{
|
||||
name: 'max-size',
|
||||
type: 'string',
|
||||
defaultValue: '1M',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置待裁剪图片的最大大小，默认为 1M',
|
||||
'en-US': 'Set the maximum size of the image to be cropped'
|
||||
'zh-CN': '设置待裁剪图片的最大大小，默认为 1M ;默认为 1M',
|
||||
'en-US':
|
||||
'Set the maximum size of the image to be cropped. The default value is 1 MB. The default value is 1M'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
|
|
@ -120,10 +123,10 @@ export default {
|
|||
{
|
||||
name: 'min-container-height',
|
||||
type: 'number',
|
||||
defaultValue: '300',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '容器的最小高度',
|
||||
'en-US': 'Minimum height of a container'
|
||||
'zh-CN': '容器的最小高度;默认为 300',
|
||||
'en-US': 'Minimum height of a container; The default value is 300'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
|
|
@ -131,10 +134,10 @@ export default {
|
|||
{
|
||||
name: 'min-container-width',
|
||||
type: 'number',
|
||||
defaultValue: '652',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '容器的最小宽度',
|
||||
'en-US': 'Minimum width of a container'
|
||||
'zh-CN': '容器的最小宽度;默认为 652',
|
||||
'en-US': 'Minimum width of a container; The default value is 652'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
|
|
@ -142,10 +145,10 @@ export default {
|
|||
{
|
||||
name: 'min-crop-box-height',
|
||||
type: 'number',
|
||||
defaultValue: '0',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '裁剪层的最小高度',
|
||||
'en-US': 'Minimum height of the crop layer'
|
||||
'zh-CN': '裁剪层的最小高度;默认为 0',
|
||||
'en-US': 'Minimum height of the crop layer; The default value is 0'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
|
|
@ -153,10 +156,10 @@ export default {
|
|||
{
|
||||
name: 'min-crop-box-width',
|
||||
type: 'number',
|
||||
defaultValue: '0',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '裁剪层的最小宽度',
|
||||
'en-US': 'Minimum width of the cropping layer'
|
||||
'zh-CN': '裁剪层的最小宽度;默认为 0',
|
||||
'en-US': 'Minimum width of the cropping layer; The default value is 0'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
|
|
@ -164,10 +167,11 @@ export default {
|
|||
{
|
||||
name: 'modal',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '是否显示图片上方裁剪框下方的黑色模态',
|
||||
'en-US': 'Whether to display the black mode below the cropping box above the image'
|
||||
'zh-CN': '是否显示图片上方裁剪框下方的黑色模态;默认为 true',
|
||||
'en-US':
|
||||
'Whether to display the black mode below the cropping box above the image; The default value is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'no-modal'
|
||||
|
|
@ -175,21 +179,33 @@ export default {
|
|||
{
|
||||
name: 'movable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '是否允许可以移动后面的图片',
|
||||
'en-US': 'Indicates whether the image can be moved'
|
||||
'zh-CN': '是否允许可以移动后面的图片;默认为 true',
|
||||
'en-US': 'Indicates whether the image can be moved. The default value is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'drag-mode'
|
||||
},
|
||||
{
|
||||
name: 'preview',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置裁剪区域图片是否可预览，默认为 false',
|
||||
'en-US': 'Specifies whether images in the cropping area can be previewed. The default value is false'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'quality',
|
||||
type: 'number',
|
||||
defaultValue: ' 0.92',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置图片裁剪后的压缩比例，值在 0-1 之间',
|
||||
'en-US': 'Set the compression ratio of the cropped image. The value ranges from 0 to 1'
|
||||
'zh-CN': '设置图片裁剪后的压缩比例，值在 0-1 之间，默认为 0.92',
|
||||
'en-US':
|
||||
'Set the compression ratio of the cropped image. The value ranges from 0 to 1. The default value is 0.92'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
|
|
@ -197,10 +213,10 @@ export default {
|
|||
{
|
||||
name: 'rotatable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '是否允许旋转图像;默认为 true',
|
||||
'en-US': 'Indicates whether images can be rotated'
|
||||
'en-US': 'Indicates whether images can be rotated. The default value is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'replace-image'
|
||||
|
|
@ -214,17 +230,17 @@ export default {
|
|||
'en-US': 'Default cropped source image'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
pcDemo: 'no-background'
|
||||
},
|
||||
{
|
||||
name: 'view-mode',
|
||||
type: 'number',
|
||||
defaultValue: '0',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'定义 cropper 的视图模式;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1',
|
||||
'定义 cropper 的视图模式;默认为 0;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1',
|
||||
'en-US':
|
||||
'Defines the view mode of the cropper. 0: no restriction. The value 3 can be moved out of the value 2. 1:3 can only be moved within 2. The 2:2 picture is not completely covered with 1 (i.e., there may be gaps on one side when the picture is zoomed out). 3: 2 The image fills the entire 1'
|
||||
'Defines the view mode of the cropper. The default value is 0. 0: no restriction. The value 3 can be moved out of the value 2. 1:3 can only be moved within 2. The 2:2 picture is not completely covered with 1 (i.e., there may be gaps on one side when the picture is zoomed out). 3: 2 The image fills the entire 1'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'view-mode'
|
||||
|
|
@ -232,10 +248,10 @@ export default {
|
|||
{
|
||||
name: 'wheel-zoom-ratio',
|
||||
type: 'number',
|
||||
defaultValue: '0.1',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用鼠标移动图像时，定义缩放比例',
|
||||
'en-US': 'Define the scaling ratio when moving the image with the mouse'
|
||||
'zh-CN': '用鼠标移动图像时，定义缩放比例;默认为 0.1',
|
||||
'en-US': 'Define the scaling ratio when moving the image with the mouse. The default value is 0.1'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'wheel-zoom-ratio'
|
||||
|
|
@ -243,10 +259,11 @@ export default {
|
|||
{
|
||||
name: 'zoom-on-wheel',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '是否可以通过滚动鼠标滚轮来缩放图像',
|
||||
'en-US': 'Specifies whether you can zoom in or out an image by scrolling the mouse wheel'
|
||||
'zh-CN': '是否可以通过滚动鼠标滚轮来缩放图像;默认为 true',
|
||||
'en-US':
|
||||
'Specifies whether you can zoom in or out an image by scrolling the mouse wheel. The default value is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'zoom-on-wheel'
|
||||
|
|
@ -254,10 +271,10 @@ export default {
|
|||
{
|
||||
name: 'zoomable',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '是否允许放大图像',
|
||||
'en-US': 'Whether to allow image zooming in'
|
||||
'zh-CN': '是否允许放大图像;默认为 true',
|
||||
'en-US': 'Whether to allow image zooming in; The default value is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'replace-image'
|
||||
|
|
|
|||
|
|
@ -446,23 +446,7 @@ export default {
|
|||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
slots: [
|
||||
{
|
||||
name: 'now',
|
||||
type: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件“此刻”位置插槽',
|
||||
'en-US': 'Component "Now" button slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'now',
|
||||
mfDemo: 'now'
|
||||
}
|
||||
],
|
||||
slots: [],
|
||||
format: [
|
||||
{
|
||||
name: 'a',
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ export default {
|
|||
'en-US': 'Achieve the maximum height of the window'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'dialog-width'
|
||||
pcDemo: 'form-in-dialog'
|
||||
},
|
||||
{
|
||||
name: 'modal',
|
||||
|
|
@ -227,7 +227,7 @@ export default {
|
|||
{
|
||||
name: 'visible',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '控制弹出框显示与关闭',
|
||||
'en-US': 'Control pop-up display and closing'
|
||||
|
|
|
|||
|
|
@ -377,21 +377,6 @@ export default {
|
|||
}
|
||||
],
|
||||
methods: [
|
||||
{
|
||||
name: 'getSelection',
|
||||
type: '() => IData[]',
|
||||
typeAnchorName: 'IData',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '获取多选选中数据',
|
||||
'en-US': 'Get multi-select selected data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'set-selection'
|
||||
},
|
||||
{
|
||||
name: 'queryGridData',
|
||||
type: '() => void',
|
||||
|
|
@ -402,21 +387,6 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'nest-grid-multi'
|
||||
},
|
||||
{
|
||||
name: 'setSelection',
|
||||
type: '(data: IData | IData[], checked: boolean) => void',
|
||||
typeAnchorName: 'IData',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置数据的多选选中状态，需要在弹窗初始化后调用，否则调用无效',
|
||||
'en-US': 'Set the multi-select selected state of data'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'set-selection'
|
||||
}
|
||||
],
|
||||
slots: [
|
||||
|
|
@ -464,20 +434,6 @@ export default {
|
|||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'footer-buttons',
|
||||
type: 'Slot',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义弹窗底部按钮',
|
||||
'en-US': 'Custom Pop Up Bottom buttons'
|
||||
},
|
||||
meta: {
|
||||
stable: '3.18.0'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'option',
|
||||
type: 'Slot',
|
||||
|
|
@ -546,7 +502,6 @@ interface IDialogOption {
|
|||
{
|
||||
name: 'IGridOption',
|
||||
type: 'interface',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IGridOption {
|
||||
// 表格列配置
|
||||
|
|
@ -704,16 +659,6 @@ interface IResizeEvent {
|
|||
fullscreen: boolean
|
||||
// 弹窗的元素
|
||||
dialog: HTMLElement
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IData',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IData {
|
||||
// 表格或者tree行数据
|
||||
[prop: string]: any
|
||||
}
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ export default {
|
|||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'footer-slot',
|
||||
pcDemo: 'Show bottom or not',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -169,21 +169,6 @@ export default {
|
|||
pcDemo: 'width',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
type: 'string',
|
||||
defaultValue: "'100vh'",
|
||||
desc: {
|
||||
'zh-CN': '设置抽屉的高度',
|
||||
'en-US': 'Set the height of the drawer'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'placement',
|
||||
mfDemo: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'z-index',
|
||||
type: 'number',
|
||||
|
|
|
|||
|
|
@ -228,22 +228,6 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'visible-arrow'
|
||||
},
|
||||
{
|
||||
name: 'lazy-show-popper',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否懒加载下拉菜单及内部的项，以优化性能，默认初始全加载菜单及内部项。',
|
||||
'en-US':
|
||||
'Indicates whether to lazily load the drop-down menu and internal items to optimize performance. The default value is false. The menu and internal items are loaded initially.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'lazy-show-popper',
|
||||
mfDemo: '',
|
||||
meta: {
|
||||
experimental: '3.18.0'
|
||||
}
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
@ -502,7 +486,6 @@ export default {
|
|||
{
|
||||
name: 'IMenuOption',
|
||||
type: 'interface',
|
||||
depTypes: ['IItemData'],
|
||||
code: `
|
||||
interface IMenuOption {
|
||||
options: IItemData[]
|
||||
|
|
@ -515,7 +498,6 @@ interface IMenuOption {
|
|||
{
|
||||
name: 'IItemClickParam',
|
||||
type: 'interface',
|
||||
depTypes: ['IItemData'],
|
||||
code: `
|
||||
interface IItemClickParam {
|
||||
itemData: IItemData
|
||||
|
|
@ -544,7 +526,7 @@ interface IItemData {
|
|||
name: 'IButtonType',
|
||||
type: 'type',
|
||||
code: `
|
||||
type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
|
||||
type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
|
||||
`
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ export default {
|
|||
type: 'Object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置 EDM 下载功能所需的参数,例如：edm:{download:{token:() =>{}}},token为鉴权token',
|
||||
'zh-CN': '配置 EDM 下载功能所需的参数,例如：edm:{download:{token:()=>{}}},token为鉴权token',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
|
|
@ -262,8 +262,7 @@ export default {
|
|||
'zh-CN': '限制文件大小，单位为 KB；当为 Number 类型时，小于该值停止上传；为数组时[min,max] 设置上传范围',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'file-size',
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -370,7 +369,7 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'配置为 true,启用 EDM 上传文件夹的功能，最多只能上传 5 层;{edm:upload:{isFolder:true,token:() =>{}}}',
|
||||
'配置为 true,启用 EDM 上传文件夹的功能，最多只能上传 5 层;{edm:upload:{isFolder:true,token:()=>{}}}',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
|
|
@ -525,7 +524,7 @@ export default {
|
|||
type: 'Function',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置 EDM 批量打包下载的 token；配置结构为 edm:{download:packageToken:() =>{}},返回一个 Promise',
|
||||
'zh-CN': '配置 EDM 批量打包下载的 token；配置结构为 edm:{download:packageToken:()=>{}},返回一个 Promise',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
|
|
@ -560,27 +559,12 @@ export default {
|
|||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
"配置 EDM 预览功能所需的参数,例如：edm:{preview:{plugin：util.default,previewUrl:./_index.html?appid=应用Id,packageName: 'jslib',token:() =>{}}}",
|
||||
"配置 EDM 预览功能所需的参数,例如：edm:{preview:{plugin：util.default,previewUrl:./_index.html?appid=应用Id,packageName: 'jslib',token:()=>{}}}",
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'prompt-tip',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '设置提示是否为 tip 类型，悬浮图标时显示 tip 提示',
|
||||
'en-US': 'Set whether the prompt is of the tip type. The tip is displayed when the icon is suspended.'
|
||||
},
|
||||
metaData: {
|
||||
new: '3.19.0'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
mfDemo: 'prompt-tip',
|
||||
pcDemo: 'prompt-tip'
|
||||
},
|
||||
{
|
||||
name: 're-upload-tip',
|
||||
type: '(count: number) => string',
|
||||
|
|
@ -734,7 +718,7 @@ export default {
|
|||
type: 'Object',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '配置 EDM 上传功能所需的参数,例如：edm:{upload:{token:() =>{}}}',
|
||||
'zh-CN': '配置 EDM 上传功能所需的参数,例如：edm:{upload:{token:()=>{}}}',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
|
|
|
|||
|
|
@ -1,110 +0,0 @@
|
|||
export default {
|
||||
mode: ['pc', 'mobile-first'],
|
||||
apis: [
|
||||
{
|
||||
name: 'fluent-editor',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'data-type',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '初始化的富文本数据格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'data-switch'
|
||||
},
|
||||
{
|
||||
name: 'data-upgrade',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '富文本数据输出格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'data-switch'
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否为不可编辑状态',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'disabled'
|
||||
},
|
||||
{
|
||||
name: 'image-upload',
|
||||
typeAnchorName: 'IImageUploadOptions',
|
||||
type: 'IImageUploadOptions',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图片上传模块配置项',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'image-upload'
|
||||
},
|
||||
{
|
||||
name: 'modelValue / v-model',
|
||||
type: 'string',
|
||||
defaultValue: "''",
|
||||
desc: {
|
||||
'zh-CN': '绑定值',
|
||||
'en-US': 'Bound Value'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
type: 'object',
|
||||
defaultValue: "",
|
||||
desc: {
|
||||
'zh-CN': '编辑器配置项，参考 Quill 文档：https://quilljs.com/docs/configuration#options',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'options'
|
||||
},
|
||||
{
|
||||
name: 'zIndex',
|
||||
type: 'number',
|
||||
defaultValue: "",
|
||||
desc: {
|
||||
'zh-CN': '编辑器的 z-index',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IImageUploadOptions',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IImageUploadOptions {
|
||||
url: string, // 图片上传地址
|
||||
method: string, // 上传方法
|
||||
name: string, // 图片名称
|
||||
withCredentials: boolean, // 是否需要认证，开启后会在请求里带上 cookie 信息
|
||||
headers: object, // 上传请求头部信息
|
||||
csrf: string, // 请求 csrf 携带信息
|
||||
success: (serverResponse: { file: { downloadUrl: string } }[], next: (imageUrl: string) => void) => void, // 上传成功回调信息
|
||||
fail: (serverError: string) => void // 上传失败回调信息
|
||||
}
|
||||
`
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -44,10 +44,11 @@ export default {
|
|||
{
|
||||
name: 'hide-required-asterisk',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否隐藏必填字段的标签旁边的红色星号',
|
||||
'en-US': 'Whether to hide the red asterisk next to the label of mandatory fields'
|
||||
'zh-CN': '是否隐藏必填字段的标签旁边的红色星号，SMB 主题下默认值为true',
|
||||
'en-US':
|
||||
'Whether to hide the red asterisk next to the label of mandatory fields, The default value for SMB theme is true'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'smb-required',
|
||||
|
|
@ -119,7 +120,7 @@ export default {
|
|||
{
|
||||
name: 'label-width',
|
||||
type: 'string',
|
||||
defaultValue: "'84px'",
|
||||
defaultValue: "'80px'",
|
||||
desc: {
|
||||
'zh-CN': '表单中标签占位宽度',
|
||||
'en-US': 'Label placeholder width in the form'
|
||||
|
|
@ -131,11 +132,11 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'message-type',
|
||||
type: "'inline' | 'block' | 'absolute'",
|
||||
defaultValue: "'block'",
|
||||
type: "'inline' | 'block'",
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'当 validate-type 设置为 text 时，配置文本类型错误类型，可配置行内或者块级，其他值都为 absolute 定位',
|
||||
'当 validate-type 设置为 text 时，配置文本类型错误类型，可配置行内或者块级，不设置则为 absolute 定位',
|
||||
'en-US':
|
||||
'Configure the text type error type, which can be configured at the inline or block level when validate-type is set to text. The default is absolute positioning'
|
||||
},
|
||||
|
|
@ -169,7 +170,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'popper-options',
|
||||
linkTo: 'popover#IPopperOption',
|
||||
typeAnchorName: 'popover#IPopperOption',
|
||||
type: 'Popover.IPopperOption',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -631,14 +632,14 @@ type IFormTrigger = 'change' | 'blur'
|
|||
|
||||
interface IFormRules {
|
||||
required?: boolean // 是否必填
|
||||
message?: string // 校验错误的提示
|
||||
message?: number // 校验错误的提示
|
||||
// 内置的类型校验
|
||||
type?: 'date' | 'dateTime' | 'float' | 'array' | 'string' | 'number' | 'url' | 'time' | 'email' | 'object' | 'boolean' | 'enum'
|
||||
// 校验触发时机， 默认为 ['change', 'blur'] 两种场景都触发，如果仅在主动调用校验方式时触发，可设置为空数组 []。
|
||||
trigger?: IFormTrigger | IFormTrigger[]
|
||||
// 同步检验函数，调用回调传递错误信息。
|
||||
validator?: (
|
||||
rule: IFormInnerRule, // form内部处理后的rule
|
||||
rule: IFormInnerRule, // from内部处理后的rule
|
||||
value: any, // 表单model对应的值，根据表单项prop获取
|
||||
callback: (e: Error) => void
|
||||
data: object, // prop和value构造的对象
|
||||
|
|
@ -678,7 +679,6 @@ interface IFormErrorField {
|
|||
{
|
||||
name: 'IFormValidateMethod',
|
||||
type: 'function',
|
||||
depTypes: ['IFormError'],
|
||||
code: `
|
||||
function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) => void ): Promise<boolean>
|
||||
`
|
||||
|
|
@ -686,7 +686,6 @@ function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) =>
|
|||
{
|
||||
name: 'IFormValidateFieldMethod',
|
||||
type: 'function',
|
||||
depTypes: ['IFormError'],
|
||||
code: `
|
||||
function IFormValidateFieldMethod(
|
||||
prop: string | string[],
|
||||
|
|
|
|||
|
|
@ -1,84 +0,0 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'grid-select',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'grid-op',
|
||||
typeAnchorName: 'IGridOption',
|
||||
type: 'IGridOption',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '下拉表格时，内置表格组件的配置，用法同 Grid 组件。',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'modelValue / v-model',
|
||||
type: 'string | number | Array<string|number>',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '绑定值',
|
||||
'en-US': 'Bind value'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否允许选择多个选项',
|
||||
'en-US': 'Allow multiple options to be selected'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'multiple'
|
||||
},
|
||||
{
|
||||
name: 'text-field',
|
||||
type: 'string',
|
||||
defaultValue: "''",
|
||||
desc: {
|
||||
'zh-CN': '显示值字段',
|
||||
'en-US': 'Show Value Fields'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'value-field',
|
||||
type: 'string',
|
||||
defaultValue: "''",
|
||||
desc: {
|
||||
'zh-CN': '绑定值字段',
|
||||
'en-US': 'Bind Value Field'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IGridOption',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IGridOption {
|
||||
data: Record<string, any>
|
||||
columns: {
|
||||
type: string
|
||||
field: string
|
||||
title: string
|
||||
width: number
|
||||
}[] // 表格列数据，用法同 Grid
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -147,8 +147,17 @@ export default {
|
|||
name: 'custom-column-names',
|
||||
type: 'string[]',
|
||||
defaultValue: "['TinyGridColumn']",
|
||||
meta: {
|
||||
stable: '3.17.0'
|
||||
metaData: {
|
||||
experimental: {
|
||||
version: '3.17.0'
|
||||
}
|
||||
},
|
||||
versionTipOption: {
|
||||
extendTip: {
|
||||
'zh-CN': '该属性于3.17版本新增，封装 grid-column 时需要配置此字段，提供给表格收集配置',
|
||||
'en-US':
|
||||
'This field needs to be configured when encapsulating grid-column and is provided for table collection configuration'
|
||||
}
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '封装 grid-column 时需要配置此字段，提供给表格收集配置',
|
||||
|
|
@ -690,7 +699,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'render-empty',
|
||||
type: '() => string | VNode',
|
||||
type: '()=> string | VNode',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '空数据渲染',
|
||||
|
|
@ -723,22 +732,6 @@ export default {
|
|||
pcDemo: 'grid-size#size-resize-column-width',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'IResizableConfig',
|
||||
typeAnchorName: 'IResizableConfig',
|
||||
type: 'IResizableConfig',
|
||||
defaultValue: '',
|
||||
metaData: {
|
||||
new: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '设置列宽拖拽参数',
|
||||
'en-US': 'Set column width drag parameters'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'grid-size#size-resizable-config',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'row-class-name',
|
||||
typeAnchorName: 'IClassNameArgs',
|
||||
|
|
@ -1049,11 +1042,11 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'tooltip-config',
|
||||
linkTo: 'tooltip#tooltip--props',
|
||||
type: 'Tooltip.Props',
|
||||
type: 'IToolTipConfig',
|
||||
typeAnchorName: 'IToolTipConfig',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'Grid 内置 tooltip 配置项，配置项将透传至 Tooltip，请参考 Tooltip 组件属性说明',
|
||||
'zh-CN': 'Grid 内置 tooltip 配置项，请参考 Tooltip 组件属性说明',
|
||||
'en-US':
|
||||
'Configuration item of the built-in tooltip of the Grid. For details, see the Tooltip Attribute Description.'
|
||||
},
|
||||
|
|
@ -1089,22 +1082,6 @@ export default {
|
|||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'after-refresh-column',
|
||||
type: '()=> void',
|
||||
meta: {
|
||||
stable: '3.18.0'
|
||||
},
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '在新增或者删除列后，列配置是异步更新的，列配置刷新后触发的回调',
|
||||
'en-US':
|
||||
'After adding or deleting a column, the column configuration is updated asynchronously, and the callback is triggered after the column configuration is refreshed.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'grid-dynamically-columns#column-switching-scroll',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'before-page-change',
|
||||
typeAnchorName: 'IBeforePageChangeArgs',
|
||||
|
|
@ -1328,7 +1305,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'fullscreen',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '全屏时或关闭全屏时触发的时间',
|
||||
|
|
@ -1445,7 +1422,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'select-change',
|
||||
type: '(args: object, event: Event)=> void',
|
||||
typeAnchorName: 'ISelectChangeArgs',
|
||||
type: '(args: ISelectChangeArgs, event: Event)=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '只对 type=selection 有效，当手动勾选并且值发生改变时触发的事件',
|
||||
|
|
@ -1484,10 +1462,17 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'toggle-group-change',
|
||||
type: '(row: IRow) => void',
|
||||
typeAnchorName: 'IToggleGroupChangeArgs',
|
||||
type: '(row: IRow)=> void',
|
||||
defaultValue: '',
|
||||
meta: {
|
||||
stable: '3.17.0'
|
||||
metaData: {
|
||||
experimental: '3.17.0'
|
||||
},
|
||||
versionTipOption: {
|
||||
extendTip: {
|
||||
'zh-CN': '该特性于3.17版本新增',
|
||||
'en-US': 'This feature was added in version 3.17'
|
||||
}
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '当分组的展开和收起时会触发该事件',
|
||||
|
|
@ -1541,7 +1526,7 @@ export default {
|
|||
methods: [
|
||||
{
|
||||
name: 'clearActived',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动清除单元格激活状态',
|
||||
|
|
@ -1563,7 +1548,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearAll',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
|
|
@ -1588,7 +1573,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearCurrentColumn',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用于当前列，手动清空当前高亮的状态',
|
||||
|
|
@ -1610,7 +1595,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearCurrentRow',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用于当前行，手动清空当前高亮的状态',
|
||||
|
|
@ -1681,7 +1666,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearRadioRow',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用于单选行，手动清空用户的选择',
|
||||
|
|
@ -1703,7 +1688,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearRowExpand',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动清空展开行状态，数据会恢复成未展开的状态',
|
||||
|
|
@ -1725,7 +1710,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearScroll',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动清除滚动相关信息，还原到初始状态',
|
||||
|
|
@ -1747,7 +1732,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearSelected',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动清除单元格选中状态',
|
||||
|
|
@ -1769,7 +1754,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearSelection',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用于多选行，手动清空用户的选择',
|
||||
|
|
@ -1791,7 +1776,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearSort',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动清空排序条件，数据会恢复成未排序的状态',
|
||||
|
|
@ -1813,7 +1798,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'clearTreeExpand',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动清空树形节点的展开状态，数据会恢复成未展开的状态',
|
||||
|
|
@ -1836,7 +1821,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'closeFilter',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动关闭筛选面板（某些特殊场景可能会用到）',
|
||||
|
|
@ -1858,7 +1843,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'closeMenu',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动关闭快捷菜单（某些特殊场景可能会用到）',
|
||||
|
|
@ -1940,7 +1925,7 @@ export default {
|
|||
{
|
||||
name: 'fullValidate',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '(rows: IRow[], callback: () => void)=> Promise',
|
||||
type: '(rows: IRow[], callback: ()=> void)=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '表格完整校验函数，和 validate 的区别就是会对全量数据的所有规则进行完整校验',
|
||||
|
|
@ -1964,7 +1949,7 @@ export default {
|
|||
{
|
||||
name: 'getActiveRow',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow',
|
||||
type: '()=> IRow',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '获取已激活的行数据',
|
||||
|
|
@ -2102,7 +2087,7 @@ export default {
|
|||
{
|
||||
name: 'getCurrentRow',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow',
|
||||
type: '()=> IRow',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用于当前行，获取当前行的数据',
|
||||
|
|
@ -2149,7 +2134,7 @@ export default {
|
|||
{
|
||||
name: 'getInsertRecords',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow[]',
|
||||
type: '()=> IRow[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '获取新增的数据',
|
||||
|
|
@ -2172,7 +2157,7 @@ export default {
|
|||
{
|
||||
name: 'getRadioRow',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow',
|
||||
type: '()=> IRow',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用于单选行，获取当已选中的数据',
|
||||
|
|
@ -2195,7 +2180,7 @@ export default {
|
|||
{
|
||||
name: 'getRecordset',
|
||||
typeAnchorName: 'IRecordset',
|
||||
type: '() => IRecordset',
|
||||
type: '()=> IRecordset',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '获取表格数据集（获取新增、删除、更改的数据，对于增删改查表格非常方便）',
|
||||
|
|
@ -2219,7 +2204,7 @@ export default {
|
|||
{
|
||||
name: 'getRemoveRecords',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow[]',
|
||||
type: '()=> IRow[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '获取已删除的数据',
|
||||
|
|
@ -2308,28 +2293,13 @@ export default {
|
|||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'getAllSelection',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow[]',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '获取所有翻页中保存的已选中的数据',
|
||||
'en-US': 'This command is used to select multiple lines to obtain the selected data.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'grid-operation-column#operation-column-grid-pager-reserve'
|
||||
},
|
||||
{
|
||||
name: 'getSelectRecords',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow[]',
|
||||
type: '()=> IRow[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用于多选行，获取当前页已选中的数据',
|
||||
'zh-CN': '用于多选行，获取已选中的数据',
|
||||
'en-US': 'This command is used to select multiple lines to obtain the selected data.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
|
|
@ -2349,7 +2319,7 @@ export default {
|
|||
{
|
||||
name: 'getTableColumn',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow[]',
|
||||
type: '()=> IRow[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '获取当前表格的列（完整的全量表头列、处理条件之后的全量表头列、当前渲染中的表头列）',
|
||||
|
|
@ -2373,7 +2343,7 @@ export default {
|
|||
{
|
||||
name: 'getTableData',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow[]',
|
||||
type: '()=> IRow[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
|
|
@ -2399,7 +2369,7 @@ export default {
|
|||
{
|
||||
name: 'getUpdateRecords',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow[]',
|
||||
type: '()=> IRow[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '获取已修改的数据',
|
||||
|
|
@ -2421,7 +2391,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'handleFetch',
|
||||
type: '() => Promise',
|
||||
type: '()=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '触发表格的 fetch-data ',
|
||||
|
|
@ -2656,7 +2626,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'recalculate',
|
||||
type: '() => Promise',
|
||||
type: '()=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '重新计算表格（对于某些特殊场景可能会用到，比如隐藏的表格、更新列宽...等）',
|
||||
|
|
@ -2679,7 +2649,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'refreshColumn',
|
||||
type: '() => Promise',
|
||||
type: '()=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '刷新列配置（对于显示/隐藏列场景下可能会用到）',
|
||||
|
|
@ -2702,7 +2672,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'refreshData',
|
||||
type: '() => Promise',
|
||||
type: '()=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
|
|
@ -2776,7 +2746,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'removeSelecteds',
|
||||
type: '() => Promise',
|
||||
type: '()=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '删除已选中的所有行数据',
|
||||
|
|
@ -2798,7 +2768,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'resetAll',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动重置列的所有操作，还原到初始状态（如果已关联工具栏，则会同步更新）',
|
||||
|
|
@ -2821,7 +2791,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'resetCustoms',
|
||||
type: '() => Promise',
|
||||
type: '()=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动重置列的显示/隐藏操作，还原到初始状态（如果已关联工具栏，则会同步更新）',
|
||||
|
|
@ -2844,7 +2814,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'resetResizable',
|
||||
type: '() => Promise',
|
||||
type: '()=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动重置列宽拖动的操作，还原到初始状态（如果已关联工具栏，则会同步更新）',
|
||||
|
|
@ -3232,7 +3202,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'toggleAllSelection',
|
||||
type: '() => Promise',
|
||||
type: '()=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用于多选行，切换所有行的选中状态',
|
||||
|
|
@ -3324,7 +3294,7 @@ export default {
|
|||
{
|
||||
name: 'validate',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '(rows: IRow | IRow[], callback: () => void)=> Promise',
|
||||
type: '(rows: IRow | IRow[], callback: ()=> void)=> Promise',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
|
|
@ -3438,21 +3408,9 @@ export default {
|
|||
mode: ['pc'],
|
||||
pcDemo: 'grid-editor#editor-custom-editor-select'
|
||||
},
|
||||
{
|
||||
name: 'field',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置表格列的单元格显示字段',
|
||||
'en-US': 'Set the cell display field for table columns'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'grid#base-basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'filter',
|
||||
type: 'boolean | IFilterConfig',
|
||||
typeAnchorName: 'IFilterConfig',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '设置表格列的筛选配置信息。默认值为 false 不配置筛选信息',
|
||||
|
|
@ -3852,7 +3810,7 @@ export default {
|
|||
props: [
|
||||
{
|
||||
name: 'before-close-full-screen',
|
||||
type: '() => boolean',
|
||||
type: '()=> boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '关闭全屏前的拦截方法，返回 false 则阻止关闭全屏，返回 true 则不阻止',
|
||||
|
|
@ -3864,7 +3822,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'before-open-full-screen',
|
||||
type: '() => boolean',
|
||||
type: '()=> boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '全屏前的拦截方法，返回 false 则阻止全屏，返回 true 则不阻止',
|
||||
|
|
@ -3984,7 +3942,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'reset-setting',
|
||||
type: '() => void',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '点击个性化面板的重置按钮触发该事件',
|
||||
|
|
@ -4039,14 +3997,13 @@ export default {
|
|||
code: `
|
||||
interface IRow {
|
||||
// 表格行数据
|
||||
[field: string]: any
|
||||
[filed: string]: any
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IColumnConfig',
|
||||
type: 'interface',
|
||||
depTypes: ['IValidRules'],
|
||||
code: `
|
||||
interface IColumnConfig {
|
||||
type: 'index' | 'radio' | 'checkbox'
|
||||
|
|
@ -4085,7 +4042,7 @@ interface IPagerConfig {
|
|||
pageSize: number
|
||||
pageSizes: number[]
|
||||
total: number
|
||||
// 分页组件布局默认值：'total, prev, pager, next, jumper'
|
||||
// 分页组件布局默认值：'total, prev, pager, next, jumper, sizes'
|
||||
layout: string
|
||||
}
|
||||
}
|
||||
|
|
@ -4096,7 +4053,7 @@ interface IPagerConfig {
|
|||
type: 'type',
|
||||
code: `
|
||||
interface IDataHandler {
|
||||
api: () => Promise
|
||||
api: ()=> Promise
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
@ -4142,7 +4099,7 @@ interface IToolTipConfig {
|
|||
type?: 'normal' | 'warning' | 'error' | 'info' | 'success'
|
||||
effect?: 'dark' | 'light'
|
||||
// 自定义提示内容
|
||||
contentMethod?: () => string | VNode
|
||||
contentMethod?: ()=> string | VNode
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
@ -4164,7 +4121,7 @@ interface IContextMenuConfig {
|
|||
footer?: {
|
||||
options: IMenuOptions
|
||||
}
|
||||
visibleMethod?: () => boolean
|
||||
visibleMethod?: ()=> boolean
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
@ -4173,7 +4130,7 @@ interface IContextMenuConfig {
|
|||
type: 'type',
|
||||
code: `
|
||||
interface IValidRules {
|
||||
[field:string]: {
|
||||
[filed:string]: {
|
||||
type?: string
|
||||
required?: boolean
|
||||
validator?: () => boolean
|
||||
|
|
@ -4273,7 +4230,7 @@ interface IRadioConfig {
|
|||
// 默认选中指定行（只会在初始化时被触发一次，需要有 row-id）
|
||||
checkRowKey?: string
|
||||
// 是否允许选中的方法，该方法的返回值用来决定这一行的 Radio 是否可以选中
|
||||
checkMethod?: () => boolean
|
||||
checkMethod?: ()=> boolean
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
@ -4289,7 +4246,7 @@ interface ISelectConfig {
|
|||
// 默认勾选开指定行（只会在初始化时被触发一次，需要有 row-id）
|
||||
checkRowKeys?: string[]
|
||||
// 是否允许选中的方法，该方法的返回值用来决定这一行的 checkbox 是否可以勾选
|
||||
checkMethod?: () => boolean
|
||||
checkMethod?: ()=> boolean
|
||||
// 默认勾选所有（只会在初始化时被触发一次）}
|
||||
checkAll?: boolean
|
||||
// 是否显示全选按钮（如果 checkStrictly=true 则默认为 false）
|
||||
|
|
@ -4376,7 +4333,7 @@ interface IScrollLoadConfig {
|
|||
type: 'type',
|
||||
code: `
|
||||
interface IEventsConfig {
|
||||
[field: string]: () => void
|
||||
[field: string]: ()=> void
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
@ -4392,7 +4349,7 @@ interface IDropConfig {
|
|||
// 开启列拖拽
|
||||
column: boolean
|
||||
// 拖拽前函数，返回 false 取消拖动
|
||||
onBeforeMove?: () => boolean
|
||||
onBeforeMove?: ()=> boolean
|
||||
// 拖拽触发源选择器一般是class类名
|
||||
trigger?: string
|
||||
// 根据行的类名来控制是否可以拖动
|
||||
|
|
@ -4415,8 +4372,6 @@ interface IEditConfig {
|
|||
showStatus?: boolean
|
||||
// 自定义编辑规则，返回true可以编辑返回false则禁止编辑
|
||||
activeMethod?: ({row: IRow, column: IColumnConfig})=> boolean
|
||||
// （3.19新增）当mode为'row'时，行编辑激活状态下默认会忽略activeMethod，配置为true使其生效
|
||||
activeStrictly?: boolean
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
@ -4440,7 +4395,7 @@ interface IPageChangeArgs {
|
|||
$grid: Component
|
||||
// 当前页码
|
||||
currentPage: number
|
||||
//当前分页组件布局信息 'total, prev, pager, next, jumper'
|
||||
//当前分页组件布局信息 'total, prev, pager, next, jumper, sizes'
|
||||
layout: string
|
||||
// 当前每页显示条数
|
||||
pageSize: number
|
||||
|
|
@ -4465,9 +4420,9 @@ interface IBeforePageChangeArgs {
|
|||
//当前的页大小
|
||||
currentPageSize: number
|
||||
//生效回调
|
||||
callback: () => void
|
||||
callback: ()=> void
|
||||
//失效回调
|
||||
rollback: () => void
|
||||
rollback: ()=> void
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
@ -4491,7 +4446,6 @@ interface IToolbarButtonClickArgs {
|
|||
{
|
||||
name: 'ICellClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ICellClickArgs {
|
||||
// 当前行
|
||||
|
|
@ -4518,7 +4472,6 @@ interface ICellContextMenuArgs {
|
|||
{
|
||||
name: 'ICellArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ICellArgs {
|
||||
//当前行
|
||||
|
|
@ -4545,7 +4498,6 @@ interface ICurrentChangeArgs {
|
|||
{
|
||||
name: 'IEditActivedArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IEditActivedArgs {
|
||||
// 当前行
|
||||
|
|
@ -4558,7 +4510,6 @@ interface IEditActivedArgs {
|
|||
{
|
||||
name: 'IEditClosedArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IEditClosedArgs {
|
||||
// 当前行
|
||||
|
|
@ -4571,7 +4522,6 @@ interface IEditClosedArgs {
|
|||
{
|
||||
name: 'IEditDisabledArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IEditDisabledArgs {
|
||||
//当前行
|
||||
|
|
@ -4596,7 +4546,6 @@ interface IFilterChangeArgs {
|
|||
{
|
||||
name: 'IFooterCellClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IFooterCellClickArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4614,7 +4563,6 @@ interface IFooterCellClickArgs {
|
|||
{
|
||||
name: 'IContextMenuArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IContextMenuArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4636,7 +4584,6 @@ interface IContextMenuArgs {
|
|||
{
|
||||
name: 'IFooterCellDblClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IFooterCellDblClickArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4654,7 +4601,6 @@ interface IFooterCellDblClickArgs {
|
|||
{
|
||||
name: 'IHeaderCellClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IHeaderCellClickArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4676,7 +4622,6 @@ interface IHeaderCellClickArgs {
|
|||
{
|
||||
name: 'IHeaderCellDblClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IHeaderCellDblClickArgs {
|
||||
// 列数据
|
||||
|
|
@ -4693,7 +4638,6 @@ interface IHeaderCellDblClickArgs {
|
|||
{
|
||||
name: 'IResizableChangeArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IResizableChangeArgs {
|
||||
// table组件的vue 实例
|
||||
|
|
@ -4704,16 +4648,6 @@ interface IResizableChangeArgs {
|
|||
columnIndex: number
|
||||
// 是否固定列
|
||||
fixed: boolean
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IResizableConfig',
|
||||
type: 'type',
|
||||
code: `
|
||||
interface IResizableConfig {
|
||||
// 拖拽宽度限制函数，field: 当前拖拽的列名，width: 当前拖拽的宽度
|
||||
limit: ({ field: string, width: number }) => number
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
@ -4740,7 +4674,6 @@ interface IScrollArgs {
|
|||
{
|
||||
name: 'ISelectAllArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ISelectAllArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4800,7 +4733,6 @@ interface IToggleTreeChangeArgs {
|
|||
{
|
||||
name: 'IValidErrorArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IValidErrorArgs {
|
||||
// 校验的单元格信息对象
|
||||
|
|
@ -4817,7 +4749,6 @@ interface IValidErrorArgs {
|
|||
{
|
||||
name: 'ISortChangeArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ISortChangeArgs {
|
||||
// 表格实例对象信息
|
||||
|
|
@ -4836,7 +4767,6 @@ interface ISortChangeArgs {
|
|||
{
|
||||
name: 'IClassNameArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IClassNameArgs {
|
||||
seq: number
|
||||
|
|
@ -4852,7 +4782,6 @@ interface IClassNameArgs {
|
|||
{
|
||||
name: 'IIndexMethodArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IIndexMethodArgs {
|
||||
row: IRow
|
||||
|
|
@ -4865,7 +4794,6 @@ interface IIndexMethodArgs {
|
|||
{
|
||||
name: 'IFormatConfig',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IFormatConfig {
|
||||
// 列数据源
|
||||
|
|
@ -4917,7 +4845,6 @@ interface ISettingConfigs {
|
|||
{
|
||||
name: 'ISpanMethodArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ISpanMethodArgs {
|
||||
// 行标
|
||||
|
|
@ -4933,7 +4860,6 @@ interface ISpanMethodArgs {
|
|||
},
|
||||
{
|
||||
name: 'IExportCsvOptions',
|
||||
depTypes: ['IRow'],
|
||||
type: 'type',
|
||||
code: `
|
||||
interface IExportCsvOptions {
|
||||
|
|
@ -4953,7 +4879,7 @@ interface IEditorConfig {
|
|||
component: 'input' | 'select' | Component
|
||||
// 传递给组件的事件集合
|
||||
events?: {
|
||||
[event]: () => void
|
||||
[event]: ()=> void
|
||||
}
|
||||
// 传递给编辑器组件的属性集合
|
||||
attrs?: {
|
||||
|
|
@ -4983,7 +4909,19 @@ interface IFilterConfig {
|
|||
label: string
|
||||
// 设置枚举数据的实际值属性字段， 默认'value'
|
||||
value: string
|
||||
}[] | () => Promise
|
||||
}[] | ()=> Promise
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IOPConfig',
|
||||
type: 'type',
|
||||
code: `
|
||||
interface IOPConfig {
|
||||
editConfig?: IEditConfig
|
||||
pagerConfig?: IPagerConfig
|
||||
columns: IColumnConfig[]
|
||||
data: IRow[]
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ interface IDomData {
|
|||
//销毁的回调函数
|
||||
destroy: () => void
|
||||
// 完成的回调函数
|
||||
complete: () => void
|
||||
completey: () => void
|
||||
|
||||
// 需要设置的按钮组
|
||||
button: {
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -222,21 +222,6 @@ export default {
|
|||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'count-slot',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'appendToBody',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '预览弹框是否显示在当前节点下面',
|
||||
'en-US': 'Indicates whether the preview dialog box is displayed under the current node.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'preview',
|
||||
mfDemo: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -396,21 +396,6 @@ export default {
|
|||
mobileDemo: 'counter',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'show-tooltip',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
meta: {
|
||||
stable: '3.18.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '只读状态下，文本超出是否悬浮提示',
|
||||
'en-US': 'In the read-only state, whether the text exceeds the floating prompt'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'size',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
type: "'medium' | 'small' | 'mini'",
|
||||
|
|
@ -557,18 +542,6 @@ export default {
|
|||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'display-only-popup-more',
|
||||
mfDemo: 'display-only-popup-more'
|
||||
},
|
||||
{
|
||||
name: 'input-box-type',
|
||||
type: 'string',
|
||||
defaultValue: 'normal',
|
||||
desc: {
|
||||
'zh-CN': '设置边框模式',
|
||||
'en-US': 'Setting input box border type'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'input-box-type',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default {
|
|||
props: [
|
||||
{
|
||||
name: 'data',
|
||||
type: 'array',
|
||||
type: 'Array',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置收藏夹菜单的数据',
|
||||
|
|
@ -19,7 +19,7 @@ export default {
|
|||
{
|
||||
name: 'default-expand-all',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置打开菜单弹窗时默认是否展开所有节点，默认为 true',
|
||||
'en-US':
|
||||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
{
|
||||
name: 'ellipsis',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '菜单内容超长时省略显示，默认为 true',
|
||||
'en-US': 'Omitted if the menu content is too long. The default value is true'
|
||||
|
|
@ -41,7 +41,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'get-menu-data-sync',
|
||||
type: 'function',
|
||||
type: 'Function',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '自定义菜单数据服务，直接返回数据',
|
||||
|
|
@ -61,62 +61,6 @@ export default {
|
|||
mode: ['pc'],
|
||||
pcDemo: 'custom-icon'
|
||||
},
|
||||
{
|
||||
name: 'expand-icon',
|
||||
type: 'Component',
|
||||
defaultValue: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '指示展开的图标',
|
||||
'en-US': 'Indicates the expanded icon'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-resource'
|
||||
},
|
||||
{
|
||||
name: 'expand-icon-color',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '指示展开的图标色',
|
||||
'en-US': 'Indicates the expanded icon color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-resource'
|
||||
},
|
||||
{
|
||||
name: 'shrink-icon',
|
||||
type: 'Component',
|
||||
defaultValue: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '指示收缩的图标',
|
||||
'en-US': 'Icon indicating shrink'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-resource'
|
||||
},
|
||||
{
|
||||
name: 'shrink-icon-color',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '指示收缩的图标色',
|
||||
'en-US': 'Icon indicating shrink color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-resource'
|
||||
},
|
||||
{
|
||||
name: 'keep-selected-nodes',
|
||||
type: 'boolean',
|
||||
|
|
@ -165,10 +109,10 @@ export default {
|
|||
{
|
||||
name: 'wrap',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '菜单内容超长时换行显示，默认为 true',
|
||||
'en-US': 'The menu content is displayed in a new line when it is too long. The default value is true'
|
||||
'zh-CN': '菜单内容超长时换行显示，默认为 false',
|
||||
'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-resource'
|
||||
|
|
|
|||
|
|
@ -72,21 +72,7 @@ export default {
|
|||
pcDemo: 'basic-usage'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'click',
|
||||
type: '(ev: MouseEvent) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '点击事件',
|
||||
'en-US': 'click event'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,233 +0,0 @@
|
|||
export default {
|
||||
mode: ['mobile-first'],
|
||||
apis: [
|
||||
{
|
||||
name: 'LoadList',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'direction',
|
||||
type: `'up' | 'down'`,
|
||||
defaultValue: "'down'",
|
||||
desc: {
|
||||
'zh-CN': '滚动触发加载的方向，可选值为 `up`，默认值 `down`',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'offset',
|
||||
type: `number | string`,
|
||||
defaultValue: '300',
|
||||
desc: {
|
||||
'zh-CN': '滚动条与底部距离小于 offset 时触发 load 事件，默认值 `300`',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: `boolean`,
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否禁用滚动加载，默认值 false',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'disabled'
|
||||
},
|
||||
{
|
||||
name: 'scroller',
|
||||
type: 'HTMLElement',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '指定需要监听滚动事件的节点，默认为最近的父级滚动节点',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'immediate-check',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否在初始化时立即执行滚动位置检查，默认值 `true`',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'error',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否加载失败，加载失败后点击错误提示可以重新触发 `load` 事件，默认值 `false`',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'error-text'
|
||||
},
|
||||
{
|
||||
name: 'error-text',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '加载失败的提示文案',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'error-text'
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否处于加载状态，加载过程中不触发 `load` 事件，默认值 `false`',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'loading-text',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '加载过程中的提示文案',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'finished',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否已加载完成，加载完成后不再触发 `load` 事件，默认值 `false`',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'finished-text',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '加载完成后的提示文案',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'delay',
|
||||
type: `number | string`,
|
||||
defaultValue: '100',
|
||||
desc: {
|
||||
'zh-CN': '触发 `load` 事件时的节流延时，默认值 `100`',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
name: 'load',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '当列表底部和滚动容器边界之间的距离小于值 `offset` 时，列表组件会触发 `load` 事件',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'update:error',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '加载失败后点击错误提示可以重新触发 `load` 事件，组件会抛出此事件',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'update:loading',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '当列表底部和滚动容器边界之间的距离小于值 `offset` 时，列表组件会触发 `load` 事件并抛出此事件',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'basic-usage'
|
||||
}
|
||||
],
|
||||
methods: [
|
||||
{
|
||||
name: 'check',
|
||||
type: '()=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '手动触发列表滚动位置检查',
|
||||
'en-US': 'Is fixed top'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'disabled'
|
||||
}
|
||||
],
|
||||
slots: [
|
||||
{
|
||||
name: 'default',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '默认插槽，用于定制渲染列表区域',
|
||||
'en-US': 'Is show right arrow'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'slots'
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '加载中插槽，用于定制加载中提示区域',
|
||||
'en-US': 'Is show right arrow'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'slots'
|
||||
},
|
||||
{
|
||||
name: 'finished',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '已加载完成插槽，用于定制加载完成提示区域',
|
||||
'en-US': 'Is show right arrow'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'slots'
|
||||
},
|
||||
{
|
||||
name: 'error',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '加载失败插槽，用于定制加载失败提示区域',
|
||||
'en-US': 'Is show right arrow'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'slots'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,381 +0,0 @@
|
|||
{
|
||||
"mode": "mf",
|
||||
"attrs": [
|
||||
{
|
||||
"id": "cfg-direction",
|
||||
"name": "direction",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "String"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "滚动触发加载的方向，可选值为 `up`，默认值 `down`",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "cfg-offset",
|
||||
"name": "offset",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "Number / String"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "滚动条与底部距离小于 offset 时触发 load 事件，默认值 `300`",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "cfg-disabled",
|
||||
"name": "disabled",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "Boolean"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "是否禁用滚动加载，默认值 false",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/disabled"
|
||||
},
|
||||
{
|
||||
"id": "cfg-scroller",
|
||||
"name": "scroller",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "Object"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "指定需要监听滚动事件的节点，默认为最近的父级滚动节点",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "cfg-immediate-check",
|
||||
"name": "immediate-check",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "Boolean"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "是否在初始化时立即执行滚动位置检查，默认值 `true`",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "cfg-error",
|
||||
"name": "error",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "Boolean"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "是否加载失败，加载失败后点击错误提示可以重新触发 `load` 事件，默认值 `false`",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/error-text"
|
||||
},
|
||||
{
|
||||
"id": "cfg-error-text",
|
||||
"name": "error-text",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "String"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "加载失败的提示文案",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/error-text"
|
||||
},
|
||||
{
|
||||
"id": "cfg-loading",
|
||||
"name": "loading",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "Boolean"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "是否处于加载状态，加载过程中不触发 `load` 事件，默认值 `false`",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "cfg-loading-text",
|
||||
"name": "loading-text",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "String"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "加载过程中的提示文案",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "cfg-finished",
|
||||
"name": "finished",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "Boolean"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "是否已加载完成，加载完成后不再触发 `load` 事件，默认值 `false`",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "cfg-finished-text",
|
||||
"name": "finished-text",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "String"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "加载完成后的提示文案",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "cfg-delay",
|
||||
"name": "delay",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "cfg",
|
||||
"type": {
|
||||
"aui3": "Number / String"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "触发 `load` 事件时的节流延时，默认值 `100`",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/delay"
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{
|
||||
"id": "slot-default",
|
||||
"name": "default",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "slot",
|
||||
"type": {},
|
||||
"desc": [
|
||||
{
|
||||
"content": "默认插槽，用于定制渲染列表区域",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/slots"
|
||||
},
|
||||
{
|
||||
"id": "slot-loading",
|
||||
"name": "loading",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "slot",
|
||||
"type": {},
|
||||
"desc": [
|
||||
{
|
||||
"content": "加载中插槽，用于定制加载中提示区域",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/slots"
|
||||
},
|
||||
{
|
||||
"id": "slot-finished",
|
||||
"name": "finished",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "slot",
|
||||
"type": {},
|
||||
"desc": [
|
||||
{
|
||||
"content": "已加载完成插槽，用于定制加载完成提示区域",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/slots"
|
||||
},
|
||||
{
|
||||
"id": "slot-error",
|
||||
"name": "error",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "slot",
|
||||
"type": {},
|
||||
"desc": [
|
||||
{
|
||||
"content": "加载失败插槽，用于定制加载失败提示区域",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/slots"
|
||||
}
|
||||
],
|
||||
"methods": [
|
||||
{
|
||||
"id": "method-check",
|
||||
"name": "check()",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "method",
|
||||
"type": {},
|
||||
"desc": [
|
||||
{
|
||||
"content": "手动触发列表滚动位置检查",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/disabled"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"id": "event-load",
|
||||
"name": "load",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "event",
|
||||
"type": {
|
||||
"aui3": "Function()"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "当列表底部和滚动容器边界之间的距离小于值 `offset` 时，列表组件会触发 `load` 事件",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "event-update:error",
|
||||
"name": "update:error",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "event",
|
||||
"type": {
|
||||
"aui3": "Function()"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "加载失败后点击错误提示可以重新触发 `load` 事件，组件会抛出此事件",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
},
|
||||
{
|
||||
"id": "event-update:loading",
|
||||
"name": "update:loading",
|
||||
"version": "5.2",
|
||||
"owner": [
|
||||
"aui3"
|
||||
],
|
||||
"tagname": "event",
|
||||
"type": {
|
||||
"aui3": "Function()"
|
||||
},
|
||||
"desc": [
|
||||
{
|
||||
"content": "当列表底部和滚动容器边界之间的距离小于值 `offset` 时，列表组件会触发 `load` 事件并抛出此事件",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"sample": "#/webnova/zh-CN/component/load-list/basic-usage"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
{
|
||||
name: 'expandNode',
|
||||
typeAnchorName: 'IMindExpandNode',
|
||||
type: 'IMindExpandNode',
|
||||
type: 'IMindnExpandNode',
|
||||
desc: {
|
||||
'zh-CN': '展开节点时会触发该事件',
|
||||
'en-US': 'This event will be triggered when expanding a node'
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'cancel-btn-props',
|
||||
linkTo: 'button#API',
|
||||
typeAnchorName: 'button#API',
|
||||
type: 'Button.props',
|
||||
defaultValue: '{}',
|
||||
desc: {
|
||||
|
|
@ -27,7 +27,7 @@ export default {
|
|||
'Customize the props of the cancel button. The optional values are consistent with the Button component'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'modal-footer'
|
||||
pcDemo: 'footer-btn-props'
|
||||
},
|
||||
{
|
||||
name: 'cancel-content',
|
||||
|
|
@ -38,12 +38,12 @@ export default {
|
|||
'en-US': 'Customize cancel button content'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'modal-footer',
|
||||
pcDemo: 'footer-btn-content',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'confirm-btn-props',
|
||||
linkTo: 'button#API',
|
||||
typeAnchorName: 'button#API',
|
||||
type: 'Button.props',
|
||||
defaultValue: '{}',
|
||||
desc: {
|
||||
|
|
@ -52,7 +52,7 @@ export default {
|
|||
'Customize the confirmation button props, the optional values are consistent with the Button component'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'modal-footer'
|
||||
pcDemo: 'footer-btn-props'
|
||||
},
|
||||
{
|
||||
name: 'confirm-content',
|
||||
|
|
@ -63,7 +63,7 @@ export default {
|
|||
'en-US': 'Customize confirmation button content'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'modal-footer',
|
||||
pcDemo: 'footer-btn-content',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -97,7 +97,7 @@ export default {
|
|||
'en-US': "Delay for automatic shutdown, only valid when type is 'message'"
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'message-close',
|
||||
pcDemo: 'duration',
|
||||
mobileDemo: 'duration',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -110,7 +110,7 @@ export default {
|
|||
'en-US': 'Whether to allow pressing the Esc key to close a window'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-other',
|
||||
pcDemo: 'esc-closable',
|
||||
mobileDemo: 'mask-closable',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -123,7 +123,7 @@ export default {
|
|||
'en-US': 'Control bottom dragable'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'modal-footer'
|
||||
pcDemo: 'footer-slot'
|
||||
},
|
||||
{
|
||||
name: 'fullscreen',
|
||||
|
|
@ -134,7 +134,7 @@ export default {
|
|||
'en-US': 'Whether to maximize the display'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-size',
|
||||
pcDemo: 'fullscreen',
|
||||
mobileDemo: 'fullscreen',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -147,7 +147,7 @@ export default {
|
|||
'en-US': 'window height'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-size',
|
||||
pcDemo: 'resize',
|
||||
mobileDemo: '',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -161,7 +161,7 @@ export default {
|
|||
"If you don't want the window to be clicked repeatedly, you can set a unique id to prevent repeated prompts. This is only valid when type is 'message'"
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'message-id',
|
||||
pcDemo: 'id',
|
||||
mobileDemo: 'id',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -174,7 +174,7 @@ export default {
|
|||
'en-US': 'Whether to reset the form data when closing the pop-up window'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-other',
|
||||
pcDemo: 'is-form-reset',
|
||||
mobileDemo: 'is-form-reset',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -187,7 +187,7 @@ export default {
|
|||
'en-US': 'Whether to lock the scroll bar and not allow the page to scroll'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-lock',
|
||||
pcDemo: 'lock-scroll',
|
||||
mobileDemo: 'lock-scroll',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -200,7 +200,7 @@ export default {
|
|||
'en-US': 'Whether to lock the page and not allow any operations outside the window'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-lock',
|
||||
pcDemo: 'lock-view',
|
||||
mobileDemo: 'lock-view',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -213,7 +213,7 @@ export default {
|
|||
'en-US': 'Whether to display the mask layer'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-mask',
|
||||
pcDemo: 'lock-view1',
|
||||
mobileDemo: 'mask-closable',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -226,7 +226,7 @@ export default {
|
|||
'en-US': 'Whether to allow clicking on the mask layer to close the window'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-mask',
|
||||
pcDemo: 'mask-closable',
|
||||
mobileDemo: 'mask-closable',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -239,7 +239,7 @@ export default {
|
|||
'en-US': 'Window contents'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'basic-usage',
|
||||
pcDemo: 'message',
|
||||
mobileDemo: 'message',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -263,7 +263,7 @@ export default {
|
|||
'en-US': 'Minimum height of window'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-resize',
|
||||
pcDemo: 'min-height',
|
||||
mobileDemo: 'min-height',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -276,7 +276,7 @@ export default {
|
|||
'en-US': 'The minimum width of the window'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-resize',
|
||||
pcDemo: 'min-width',
|
||||
mobileDemo: 'min-width',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -289,7 +289,7 @@ export default {
|
|||
'en-US': 'Whether to display'
|
||||
},
|
||||
mode: ['pc', 'mobile'],
|
||||
pcDemo: 'basic-usage',
|
||||
pcDemo: 'value',
|
||||
mobileDemo: 'cancel-event'
|
||||
},
|
||||
{
|
||||
|
|
@ -323,7 +323,7 @@ export default {
|
|||
'en-US': 'Whether to allow dragging to resize the window'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-resize',
|
||||
pcDemo: 'resize',
|
||||
mobileDemo: 'resize',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -347,8 +347,7 @@ export default {
|
|||
'en-US': 'Display bottom'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'modal-footer',
|
||||
mobileDemo: 'showFooter',
|
||||
pcDemo: 'showFooter',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -360,10 +359,21 @@ export default {
|
|||
'en-US': 'Display Header'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-header',
|
||||
pcDemo: 'showHeader',
|
||||
mobileDemo: 'showHeader',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'showFooter',
|
||||
type: 'Boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '<p>是否显示底部</p>',
|
||||
'en-US': 'display different button'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'showFooter'
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
typeAnchorName: 'IStatus',
|
||||
|
|
@ -387,20 +397,20 @@ export default {
|
|||
'en-US': 'Window title'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-header',
|
||||
pcDemo: 'title',
|
||||
mobileDemo: 'title',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'top',
|
||||
type: 'number | string',
|
||||
defaultValue: '80',
|
||||
defaultValue: '15',
|
||||
desc: {
|
||||
'zh-CN': "消息距离顶部的位置，仅当 type 为 'message' 时有效",
|
||||
'en-US': "The position of the message from the top, only valid when type is 'message'"
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'message-top',
|
||||
pcDemo: 'top',
|
||||
mobileDemo: 'top',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -413,7 +423,7 @@ export default {
|
|||
'en-US': 'Window type'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'basic-usage',
|
||||
pcDemo: 'type',
|
||||
mobileDemo: 'type',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -438,7 +448,7 @@ export default {
|
|||
'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: 'modal-size',
|
||||
pcDemo: 'resize',
|
||||
mobileDemo: 'grid',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -450,8 +460,19 @@ export default {
|
|||
'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
|
||||
'en-US': 'Customize the stacking order (may be used in some special scenarios, such as when it is blocked)'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-other',
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'z-index',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'zIndex',
|
||||
type: 'Number',
|
||||
defaultValue: '3000',
|
||||
desc: {
|
||||
'zh-CN': '<p>自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）</p>',
|
||||
'en-US': 'display different button'
|
||||
},
|
||||
mode: ['mobile', 'mobile-first'],
|
||||
mobileDemo: 'zIndex',
|
||||
mfDemo: ''
|
||||
}
|
||||
|
|
@ -467,7 +488,7 @@ export default {
|
|||
'en-US': 'This event is triggered when the Cancel button is clicked'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-event',
|
||||
pcDemo: 'event',
|
||||
mobileDemo: 'cancel-event',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -481,7 +502,7 @@ export default {
|
|||
'en-US': 'This event is triggered when the close button is clicked'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-event',
|
||||
pcDemo: 'event',
|
||||
mobileDemo: 'close-event',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -495,7 +516,7 @@ export default {
|
|||
'en-US': 'This event is triggered when the OK button is clicked'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-event',
|
||||
pcDemo: 'event',
|
||||
mobileDemo: 'confirm-event',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -509,7 +530,7 @@ export default {
|
|||
'en-US': 'This event is triggered when the window is closed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-event',
|
||||
pcDemo: 'hide-event',
|
||||
mobileDemo: 'hide-event',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -523,7 +544,7 @@ export default {
|
|||
'en-US': 'This event is triggered when the window is displayed'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-event',
|
||||
pcDemo: 'event',
|
||||
mobileDemo: 'show-event',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -537,7 +558,7 @@ export default {
|
|||
'en-US': 'This event is triggered when a window is zoomed in or out'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-event',
|
||||
pcDemo: 'event',
|
||||
mobileDemo: 'zoom-event',
|
||||
mfDemo: ''
|
||||
}
|
||||
|
|
@ -553,7 +574,7 @@ export default {
|
|||
'en-US': 'Default slot'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-fn-slots',
|
||||
pcDemo: 'default-grid',
|
||||
mobileDemo: 'cancel-event',
|
||||
mfDemo: ''
|
||||
},
|
||||
|
|
@ -566,7 +587,7 @@ export default {
|
|||
'en-US': 'Template at the bottom of the window'
|
||||
},
|
||||
mode: ['pc', 'mobile', 'mobile-first'],
|
||||
pcDemo: 'modal-fn-slots',
|
||||
pcDemo: 'footer-slot',
|
||||
mobileDemo: 'footer-slot',
|
||||
mfDemo: ''
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue