feat: 合并1.1.1，升级版本到2.0.8
This commit is contained in:
奔跑的面条
commit
c8662537ca
.eslintrc.jspackage.jsonpnpm-lock.yaml
src
api
assets
images/chart
videos
components
I18n
Pages/ChartItemSetting
Plugins
hooks
packages/components
Charts
Maps
MapBase
config.tsconfig.vuedata.jsonindex.tsindex.vue
mapGeojson
110000.json120000.json130000.json140000.json150000.json210000.json220000.json230000.json310000.json320000.json330000.json340000.json350000.json360000.json370000.json410000.json420000.json430000.json440000.json450000.json460000.json500000.json510000.json520000.json530000.json540000.json610000.json620000.json630000.json640000.json650000.json710000.json810000.json820000.jsonchina.jsonempty.json
mapWithoutHainanIsLands.jsonMapChina
index.tsMores
Pies
Decorates
Decorates
Mores
Informations/Mores
Image
TextCloud
Video
WordCloud
@ -20,6 +20,10 @@ module.exports = {
|
||||
extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-unused-vars': 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'vue/valid-template-root': 'off',
|
||||
'vue/no-mutating-props': 'off'
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
{
|
||||
"name": "go-view",
|
||||
"version": "2.0.7",
|
||||
"version": "2.0.8",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview",
|
||||
"new": "plop --plopfile ./plop/plopfile.js",
|
||||
"postinstall": "husky install"
|
||||
"postinstall": "husky install",
|
||||
"lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue src",
|
||||
"lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.vue src --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/color": "^3.0.3",
|
||||
@ -19,6 +21,7 @@
|
||||
"crypto-js": "^4.1.1",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"echarts-stat": "^1.2.0",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"highlight.js": "^11.5.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"keymaster": "^1.6.2",
|
||||
|
||||
467
pnpm-lock.yaml
generated
467
pnpm-lock.yaml
generated
@ -25,6 +25,7 @@ specifiers:
|
||||
echarts: ^5.3.2
|
||||
echarts-liquidfill: ^3.1.0
|
||||
echarts-stat: ^1.2.0
|
||||
echarts-wordcloud: ^2.0.0
|
||||
eslint: ^8.12.0
|
||||
eslint-config-prettier: ^8.5.0
|
||||
eslint-plugin-import: ^2.26.0
|
||||
@ -71,6 +72,7 @@ dependencies:
|
||||
crypto-js: 4.1.1
|
||||
echarts-liquidfill: 3.1.0_echarts@5.3.3
|
||||
echarts-stat: 1.2.0
|
||||
echarts-wordcloud: registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.3.3
|
||||
highlight.js: 11.5.1
|
||||
html2canvas: 1.4.1
|
||||
keymaster: 1.6.2
|
||||
@ -1215,7 +1217,6 @@ packages:
|
||||
dependencies:
|
||||
'@vue/reactivity': 3.2.37
|
||||
'@vue/shared': 3.2.37
|
||||
dev: false
|
||||
|
||||
/@vue/runtime-dom/3.2.37:
|
||||
resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==}
|
||||
@ -1223,7 +1224,6 @@ packages:
|
||||
'@vue/runtime-core': 3.2.37
|
||||
'@vue/shared': 3.2.37
|
||||
csstype: 2.6.20
|
||||
dev: false
|
||||
|
||||
/@vue/server-renderer/3.2.37_vue@3.2.37:
|
||||
resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
|
||||
@ -1233,7 +1233,6 @@ packages:
|
||||
'@vue/compiler-ssr': 3.2.37
|
||||
'@vue/shared': 3.2.37
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
/@vue/shared/3.2.37:
|
||||
resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
|
||||
@ -1649,7 +1648,7 @@ packages:
|
||||
normalize-path: 3.0.0
|
||||
readdirp: 3.6.0
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
fsevents: registry.npmmirror.com/fsevents/2.3.2
|
||||
dev: true
|
||||
|
||||
/clean-stack/2.2.0:
|
||||
@ -1812,8 +1811,8 @@ packages:
|
||||
engines: {node: '>=10'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
is-text-path: 1.0.1
|
||||
JSONStream: 1.3.5
|
||||
is-text-path: 1.0.1
|
||||
lodash: 4.17.21
|
||||
meow: 8.1.2
|
||||
split2: 3.2.2
|
||||
@ -1892,7 +1891,6 @@ packages:
|
||||
|
||||
/csstype/2.6.20:
|
||||
resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
|
||||
dev: false
|
||||
|
||||
/csstype/3.0.11:
|
||||
resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
|
||||
@ -2099,7 +2097,7 @@ packages:
|
||||
dev: false
|
||||
|
||||
/echarts-stat/1.2.0:
|
||||
resolution: {integrity: sha512-zLd7Kgs+tuTSeaK0VQEMNmnMivEkhvHIk1gpBtLzpRerfcIQ+Bd5XudOMmtwpaTc1WDZbA7d1V//iiBccR46Qg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/echarts-stat/-/echarts-stat-1.2.0.tgz}
|
||||
resolution: {integrity: sha512-zLd7Kgs+tuTSeaK0VQEMNmnMivEkhvHIk1gpBtLzpRerfcIQ+Bd5XudOMmtwpaTc1WDZbA7d1V//iiBccR46Qg==}
|
||||
dev: false
|
||||
|
||||
/echarts/5.3.3:
|
||||
@ -2107,7 +2105,6 @@ packages:
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
zrender: 5.3.2
|
||||
dev: true
|
||||
|
||||
/ee-first/1.1.1:
|
||||
resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
|
||||
@ -2192,177 +2189,6 @@ packages:
|
||||
is-symbol: 1.0.4
|
||||
dev: true
|
||||
|
||||
/esbuild-android-64/0.14.43:
|
||||
resolution: {integrity: sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [android]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-android-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-bKS2BBFh+7XZY9rpjiHGRNA7LvWYbZWP87pLehggTG7tTaCDvj8qQGOU/OZSjCSKDYbgY7Q+oDw8RlYQ2Jt2BA==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-darwin-64/0.14.43:
|
||||
resolution: {integrity: sha512-/3PSilx011ttoieRGkSZ0XV8zjBf2C9enV4ScMMbCT4dpx0mFhMOpFnCHkOK0pWGB8LklykFyHrWk2z6DENVUg==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-darwin-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-1HyFUKs8DMCBOvw1Qxpr5Vv/ThNcVIFb5xgXWK3pyT40WPvgYIiRTwJCvNs4l8i5qWF8/CK5bQxJVDjQvtv0Yw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-freebsd-64/0.14.43:
|
||||
resolution: {integrity: sha512-FNWc05TPHYgaXjbPZO5/rJKSBslfG6BeMSs8GhwnqAKP56eEhvmzwnIz1QcC9cRVyO+IKqWNfmHFkCa1WJTULA==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [freebsd]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-freebsd-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-amrYopclz3VohqisOPR6hA3GOWA3LZC1WDLnp21RhNmoERmJ/vLnOpnrG2P/Zao+/erKTCUqmrCIPVtj58DRoA==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [freebsd]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-linux-32/0.14.43:
|
||||
resolution: {integrity: sha512-KoxoEra+9O3AKVvgDFvDkiuddCds6q71owSQEYwjtqRV7RwbPzKxJa6+uyzUulHcyGVq0g15K0oKG5CFBcvYDw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [ia32]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-linux-64/0.14.43:
|
||||
resolution: {integrity: sha512-EwINwGMyiJMgBby5/SbMqKcUhS5AYAZ2CpEBzSowsJPNBJEdhkCTtEjk757TN/wxgbu3QklqDM6KghY660QCUw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-linux-arm/0.14.43:
|
||||
resolution: {integrity: sha512-e6YzQUoDxxtyamuF12eVzzRC7bbEFSZohJ6igQB9tBqnNmIQY3fI6Cns3z2wxtbZ3f2o6idkD2fQnlvs2902Dg==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-linux-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-UlSpjMWllAc70zYbHxWuDS3FJytyuR/gHJYBr8BICcTNb/TSOYVBg6U7b3jZ3mILTrgzwJUHwhEwK18FZDouUQ==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-linux-mips64le/0.14.43:
|
||||
resolution: {integrity: sha512-f+v8cInPEL1/SDP//CfSYzcDNgE4CY3xgDV81DWm3KAPWzhvxARrKxB1Pstf5mB56yAslJDxu7ryBUPX207EZA==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [mips64el]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-linux-ppc64le/0.14.43:
|
||||
resolution: {integrity: sha512-5wZYMDGAL/K2pqkdIsW+I4IR41kyfHr/QshJcNpUfK3RjB3VQcPWOaZmc+74rm4ZjVirYrtz+jWw0SgxtxRanA==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [ppc64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-linux-riscv64/0.14.43:
|
||||
resolution: {integrity: sha512-lYcAOUxp85hC7lSjycJUVSmj4/9oEfSyXjb/ua9bNl8afonaduuqtw7hvKMoKuYnVwOCDw4RSfKpcnIRDWq+Bw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-linux-s390x/0.14.43:
|
||||
resolution: {integrity: sha512-27e43ZhHvhFE4nM7HqtUbMRu37I/4eNSUbb8FGZWszV+uLzMIsHDwLoBiJmw7G9N+hrehNPeQ4F5Ujad0DrUKQ==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [s390x]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-netbsd-64/0.14.43:
|
||||
resolution: {integrity: sha512-2mH4QF6hHBn5zzAfxEI/2eBC0mspVsZ6UVo821LpAJKMvLJPBk3XJO5xwg7paDqSqpl7p6IRrAenW999AEfJhQ==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [netbsd]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-openbsd-64/0.14.43:
|
||||
resolution: {integrity: sha512-ZhQpiZjvqCqO8jKdGp9+8k9E/EHSA+zIWOg+grwZasI9RoblqJ1QiZqqi7jfd6ZrrG1UFBNGe4m0NFxCFbMVbg==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [openbsd]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-sunos-64/0.14.43:
|
||||
resolution: {integrity: sha512-DgxSi9DaHReL9gYuul2rrQCAapgnCJkh3LSHPKsY26zytYppG0HgkgVF80zjIlvEsUbGBP/GHQzBtrezj/Zq1Q==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [sunos]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-windows-32/0.14.43:
|
||||
resolution: {integrity: sha512-Ih3+2O5oExiqm0mY6YYE5dR0o8+AspccQ3vIAtRodwFvhuyGLjb0Hbmzun/F3Lw19nuhPMu3sW2fqIJ5xBxByw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [ia32]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild-windows-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-7ZlD7bo++kVRblJEoG+cepljkfP8bfuTPz5fIXzptwnPaFwGS6ahvfoYzY7WCf5v/1nX2X02HDraVItTgbHnKw==}
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/esbuild/0.11.3:
|
||||
resolution: {integrity: sha512-BzVRHcCtFepjS9WcqRjqoIxLqgpK21a8J4Zi4msSGxDxiXVO1IbcqT1KjhdDDnJxKfe7bvzZrvMEX+bVO0Elcw==}
|
||||
hasBin: true
|
||||
@ -2375,26 +2201,26 @@ packages:
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
optionalDependencies:
|
||||
esbuild-android-64: 0.14.43
|
||||
esbuild-android-arm64: 0.14.43
|
||||
esbuild-darwin-64: 0.14.43
|
||||
esbuild-darwin-arm64: 0.14.43
|
||||
esbuild-freebsd-64: 0.14.43
|
||||
esbuild-freebsd-arm64: 0.14.43
|
||||
esbuild-linux-32: 0.14.43
|
||||
esbuild-linux-64: 0.14.43
|
||||
esbuild-linux-arm: 0.14.43
|
||||
esbuild-linux-arm64: 0.14.43
|
||||
esbuild-linux-mips64le: 0.14.43
|
||||
esbuild-linux-ppc64le: 0.14.43
|
||||
esbuild-linux-riscv64: 0.14.43
|
||||
esbuild-linux-s390x: 0.14.43
|
||||
esbuild-netbsd-64: 0.14.43
|
||||
esbuild-openbsd-64: 0.14.43
|
||||
esbuild-sunos-64: 0.14.43
|
||||
esbuild-windows-32: 0.14.43
|
||||
esbuild-android-64: registry.npmmirror.com/esbuild-android-64/0.14.43
|
||||
esbuild-android-arm64: registry.npmmirror.com/esbuild-android-arm64/0.14.43
|
||||
esbuild-darwin-64: registry.npmmirror.com/esbuild-darwin-64/0.14.43
|
||||
esbuild-darwin-arm64: registry.npmmirror.com/esbuild-darwin-arm64/0.14.43
|
||||
esbuild-freebsd-64: registry.npmmirror.com/esbuild-freebsd-64/0.14.43
|
||||
esbuild-freebsd-arm64: registry.npmmirror.com/esbuild-freebsd-arm64/0.14.43
|
||||
esbuild-linux-32: registry.npmmirror.com/esbuild-linux-32/0.14.43
|
||||
esbuild-linux-64: registry.npmmirror.com/esbuild-linux-64/0.14.43
|
||||
esbuild-linux-arm: registry.npmmirror.com/esbuild-linux-arm/0.14.43
|
||||
esbuild-linux-arm64: registry.npmmirror.com/esbuild-linux-arm64/0.14.43
|
||||
esbuild-linux-mips64le: registry.npmmirror.com/esbuild-linux-mips64le/0.14.43
|
||||
esbuild-linux-ppc64le: registry.npmmirror.com/esbuild-linux-ppc64le/0.14.43
|
||||
esbuild-linux-riscv64: registry.npmmirror.com/esbuild-linux-riscv64/0.14.43
|
||||
esbuild-linux-s390x: registry.npmmirror.com/esbuild-linux-s390x/0.14.43
|
||||
esbuild-netbsd-64: registry.npmmirror.com/esbuild-netbsd-64/0.14.43
|
||||
esbuild-openbsd-64: registry.npmmirror.com/esbuild-openbsd-64/0.14.43
|
||||
esbuild-sunos-64: registry.npmmirror.com/esbuild-sunos-64/0.14.43
|
||||
esbuild-windows-32: registry.npmmirror.com/esbuild-windows-32/0.14.43
|
||||
esbuild-windows-64: registry.npmmirror.com/esbuild-windows-64/0.14.43
|
||||
esbuild-windows-arm64: 0.14.43
|
||||
esbuild-windows-arm64: registry.npmmirror.com/esbuild-windows-arm64/0.14.43
|
||||
dev: true
|
||||
|
||||
/escalade/3.1.1:
|
||||
@ -2863,14 +2689,6 @@ packages:
|
||||
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
|
||||
dev: true
|
||||
|
||||
/fsevents/2.3.2:
|
||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/function-bind/1.1.1:
|
||||
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
|
||||
dev: true
|
||||
@ -3799,7 +3617,6 @@ packages:
|
||||
|
||||
/monaco-editor/0.33.0:
|
||||
resolution: {integrity: sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==}
|
||||
dev: false
|
||||
|
||||
/ms/2.0.0:
|
||||
resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
|
||||
@ -4556,7 +4373,7 @@ packages:
|
||||
engines: {node: '>=10.0.0'}
|
||||
hasBin: true
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
fsevents: registry.npmmirror.com/fsevents/2.3.2
|
||||
dev: true
|
||||
|
||||
/run-async/2.4.1:
|
||||
@ -4951,7 +4768,6 @@ packages:
|
||||
|
||||
/tslib/2.3.0:
|
||||
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
|
||||
dev: true
|
||||
|
||||
/tslib/2.4.0:
|
||||
resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
|
||||
@ -5003,7 +4819,6 @@ packages:
|
||||
resolution: {integrity: sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==}
|
||||
engines: {node: '>=4.2.0'}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/typescript/4.7.3:
|
||||
resolution: {integrity: sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==}
|
||||
@ -5178,7 +4993,7 @@ packages:
|
||||
rollup: 2.75.6
|
||||
sass: 1.52.3
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
fsevents: registry.npmmirror.com/fsevents/2.3.2
|
||||
dev: true
|
||||
|
||||
/void-elements/3.1.0:
|
||||
@ -5415,7 +5230,6 @@ packages:
|
||||
'@vue/runtime-dom': 3.2.37
|
||||
'@vue/server-renderer': 3.2.37_vue@3.2.37
|
||||
'@vue/shared': 3.2.37
|
||||
dev: false
|
||||
|
||||
/vue3-lazyload/0.2.5-beta_2yymnzrok6eda47acnj2yjm3ae:
|
||||
resolution: {integrity: sha512-GVhJfL9Hcu+AvWsYmUwODivvt+gzpT0ztgAzZaUduoiTaGCv/qzhr0VwAQXfjGF3XFYFyOJsHlAi3/WE0P8XTQ==}
|
||||
@ -5581,7 +5395,215 @@ packages:
|
||||
resolution: {integrity: sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==}
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
|
||||
registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.3.3:
|
||||
resolution: {integrity: sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz}
|
||||
id: registry.npmmirror.com/echarts-wordcloud/2.0.0
|
||||
name: echarts-wordcloud
|
||||
version: 2.0.0
|
||||
peerDependencies:
|
||||
echarts: ^5.0.1
|
||||
dependencies:
|
||||
echarts: 5.3.3
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/esbuild-android-64/0.14.43:
|
||||
resolution: {integrity: sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.14.43.tgz}
|
||||
name: esbuild-android-64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [android]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-android-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-bKS2BBFh+7XZY9rpjiHGRNA7LvWYbZWP87pLehggTG7tTaCDvj8qQGOU/OZSjCSKDYbgY7Q+oDw8RlYQ2Jt2BA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.43.tgz}
|
||||
name: esbuild-android-arm64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-darwin-64/0.14.43:
|
||||
resolution: {integrity: sha512-/3PSilx011ttoieRGkSZ0XV8zjBf2C9enV4ScMMbCT4dpx0mFhMOpFnCHkOK0pWGB8LklykFyHrWk2z6DENVUg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.43.tgz}
|
||||
name: esbuild-darwin-64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-darwin-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-1HyFUKs8DMCBOvw1Qxpr5Vv/ThNcVIFb5xgXWK3pyT40WPvgYIiRTwJCvNs4l8i5qWF8/CK5bQxJVDjQvtv0Yw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.43.tgz}
|
||||
name: esbuild-darwin-arm64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-freebsd-64/0.14.43:
|
||||
resolution: {integrity: sha512-FNWc05TPHYgaXjbPZO5/rJKSBslfG6BeMSs8GhwnqAKP56eEhvmzwnIz1QcC9cRVyO+IKqWNfmHFkCa1WJTULA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.43.tgz}
|
||||
name: esbuild-freebsd-64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [freebsd]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-freebsd-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-amrYopclz3VohqisOPR6hA3GOWA3LZC1WDLnp21RhNmoERmJ/vLnOpnrG2P/Zao+/erKTCUqmrCIPVtj58DRoA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.43.tgz}
|
||||
name: esbuild-freebsd-arm64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [freebsd]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-linux-32/0.14.43:
|
||||
resolution: {integrity: sha512-KoxoEra+9O3AKVvgDFvDkiuddCds6q71owSQEYwjtqRV7RwbPzKxJa6+uyzUulHcyGVq0g15K0oKG5CFBcvYDw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-32/-/esbuild-linux-32-0.14.43.tgz}
|
||||
name: esbuild-linux-32
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [ia32]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-linux-64/0.14.43:
|
||||
resolution: {integrity: sha512-EwINwGMyiJMgBby5/SbMqKcUhS5AYAZ2CpEBzSowsJPNBJEdhkCTtEjk757TN/wxgbu3QklqDM6KghY660QCUw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.43.tgz}
|
||||
name: esbuild-linux-64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-linux-arm/0.14.43:
|
||||
resolution: {integrity: sha512-e6YzQUoDxxtyamuF12eVzzRC7bbEFSZohJ6igQB9tBqnNmIQY3fI6Cns3z2wxtbZ3f2o6idkD2fQnlvs2902Dg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.43.tgz}
|
||||
name: esbuild-linux-arm
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-linux-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-UlSpjMWllAc70zYbHxWuDS3FJytyuR/gHJYBr8BICcTNb/TSOYVBg6U7b3jZ3mILTrgzwJUHwhEwK18FZDouUQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.43.tgz}
|
||||
name: esbuild-linux-arm64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-linux-mips64le/0.14.43:
|
||||
resolution: {integrity: sha512-f+v8cInPEL1/SDP//CfSYzcDNgE4CY3xgDV81DWm3KAPWzhvxARrKxB1Pstf5mB56yAslJDxu7ryBUPX207EZA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.43.tgz}
|
||||
name: esbuild-linux-mips64le
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [mips64el]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-linux-ppc64le/0.14.43:
|
||||
resolution: {integrity: sha512-5wZYMDGAL/K2pqkdIsW+I4IR41kyfHr/QshJcNpUfK3RjB3VQcPWOaZmc+74rm4ZjVirYrtz+jWw0SgxtxRanA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.43.tgz}
|
||||
name: esbuild-linux-ppc64le
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [ppc64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-linux-riscv64/0.14.43:
|
||||
resolution: {integrity: sha512-lYcAOUxp85hC7lSjycJUVSmj4/9oEfSyXjb/ua9bNl8afonaduuqtw7hvKMoKuYnVwOCDw4RSfKpcnIRDWq+Bw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.43.tgz}
|
||||
name: esbuild-linux-riscv64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-linux-s390x/0.14.43:
|
||||
resolution: {integrity: sha512-27e43ZhHvhFE4nM7HqtUbMRu37I/4eNSUbb8FGZWszV+uLzMIsHDwLoBiJmw7G9N+hrehNPeQ4F5Ujad0DrUKQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.43.tgz}
|
||||
name: esbuild-linux-s390x
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [s390x]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-netbsd-64/0.14.43:
|
||||
resolution: {integrity: sha512-2mH4QF6hHBn5zzAfxEI/2eBC0mspVsZ6UVo821LpAJKMvLJPBk3XJO5xwg7paDqSqpl7p6IRrAenW999AEfJhQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.43.tgz}
|
||||
name: esbuild-netbsd-64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [netbsd]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-openbsd-64/0.14.43:
|
||||
resolution: {integrity: sha512-ZhQpiZjvqCqO8jKdGp9+8k9E/EHSA+zIWOg+grwZasI9RoblqJ1QiZqqi7jfd6ZrrG1UFBNGe4m0NFxCFbMVbg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.43.tgz}
|
||||
name: esbuild-openbsd-64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [openbsd]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-sunos-64/0.14.43:
|
||||
resolution: {integrity: sha512-DgxSi9DaHReL9gYuul2rrQCAapgnCJkh3LSHPKsY26zytYppG0HgkgVF80zjIlvEsUbGBP/GHQzBtrezj/Zq1Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.43.tgz}
|
||||
name: esbuild-sunos-64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [x64]
|
||||
os: [sunos]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-windows-32/0.14.43:
|
||||
resolution: {integrity: sha512-Ih3+2O5oExiqm0mY6YYE5dR0o8+AspccQ3vIAtRodwFvhuyGLjb0Hbmzun/F3Lw19nuhPMu3sW2fqIJ5xBxByw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-windows-32/-/esbuild-windows-32-0.14.43.tgz}
|
||||
name: esbuild-windows-32
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [ia32]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-windows-64/0.14.43:
|
||||
resolution: {integrity: sha512-8NsuNfI8xwFuJbrCuI+aBqNTYkrWErejFO5aYM+yHqyHuL8mmepLS9EPzAzk8rvfaJrhN0+RvKWAcymViHOKEw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.14.43.tgz}
|
||||
@ -5594,6 +5616,27 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/esbuild-windows-arm64/0.14.43:
|
||||
resolution: {integrity: sha512-7ZlD7bo++kVRblJEoG+cepljkfP8bfuTPz5fIXzptwnPaFwGS6ahvfoYzY7WCf5v/1nX2X02HDraVItTgbHnKw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.43.tgz}
|
||||
name: esbuild-windows-arm64
|
||||
version: 0.14.43
|
||||
engines: {node: '>=12'}
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/fsevents/2.3.2:
|
||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz}
|
||||
name: fsevents
|
||||
version: 2.3.2
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/graceful-fs/4.2.10:
|
||||
resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz}
|
||||
name: graceful-fs
|
||||
|
||||
@ -80,6 +80,32 @@ export const http = (type?: RequestHttpEnum) => {
|
||||
return get
|
||||
}
|
||||
}
|
||||
const prefix = 'javascript:'
|
||||
// 对输入字符进行转义处理
|
||||
export const translateStr = (target: string | object) => {
|
||||
if (typeof target === 'string') {
|
||||
if (target.startsWith(prefix)) {
|
||||
const funcStr = target.split(prefix)[1]
|
||||
let result;
|
||||
try {
|
||||
result = new Function(`${funcStr}`)()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
window['$message'].error('js内容解析有误！')
|
||||
}
|
||||
return result
|
||||
} else {
|
||||
return target
|
||||
}
|
||||
}
|
||||
for (const key in target) {
|
||||
if (Object.prototype.hasOwnProperty.call(target, key)) {
|
||||
const subTarget = (target as any)[key];
|
||||
(target as any)[key] = translateStr(subTarget)
|
||||
}
|
||||
}
|
||||
return target
|
||||
}
|
||||
|
||||
/**
|
||||
* * 自定义请求
|
||||
@ -87,7 +113,7 @@ export const http = (type?: RequestHttpEnum) => {
|
||||
* @param globalParams 全局参数
|
||||
*/
|
||||
export const customizeHttp = (targetParams: RequestConfigType, globalParams: RequestGlobalConfigType) => {
|
||||
if(!targetParams || !globalParams) {
|
||||
if (!targetParams || !globalParams) {
|
||||
return
|
||||
}
|
||||
|
||||
@ -125,15 +151,17 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
|
||||
}
|
||||
|
||||
// 处理头部
|
||||
const headers: RequestParamsObjType = {
|
||||
let headers: RequestParamsObjType = {
|
||||
...globalRequestParams.Header,
|
||||
...targetRequestParams.Header,
|
||||
...targetRequestParams.Header
|
||||
}
|
||||
headers = translateStr(headers)
|
||||
|
||||
// data 参数
|
||||
let data: RequestParamsObjType | FormData | string = {}
|
||||
// params 参数
|
||||
let params: RequestParamsObjType = targetRequestParams.Params
|
||||
let params: RequestParamsObjType = { ...targetRequestParams.Params }
|
||||
params = translateStr(params)
|
||||
// form 类型处理
|
||||
let formData: FormData = new FormData()
|
||||
formData.set('default', 'defaultData')
|
||||
@ -145,33 +173,35 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
|
||||
|
||||
case RequestBodyEnum.JSON:
|
||||
headers['Content-Type'] = ContentTypeEnum.JSON
|
||||
data = JSON.parse(targetRequestParams.Body['json'])
|
||||
data = translateStr(JSON.parse(targetRequestParams.Body['json']))
|
||||
// json 赋值给 data
|
||||
break
|
||||
|
||||
case RequestBodyEnum.XML:
|
||||
headers['Content-Type'] = ContentTypeEnum.XML
|
||||
// xml 字符串赋值给 data
|
||||
data = targetRequestParams.Body['xml']
|
||||
data = translateStr(targetRequestParams.Body['xml'])
|
||||
break
|
||||
|
||||
case RequestBodyEnum.X_WWW_FORM_URLENCODED:
|
||||
case RequestBodyEnum.X_WWW_FORM_URLENCODED: {
|
||||
headers['Content-Type'] = ContentTypeEnum.FORM_URLENCODED
|
||||
const bodyFormData = targetRequestParams.Body['x-www-form-urlencoded']
|
||||
for (const i in bodyFormData) formData.set(i, bodyFormData[i])
|
||||
for (const i in bodyFormData) formData.set(i, translateStr(bodyFormData[i]))
|
||||
// FormData 赋值给 data
|
||||
data = formData
|
||||
break
|
||||
}
|
||||
|
||||
case RequestBodyEnum.FORM_DATA:
|
||||
case RequestBodyEnum.FORM_DATA: {
|
||||
headers['Content-Type'] = ContentTypeEnum.FORM_DATA
|
||||
const bodyFormUrlencoded = targetRequestParams.Body['form-data']
|
||||
for (const i in bodyFormUrlencoded) {
|
||||
formData.set(i, bodyFormUrlencoded[i])
|
||||
formData.set(i, translateStr(bodyFormUrlencoded[i]))
|
||||
}
|
||||
// FormData 赋值给 data
|
||||
data = formData
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// sql 处理
|
||||
@ -180,11 +210,17 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
|
||||
data = requestSQLContent
|
||||
}
|
||||
|
||||
return axiosInstance({
|
||||
url: `${requestOriginUrl}${requestUrl}`,
|
||||
method: requestHttpType,
|
||||
data,
|
||||
params,
|
||||
headers
|
||||
})
|
||||
try {
|
||||
const url = (new Function("return `" + `${requestOriginUrl}${requestUrl}`.trim() + "`"))();
|
||||
return axiosInstance({
|
||||
url,
|
||||
method: requestHttpType,
|
||||
data,
|
||||
params,
|
||||
headers
|
||||
})
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
window['$message'].error('URL地址格式有误！')
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,6 +14,9 @@ export const scrollBoardUrl = '/mock/scrollBoard'
|
||||
export const radarUrl = '/mock/radarData'
|
||||
export const heatMapUrl = '/mock/heatMapData'
|
||||
export const scatterBasicUrl = '/mock/scatterBasic'
|
||||
export const mapUrl = '/mock/map'
|
||||
export const wordCloudUrl = '/mock/wordCloud'
|
||||
export const treemapUrl = '/mock/treemap'
|
||||
|
||||
const mockObject: MockMethod[] = [
|
||||
{
|
||||
@ -73,6 +76,21 @@ const mockObject: MockMethod[] = [
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchScatterBasic
|
||||
},
|
||||
{
|
||||
url: mapUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchMap
|
||||
},
|
||||
{
|
||||
url: wordCloudUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchWordCloud
|
||||
},
|
||||
{
|
||||
url: treemapUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchTreemap
|
||||
},
|
||||
]
|
||||
|
||||
export default mockObject
|
||||
|
||||
79
src/api/mock/map.json
Normal file
79
src/api/mock/map.json
Normal file
@ -0,0 +1,79 @@
|
||||
{
|
||||
"point": [
|
||||
{
|
||||
"name": "北京",
|
||||
"value": [116.405285, 39.904989, 200]
|
||||
},
|
||||
{
|
||||
"name": "郑州",
|
||||
"value": [113.665412, 34.757975, 888]
|
||||
},
|
||||
{
|
||||
"name": "青海",
|
||||
"value": [101.778916, 36.623178, 666]
|
||||
},
|
||||
{
|
||||
"name": "宁夏回族自治区",
|
||||
"value": [106.278179, 38.46637, 66]
|
||||
},
|
||||
{
|
||||
"name": "哈尔滨市",
|
||||
"value": [126.642464, 45.756967, 101]
|
||||
}
|
||||
],
|
||||
"map": [
|
||||
{
|
||||
"name": "北京市",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "河北省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "江苏省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "福建省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "山东省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "河南省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "湖北省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "广西壮族自治区",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "海南省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "青海省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "新疆维吾尔自治区",
|
||||
"value": "@integer(0, 1000)"
|
||||
}
|
||||
],
|
||||
"pieces": [
|
||||
{ "gte": 1000, "label": ">1000" },
|
||||
{ "gte": 600, "lte": 999, "label": "600-999" },
|
||||
{ "gte": 200, "lte": 599, "label": "200-599" },
|
||||
{ "gte": 50, "lte": 199, "label": "49-199" },
|
||||
{ "gte": 10, "lte": 49, "label": "10-49" },
|
||||
{ "lte": 9, "label": "<9" }
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,7 @@
|
||||
import heatmapJson from './heatMapData.json'
|
||||
import scatterJson from './scatter.json'
|
||||
import mapJson from './map.json'
|
||||
import tTreemapJson from './treemap.json'
|
||||
|
||||
export default {
|
||||
// 单图表
|
||||
@ -198,5 +200,58 @@ export default {
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: scatterJson
|
||||
}
|
||||
},
|
||||
// 中国地图
|
||||
fetchMap: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: mapJson
|
||||
},
|
||||
// 词云
|
||||
fetchWordCloud: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: [
|
||||
{
|
||||
name: '@name',
|
||||
value: 8000,
|
||||
textStyle: {
|
||||
color: '#78fbb2'
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
},
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' },
|
||||
{ name: '@name', value: '@integer(10, 8000)' }
|
||||
]
|
||||
},
|
||||
// 树图
|
||||
fetchTreemap: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: tTreemapJson
|
||||
},
|
||||
}
|
||||
|
||||
50
src/api/mock/treemap.json
Normal file
50
src/api/mock/treemap.json
Normal file
@ -0,0 +1,50 @@
|
||||
[
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 1000)",
|
||||
"children": [
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 500)"
|
||||
},
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 500)"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 1000)",
|
||||
"children": [
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 00)"
|
||||
},
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 500)"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 1000)",
|
||||
"children": [
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 1000)"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 1000)",
|
||||
"children": [
|
||||
{
|
||||
"name": "@name",
|
||||
"value": "@integer(0, 1000)"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
Before 
(image error) Size: 63 KiB After 
(image error) Size: 103 KiB
|
BIN
src/assets/images/chart/decorates/clock.png
Normal file
BIN
src/assets/images/chart/decorates/clock.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 24 KiB |
BIN
src/assets/images/chart/decorates/decorates06.png
Normal file
BIN
src/assets/images/chart/decorates/decorates06.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 12 KiB |
Binary file not shown.
|
Before 
(image error) Size: 11 KiB After 
(image error) Size: 9.3 KiB
|
BIN
src/assets/images/chart/informations/video.png
Normal file
BIN
src/assets/images/chart/informations/video.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 8.2 KiB |
BIN
src/assets/videos/earth.mp4
Normal file
BIN
src/assets/videos/earth.mp4
Normal file
Binary file not shown.
@ -1,3 +1,4 @@
|
||||
<!-- eslint-disable vue/valid-template-root -->
|
||||
<template></template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -230,15 +230,15 @@
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="视觉映射">
|
||||
<setting-item-box name="控制块">
|
||||
<setting-item name="放置方向">
|
||||
<n-select v-model:value="visualMap.orient" size="small" :options="axisConfig.visualMap.orient"></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="宽度">
|
||||
<n-input-number v-model:value="visualMap.temWidth" size="small"></n-input-number>
|
||||
<n-input-number v-model:value="visualMap.itemWidth" :min="5" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="高度">
|
||||
<n-input-number v-model:value="visualMap.itemHeight" size="small"></n-input-number>
|
||||
<n-input-number v-model:value="visualMap.itemHeight" :min="5" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="反转">
|
||||
<n-space>
|
||||
@ -252,14 +252,6 @@
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<global-setting-position :targetData="visualMap"></global-setting-position>
|
||||
<!-- <setting-item-box name="位置">
|
||||
<setting-item name="距离底部">
|
||||
<n-input-number v-model:value="visualMap.bottom" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="距离左侧">
|
||||
<n-input-number v-model:value="visualMap.left" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box> -->
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
|
||||
<template #header>
|
||||
<n-switch v-if="isCanvas" v-model:value="chartStyles.filterShow" size="small"></n-switch>
|
||||
<n-switch v-model:value="chartStyles.filterShow" size="small"></n-switch>
|
||||
</template>
|
||||
<setting-item-box name="色相" :alone="true">
|
||||
<setting-item :name="`值：${chartStyles.hueRotate}deg`">
|
||||
@ -126,7 +126,7 @@
|
||||
</setting-item-box>
|
||||
|
||||
<!-- 提示 -->
|
||||
<n-tag v-show="isCanvas" type="warning"> 若预览时大屏模糊，可以尝试关闭滤镜进行修复 </n-tag>
|
||||
<n-tag type="warning"> 若预览时大屏模糊，可以尝试关闭滤镜进行修复 </n-tag>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<!-- eslint-disable vue/valid-template-root -->
|
||||
<template></template>
|
||||
<script lang="ts" setup>
|
||||
import { useDialog } from 'naive-ui';
|
||||
import { useDialog } from 'naive-ui'
|
||||
//挂载在 window 方便与在js中使用
|
||||
window['$dialog'] = useDialog();
|
||||
window['$dialog'] = useDialog()
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<!-- eslint-disable vue/valid-template-root -->
|
||||
<template></template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<!-- eslint-disable vue/valid-template-root -->
|
||||
<template></template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { useMessage } from 'naive-ui'
|
||||
//挂载在 window 方便与在js中使用
|
||||
window['$message'] = useMessage();
|
||||
window['$message'] = useMessage()
|
||||
</script>
|
||||
|
||||
@ -25,7 +25,7 @@ export const useChartDataFetch = (
|
||||
|
||||
const requestIntervalFn = () => {
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
|
||||
// 全局数据
|
||||
const {
|
||||
requestOriginUrl,
|
||||
@ -88,7 +88,10 @@ export const useChartDataFetch = (
|
||||
// 开启轮询
|
||||
if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
|
||||
}
|
||||
} catch (error) {}
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
isPreview() && requestIntervalFn()
|
||||
|
||||
152
src/packages/components/Charts/Maps/MapBase/config.ts
Normal file
152
src/packages/components/Charts/Maps/MapBase/config.ts
Normal file
@ -0,0 +1,152 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { MapBaseConfig } from './index'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = []
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
mapRegion: {
|
||||
adcode: 'china',
|
||||
showHainanIsLands: true
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
},
|
||||
visualMap: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
pieces: [
|
||||
{ gte: 1000, label: '>1000' }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
{ gte: 600, lte: 999, label: '600-999' },
|
||||
{ gte: 200, lte: 599, label: '200-599' },
|
||||
{ gte: 50, lte: 199, label: '49-199' },
|
||||
{ gte: 10, lte: 49, label: '10-49' },
|
||||
{ lte: 9, label: '<9' } // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
],
|
||||
inRange: {
|
||||
// 渐变颜色，从小到大
|
||||
color: ['#c3d7df', '#5cb3cc', '#8abcd1', '#66a9c9', '#2f90b9', '#1781b5']
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
show: false,
|
||||
type: 'map',
|
||||
roam: false,
|
||||
map: 'china',
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: 1
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize: 4,
|
||||
legendHoverLink: true,
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
scale: 6,
|
||||
color: '#FFFFFF',
|
||||
brushType: 'fill'
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: 'rgba(0,0,0,.6)',
|
||||
borderColor: 'rgba(147, 235, 248, .8)',
|
||||
textStyle: {
|
||||
color: '#FFF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: 'bottom',
|
||||
textBorderColor: '#fff',
|
||||
textShadowColor: '#000',
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: '#FFF',
|
||||
show: true
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FFFFFF',
|
||||
borderColor: 'rgba(225,255,255,2)',
|
||||
borderWidth: 4,
|
||||
shadowColor: '#E1FFFF',
|
||||
shadowBlur: 10
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '区域',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
data: [],
|
||||
selectedMode: false,
|
||||
zoom: 1,
|
||||
geoIndex: 1,
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: 'rgba(0,0,0,.6)',
|
||||
borderColor: 'rgba(147, 235, 248, .8)',
|
||||
textStyle: {
|
||||
color: '#FFF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
disabled: false,
|
||||
label: {
|
||||
color: '#fffFFF'
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#389BB7',
|
||||
shadowColor: '#389BB7',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#93EBF8',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
},
|
||||
shadowColor: '#80D9F842',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
export const MapDefaultConfig = { ...option }
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = MapBaseConfig.key
|
||||
public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
|
||||
public chartConfig = MapBaseConfig
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
201
src/packages/components/Charts/Maps/MapBase/config.vue
Normal file
201
src/packages/components/Charts/Maps/MapBase/config.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem name="地图" :expanded="true">
|
||||
<SettingItemBox name="地图区域">
|
||||
<SettingItem name="默认中国">
|
||||
<n-select
|
||||
size="small"
|
||||
v-model:value="mapRegion.adcode"
|
||||
:options="mapRegionOptions"
|
||||
value-field="adcode"
|
||||
label-field="name"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="区域颜色" :alone="true">
|
||||
<SettingItem name="0%处颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.areaColor.colorStops[0].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="100%处颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.areaColor.colorStops[1].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="阴影">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="模糊程度">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.shadowBlur"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="请输入模糊程度"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="水平偏移">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.shadowOffsetX"
|
||||
size="small"
|
||||
placeholder="请输入水平偏移大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="垂直偏移">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.shadowOffsetY"
|
||||
size="small"
|
||||
placeholder="请输入垂直偏移大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="聚焦 （预览可见）">
|
||||
<setting-item name="禁用">
|
||||
<n-space>
|
||||
<n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].emphasis.itemStyle.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="阴影">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].emphasis.itemStyle.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="边框大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].emphasis.itemStyle.borderWidth"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入边框大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="文字颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].emphasis.label.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="边框">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.borderWidth"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入边框大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="其他" v-if="mapRegion.adcode === 'china'">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="mapRegion.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="标记" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="涟漪">
|
||||
<SettingItem name="涟漪大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[0].rippleEffect.scale"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入涟漪大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="涟漪颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].rippleEffect.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="涟漪的绘制方式">
|
||||
<n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
import { ref } from 'vue'
|
||||
import mapChinaJson from './mapGeojson/china.json'
|
||||
|
||||
const mapRegionOptions = ref([
|
||||
{
|
||||
adcode: 'china',
|
||||
name: '中国'
|
||||
}
|
||||
])
|
||||
|
||||
const rippleEffectOptions = ref([
|
||||
{
|
||||
value: 'fill',
|
||||
label: '实心'
|
||||
},
|
||||
{
|
||||
value: 'stroke',
|
||||
label: '空心'
|
||||
}
|
||||
])
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initMapRegionOptions = () => {
|
||||
mapChinaJson.features.forEach((element: any) => {
|
||||
if (element.properties.name) {
|
||||
mapRegionOptions.value.push({ ...element.properties })
|
||||
}
|
||||
})
|
||||
}
|
||||
initMapRegionOptions()
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const mapRegion = computed(() => {
|
||||
return props.optionData.mapRegion
|
||||
})
|
||||
</script>
|
||||
79
src/packages/components/Charts/Maps/MapBase/data.json
Normal file
79
src/packages/components/Charts/Maps/MapBase/data.json
Normal file
@ -0,0 +1,79 @@
|
||||
{
|
||||
"point": [
|
||||
{
|
||||
"name": "北京",
|
||||
"value": [116.405285, 39.904989, 200]
|
||||
},
|
||||
{
|
||||
"name": "郑州",
|
||||
"value": [113.665412, 34.757975, 888]
|
||||
},
|
||||
{
|
||||
"name": "青海",
|
||||
"value": [101.778916, 36.623178, 666]
|
||||
},
|
||||
{
|
||||
"name": "宁夏回族自治区",
|
||||
"value": [106.278179, 38.46637, 66]
|
||||
},
|
||||
{
|
||||
"name": "哈尔滨市",
|
||||
"value": [126.642464, 45.756967, 101]
|
||||
}
|
||||
],
|
||||
"map": [
|
||||
{
|
||||
"name": "北京市",
|
||||
"value": 666
|
||||
},
|
||||
{
|
||||
"name": "河北省",
|
||||
"value": 98
|
||||
},
|
||||
|
||||
{
|
||||
"name": "江苏省",
|
||||
"value": 300
|
||||
},
|
||||
{
|
||||
"name": "福建省",
|
||||
"value": 1199
|
||||
},
|
||||
{
|
||||
"name": "山东省",
|
||||
"value": 86
|
||||
},
|
||||
{
|
||||
"name": "河南省",
|
||||
"value": 850
|
||||
},
|
||||
{
|
||||
"name": "湖北省",
|
||||
"value": 84
|
||||
},
|
||||
{
|
||||
"name": "广西壮族自治区",
|
||||
"value": 81
|
||||
},
|
||||
{
|
||||
"name": "海南省",
|
||||
"value": 900
|
||||
},
|
||||
{
|
||||
"name": "青海省",
|
||||
"value": 800
|
||||
},
|
||||
{
|
||||
"name": "新疆维吾尔自治区",
|
||||
"value": 7
|
||||
}
|
||||
],
|
||||
"pieces": [
|
||||
{ "gte": 1000, "label": ">1000" },
|
||||
{ "gte": 600, "lte": 999, "label": "600-999" },
|
||||
{ "gte": 200, "lte": 599, "label": "200-599" },
|
||||
{ "gte": 50, "lte": 199, "label": "49-199" },
|
||||
{ "gte": 10, "lte": 49, "label": "10-49" },
|
||||
{ "lte": 9, "label": "<9" }
|
||||
]
|
||||
}
|
||||
15
src/packages/components/Charts/Maps/MapBase/index.ts
Normal file
15
src/packages/components/Charts/Maps/MapBase/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import image from '@/assets/images/chart/charts/map.png'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const MapBaseConfig: ConfigType = {
|
||||
key: 'MapBase',
|
||||
chartKey: 'VMapBase',
|
||||
conKey: 'VCMapBase',
|
||||
title: '地图(可选省份)',
|
||||
category: ChatCategoryEnum.MAP,
|
||||
categoryName: ChatCategoryEnumName.MAP,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
137
src/packages/components/Charts/Maps/MapBase/index.vue
Normal file
137
src/packages/components/Charts/Maps/MapBase/index.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, reactive, watch, ref, nextTick } from 'vue'
|
||||
import config, { includes } from './config'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use, registerMap } from 'echarts/core'
|
||||
import { EffectScatterChart, MapChart } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
MapChart,
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
GeoComponent,
|
||||
EffectScatterChart,
|
||||
VisualMapComponent
|
||||
])
|
||||
|
||||
const option = reactive({
|
||||
value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
|
||||
//动态获取json注册地图
|
||||
const getGeojson = (regionId: string) => {
|
||||
return new Promise<boolean>(resolve => {
|
||||
import(`./mapGeojson/${regionId}.json`).then(data => {
|
||||
registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
|
||||
resolve(true)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
//异步时先注册空的 保证初始化不报错
|
||||
registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
|
||||
|
||||
// 进行更换初始化地图
|
||||
const registerMapInitAsync = async () => {
|
||||
await nextTick()
|
||||
await getGeojson(props.chartConfig.option.mapRegion.adcode)
|
||||
vEchartsSetOption()
|
||||
}
|
||||
registerMapInitAsync()
|
||||
|
||||
// 手动触发渲染
|
||||
const vEchartsSetOption = () => {
|
||||
option.value = props.chartConfig.option
|
||||
vChartRef.value?.setOption(props.chartConfig.option)
|
||||
}
|
||||
|
||||
// 更新数据处理
|
||||
const dataSetHandle = async (dataset: any) => {
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
|
||||
else if (item.type === 'map' && dataset.map) item.data = dataset.map
|
||||
})
|
||||
if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
|
||||
|
||||
isPreview() && vEchartsSetOption()
|
||||
}
|
||||
|
||||
//监听 dataset 数据发生变化
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
dataSetHandle(newData)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
//监听是否显示南海群岛
|
||||
watch(
|
||||
() => props.chartConfig.option.mapRegion.showHainanIsLands,
|
||||
async newData => {
|
||||
if (newData) {
|
||||
await getGeojson('china')
|
||||
} else {
|
||||
registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
|
||||
}
|
||||
vEchartsSetOption()
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
//监听地图展示区域发生变化
|
||||
watch(
|
||||
() => props.chartConfig.option.mapRegion.adcode,
|
||||
async newData => {
|
||||
await getGeojson(newData)
|
||||
props.chartConfig.option.geo.map = newData
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'map') item.map = newData
|
||||
})
|
||||
vEchartsSetOption()
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":710000,"name":"台湾省","center":[121.509062,25.044332],"centroid":[120.971485,23.749452],"childrenNum":0,"level":"province","acroutes":[100000],"parent":{"adcode":100000}},"geometry":{"type":"MultiPolygon","coordinates":[[[[120.443558,22.441245],[120.517584,22.408536],[120.569903,22.361728],[120.640505,22.241347],[120.659209,22.15432],[120.662001,22.066983],[120.651464,22.033165],[120.667691,21.983168],[120.70157,21.927065],[120.743246,21.915569],[120.78155,21.923957],[120.85468,21.883333],[120.87291,21.897387],[120.866482,21.98436],[120.907315,22.033208],[120.904154,22.119757],[120.914955,22.302718],[120.981658,22.528305],[121.015009,22.584168],[121.033292,22.650725],[121.078498,22.669656],[121.170544,22.723133],[121.210481,22.770665],[121.237931,22.836327],[121.324708,22.945666],[121.354687,23.01006],[121.370388,23.084347],[121.409535,23.102669],[121.430294,23.137196],[121.415015,23.195973],[121.440358,23.272096],[121.479558,23.3223],[121.497788,23.419789],[121.521497,23.483198],[121.523078,23.538708],[121.587778,23.76102],[121.621604,23.92075],[121.659381,24.006893],[121.639992,24.064276],[121.643838,24.097713],[121.678085,24.133906],[121.689044,24.174401],[121.809172,24.339055],[121.826717,24.423579],[121.867498,24.478978],[121.885464,24.529677],[121.892524,24.617912],[121.862598,24.671515],[121.837993,24.76015],[121.845053,24.836269],[121.932883,24.938645],[122.012178,25.001469],[121.980776,25.03079],[121.947425,25.031955],[121.917077,25.137908],[121.842155,25.135332],[121.782407,25.160425],[121.750531,25.160716],[121.707327,25.191493],[121.700319,25.226913],[121.655324,25.241859],[121.623026,25.294694],[121.584986,25.308926],[121.535038,25.307515],[121.444415,25.270624],[121.413487,25.238912],[121.371864,25.159885],[121.319281,25.140691],[121.209322,25.127104],[121.133135,25.078728],[121.102102,25.075153],[121.024704,25.040479],[121.009688,24.993649],[120.960899,24.940227],[120.908475,24.852012],[120.892299,24.767526],[120.823753,24.688321],[120.762371,24.658335],[120.688661,24.600678],[120.64277,24.490172],[120.589187,24.432354],[120.546299,24.370413],[120.521009,24.312038],[120.470534,24.24259],[120.451461,24.182691],[120.392029,24.11824],[120.316158,23.984881],[120.278276,23.927798],[120.245768,23.840553],[120.175377,23.807385],[120.102773,23.700981],[120.094817,23.587466],[120.121741,23.504664],[120.107831,23.341264],[120.081434,23.29191],[120.018947,23.073115],[120.029537,23.048623],[120.131382,23.002118],[120.149138,22.896715],[120.200403,22.721101],[120.274272,22.560181],[120.297191,22.531315],[120.443558,22.441245]]],[[[124.542984,25.903911],[124.586346,25.913777],[124.572805,25.93974],[124.541825,25.931031],[124.542984,25.903911]]],[[[123.445286,25.725966],[123.472104,25.713024],[123.508933,25.723237],[123.514834,25.751226],[123.483063,25.768587],[123.444496,25.746514],[123.445286,25.725966]]],[[[119.64597,23.55091],[119.701081,23.550657],[119.678057,23.600041],[119.610089,23.603953],[119.594388,23.577245],[119.566306,23.584732],[119.562565,23.530377],[119.573788,23.505885],[119.609141,23.503864],[119.64597,23.55091]]],[[[123.667207,25.914066],[123.707092,25.916873],[123.678008,25.938667],[123.667207,25.914066]]],[[[119.506031,23.625567],[119.505241,23.575814],[119.472416,23.557136],[119.523207,23.563699],[119.525578,23.624895],[119.506031,23.625567]]],[[[119.49739,23.386683],[119.495125,23.350156],[119.516885,23.349903],[119.49739,23.386683]]],[[[119.557454,23.666474],[119.604083,23.616989],[119.615516,23.660925],[119.586485,23.675974],[119.557454,23.666474]]],[[[121.46823,22.676644],[121.476502,22.64166],[121.513541,22.631833],[121.5147,22.67639],[121.46823,22.676644]]],[[[121.510538,22.087185],[121.507693,22.048523],[121.534089,22.022146],[121.594522,21.995382],[121.604586,22.022699],[121.575028,22.037122],[121.575607,22.084421],[121.510538,22.087185]]],[[[122.097533,25.500168],[122.093581,25.47183],[122.124825,25.475932],[122.097533,25.500168]]],[[[119.421467,23.216684],[119.421309,23.18935],[119.453396,23.217697],[119.421467,23.216684]]],[[[120.355042,22.327259],[120.395454,22.342287],[120.383072,22.355573],[120.355042,22.327259]]]]}}]}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@
|
||||
{
|
||||
"type":"FeatureCollection",
|
||||
"features":[]
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { MapChinaConfig } from './index'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = []
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
},
|
||||
geo: {
|
||||
show: false,
|
||||
type: 'map',
|
||||
roam: false,
|
||||
map: 'china'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize: 6,
|
||||
zlevel: 1,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
color: '#00ECC8'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '地图',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zoom: 1, //缩放
|
||||
itemStyle: {
|
||||
// 背景色
|
||||
areaColor: 'rgba(117, 236, 170, 0.3)',
|
||||
emphasis: {
|
||||
areaColor: 'rgba(117, 236, 170, .8)',
|
||||
borderWidth: 1,
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#75ecaa'
|
||||
},
|
||||
color: '#ffffff',
|
||||
borderColor: '#75ecaa',
|
||||
borderWidth: 1,
|
||||
showHainanIsLands: true // 是否显示南海群岛
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#ffffff'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = MapChinaConfig.key
|
||||
public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
|
||||
public chartConfig = MapChinaConfig
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem name="地图" :expanded="true">
|
||||
<SettingItemBox name="省份" :alone="true">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦颜色（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦阴影（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="边框">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.borderWidth"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入边框大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="其他">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="标记" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
@ -1,146 +0,0 @@
|
||||
{
|
||||
"point": [
|
||||
{
|
||||
"name": "北京",
|
||||
"value": [116.2, 39.56, 1000]
|
||||
}
|
||||
],
|
||||
"map": [
|
||||
{
|
||||
"name": "北京市",
|
||||
"value": 100
|
||||
},
|
||||
{
|
||||
"name": "天津市",
|
||||
"value": 99
|
||||
},
|
||||
{
|
||||
"name": "河北省",
|
||||
"value": 98
|
||||
},
|
||||
{
|
||||
"name": "山西省",
|
||||
"value": 97
|
||||
},
|
||||
{
|
||||
"name": "内蒙古自治区",
|
||||
"value": 96
|
||||
},
|
||||
{
|
||||
"name": "辽宁省",
|
||||
"value": 95
|
||||
},
|
||||
{
|
||||
"name": "吉林省",
|
||||
"value": 94
|
||||
},
|
||||
{
|
||||
"name": "黑龙江省",
|
||||
"value": 93
|
||||
},
|
||||
{
|
||||
"name": "上海市",
|
||||
"value": 92
|
||||
},
|
||||
{
|
||||
"name": "江苏省",
|
||||
"value": 91
|
||||
},
|
||||
{
|
||||
"name": "浙江省",
|
||||
"value": 90
|
||||
},
|
||||
{
|
||||
"name": "安徽省",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"name": "福建省",
|
||||
"value": 88
|
||||
},
|
||||
{
|
||||
"name": "江西省",
|
||||
"value": 87
|
||||
},
|
||||
{
|
||||
"name": "山东省",
|
||||
"value": 86
|
||||
},
|
||||
{
|
||||
"name": "河南省",
|
||||
"value": 85
|
||||
},
|
||||
{
|
||||
"name": "湖北省",
|
||||
"value": 84
|
||||
},
|
||||
{
|
||||
"name": "湖南省",
|
||||
"value": 83
|
||||
},
|
||||
{
|
||||
"name": "广东省",
|
||||
"value": 82
|
||||
},
|
||||
{
|
||||
"name": "广西壮族自治区",
|
||||
"value": 81
|
||||
},
|
||||
{
|
||||
"name": "海南省",
|
||||
"value": 80
|
||||
},
|
||||
{
|
||||
"name": "重庆市",
|
||||
"value": 79
|
||||
},
|
||||
{
|
||||
"name": "四川省",
|
||||
"value": 78
|
||||
},
|
||||
{
|
||||
"name": "贵州省",
|
||||
"value": 77
|
||||
},
|
||||
{
|
||||
"name": "云南省",
|
||||
"value": 76
|
||||
},
|
||||
{
|
||||
"name": "西藏自治区",
|
||||
"value": 75
|
||||
},
|
||||
{
|
||||
"name": "陕西省",
|
||||
"value": 74
|
||||
},
|
||||
{
|
||||
"name": "甘肃省",
|
||||
"value": 73
|
||||
},
|
||||
{
|
||||
"name": "青海省",
|
||||
"value": 72
|
||||
},
|
||||
{
|
||||
"name": "宁夏回族自治区",
|
||||
"value": 71
|
||||
},
|
||||
{
|
||||
"name": "新疆维吾尔自治区",
|
||||
"value": 70
|
||||
},
|
||||
{
|
||||
"name": "台湾省",
|
||||
"value": 69
|
||||
},
|
||||
{
|
||||
"name": "香港特别行政区",
|
||||
"value": 68
|
||||
},
|
||||
{
|
||||
"name": "澳门特别行政区",
|
||||
"value": 67
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import image from '@/assets/images/chart/charts/map.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const MapChinaConfig: ConfigType = {
|
||||
key: 'MapChina',
|
||||
chartKey: 'VMapChina',
|
||||
conKey: 'VCMapChina',
|
||||
title: '地图',
|
||||
category: ChatCategoryEnum.MAP,
|
||||
categoryName: ChatCategoryEnumName.MAP,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, reactive, watch } from 'vue'
|
||||
import config, { includes } from './config'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use, registerMap } from 'echarts/core'
|
||||
import { EffectScatterChart, MapChart } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import mapJson from './map.json'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GeoComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
MapChart,
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GeoComponent,
|
||||
EffectScatterChart
|
||||
])
|
||||
|
||||
registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
|
||||
|
||||
const option = reactive({
|
||||
value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const dataSetHandle = (dataset: any) => {
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
|
||||
else if (item.type === 'map' && dataset.point) item.data = dataset.map
|
||||
option.value = props.chartConfig.option
|
||||
})
|
||||
}
|
||||
|
||||
const mapTypeHandle = (show: boolean) => {
|
||||
show
|
||||
? registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
|
||||
: registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.series[1].itemStyle.showHainanIsLands,
|
||||
newData => {
|
||||
mapTypeHandle(newData)
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
dataSetHandle(newData)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,3 @@
|
||||
import { MapChinaConfig } from './MapChina/index'
|
||||
import { MapBaseConfig } from './MapBase/index'
|
||||
|
||||
export default [MapChinaConfig]
|
||||
export default [ MapBaseConfig ]
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
</div>
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
@ -13,12 +11,11 @@ import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option & GlobalThemeJsonType>,
|
||||
required: true
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const heatMapConfig = computed<typeof option>(() => {
|
||||
return props.optionData
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
27
src/packages/components/Charts/Mores/TreeMap/config.ts
Normal file
27
src/packages/components/Charts/Mores/TreeMap/config.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { TreeMapConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = []
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
series: [
|
||||
{
|
||||
name: 'treemap',
|
||||
type: 'treemap',
|
||||
leafDepth: 1,
|
||||
roam: false,
|
||||
data: dataJson
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TreeMapConfig.key
|
||||
public chartConfig = cloneDeep(TreeMapConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -1,6 +1,17 @@
|
||||
<template>
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option & GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
50
src/packages/components/Charts/Mores/TreeMap/data.json
Normal file
50
src/packages/components/Charts/Mores/TreeMap/data.json
Normal file
@ -0,0 +1,50 @@
|
||||
[
|
||||
{
|
||||
"name": "nodeA",
|
||||
"value": 10,
|
||||
"children": [
|
||||
{
|
||||
"name": "nodeAa",
|
||||
"value": 4
|
||||
},
|
||||
{
|
||||
"name": "nodeAb",
|
||||
"value": 6
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "nodeA",
|
||||
"value": 10,
|
||||
"children": [
|
||||
{
|
||||
"name": "nodeAa",
|
||||
"value": 4
|
||||
},
|
||||
{
|
||||
"name": "nodeAb",
|
||||
"value": 6
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "nodeB",
|
||||
"value": 20,
|
||||
"children": [
|
||||
{
|
||||
"name": "nodeba",
|
||||
"value": 20
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "nodeC",
|
||||
"value": 20,
|
||||
"children": [
|
||||
{
|
||||
"name": "nodeca",
|
||||
"value": 20
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -1,5 +1,5 @@
|
||||
import image from '@/assets/images/chart/charts/tree_map.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const TreeMapConfig: ConfigType = {
|
||||
@ -10,5 +10,6 @@ export const TreeMapConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
|
||||
@ -1,13 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
水波
|
||||
</div>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, PropType, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { TreemapChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
use([CanvasRenderer, TreemapChart])
|
||||
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
if (dataset) {
|
||||
props.chartConfig.option.series[0].data = dataset
|
||||
vChartRef.value?.setOption(props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
dataSetHandle(newData)
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -12,7 +12,7 @@ import { mergeTheme } from '@/packages/public/chart'
|
||||
import config, { includes } from './config'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -29,7 +29,7 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
|
||||
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const option = reactive({
|
||||
value: {}
|
||||
|
||||
@ -5,13 +5,26 @@ import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend']
|
||||
|
||||
export enum PieTypeEnum {
|
||||
NORMAL = '常规图',
|
||||
RING = '环形图',
|
||||
ROSE = '玫瑰图'
|
||||
}
|
||||
|
||||
export const PieTypeObject = {
|
||||
[PieTypeEnum.NORMAL]: 'nomal',
|
||||
[PieTypeEnum.RING]: 'ring',
|
||||
[PieTypeEnum.ROSE]: 'rose'
|
||||
}
|
||||
|
||||
const option = {
|
||||
type: 'ring',
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
show: true
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
@ -19,6 +32,7 @@ const option = {
|
||||
type: 'pie',
|
||||
radius: ['40%', '65%'],
|
||||
center: ['50%', '60%'],
|
||||
roseType: false,
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
show: true,
|
||||
|
||||
@ -1,12 +1,20 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem name="饼图配置" :expanded="true">
|
||||
<SettingItemBox name="类型">
|
||||
<SettingItem>
|
||||
<n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { PropType, watch } from 'vue'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { PieTypeObject, PieTypeEnum } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
@ -14,4 +22,18 @@ const props = defineProps({
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const fontWeightOptions = [
|
||||
{
|
||||
label: PieTypeEnum.NORMAL,
|
||||
value: PieTypeObject[PieTypeEnum.NORMAL]
|
||||
},
|
||||
{
|
||||
label: PieTypeEnum.RING,
|
||||
value: PieTypeObject[PieTypeEnum.RING]
|
||||
},
|
||||
{
|
||||
label: PieTypeEnum.ROSE,
|
||||
value: PieTypeObject[PieTypeEnum.ROSE]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import { computed, PropType, reactive, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
@ -13,12 +13,7 @@ import config, { includes } from './config'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -35,19 +30,28 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
PieChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
])
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.type,
|
||||
newData => {
|
||||
if (newData === 'nomal') {
|
||||
props.chartConfig.option.series[0].radius = '70%'
|
||||
props.chartConfig.option.series[0].roseType = false
|
||||
} else if (newData === 'ring') {
|
||||
props.chartConfig.option.series[0].radius = ['40%', '65%']
|
||||
props.chartConfig.option.series[0].roseType = false
|
||||
} else {
|
||||
props.chartConfig.option.series[0].radius = '70%'
|
||||
props.chartConfig.option.series[0].roseType = true
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
|
||||
@ -2,16 +2,18 @@ import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Decorates03Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
export const option = {
|
||||
dataset: '我是标题',
|
||||
textColor: '#fff',
|
||||
textSize: 32,
|
||||
colors: ['#1dc1f5', '#1dc1f5'],
|
||||
colors: ['#1dc1f5', '#1dc1f5']
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Decorates03Config.key
|
||||
public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(Decorates03Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Decorates06Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
colors: ['#1DC1F533', '#1DC1F5FF'],
|
||||
dataset: '我是标题',
|
||||
textColor: '#fff',
|
||||
textSize: 32
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = Decorates06Config.key
|
||||
public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(Decorates06Config)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<CollapseItem name="内容" expanded>
|
||||
<SettingItemBox name="文字" alone>
|
||||
<SettingItem>
|
||||
<n-input v-model:value="optionData.dataset" size="small"></n-input>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="optionData.textSize" size="small" :min="12"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
|
||||
<CollapseItem name="样式" expanded>
|
||||
<SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colors" :key="index">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colors[index]"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button size="small" @click="optionData.colors[index] = option.colors[index]"> 恢复默认 </n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
import image from '@/assets/images/chart/decorates/decorates06.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Decorates06Config: ConfigType = {
|
||||
key: 'Decorates06',
|
||||
chartKey: 'VDecorates06',
|
||||
conKey: 'VCDecorates06',
|
||||
title: '装饰-06',
|
||||
category: ChatCategoryEnum.DECORATE,
|
||||
categoryName: ChatCategoryEnumName.DECORATE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="go-border-06">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :width="w" :height="h">
|
||||
<polygon class="stroke fill" :points="`15.5 6.5 20.5 0.5 50.5 0.5 55.5 6.5 15.5 6.5`" />
|
||||
<polygon
|
||||
class="stroke fill"
|
||||
:points="`15.5 ${h - 6.5} 20.5 ${h - 0.5} 50.5 ${h - 0.5} 55.5 ${h - 6.5} 15.5 ${h - 6.5}`"
|
||||
/>
|
||||
<polygon
|
||||
class="stroke fill"
|
||||
:points="`${w - 15.5} 6.5 ${w - 20.5} 0.5 ${w - 50.5} 0.5 ${w - 55.5} 6.5 ${w - 15.5} 6.5`"
|
||||
/>
|
||||
<polygon
|
||||
class="stroke fill"
|
||||
:points="`${w - 15.5} ${h - 6.5} ${w - 20.5} ${h - 0.5} ${w - 50.5} ${h - 0.5} ${w - 55.5} ${h - 6.5} ${
|
||||
w - 15.5
|
||||
} ${h - 6.5}`"
|
||||
/>
|
||||
<polygon
|
||||
class="stroke fill"
|
||||
:points="`15.5 6.5 0.5 ${h / 2} 15.5 ${h - 6.5} ${w - 15.5} ${h - 6.5} ${w - 0.5} ${h / 2} ${
|
||||
w - 15.5
|
||||
} 6.5 15.5 6.5`"
|
||||
/>
|
||||
<polyline class="stroke fill-none" :points="`20.5 14.5 8.5 ${h / 2} 20.5 ${h - 14.5}`" />
|
||||
<polyline class="stroke fill-none" :points="`${w - 20.5} 14.5 ${w - 8.5} ${h / 2} ${w - 20.5} ${h - 14.5}`" />
|
||||
</svg>
|
||||
<span class="text">{{ dataset }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { getUUID } from '@/utils'
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const id = getUUID()
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { colors, dataset, textSize, textColor } = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('border-06') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.fill {
|
||||
fill: v-bind('colors[0]');
|
||||
}
|
||||
.fill-none {
|
||||
fill: none;
|
||||
}
|
||||
.stroke {
|
||||
stroke: v-bind('colors[1]');
|
||||
}
|
||||
|
||||
.text {
|
||||
color: v-bind('textColor');
|
||||
font-size: v-bind('textSize+"px"');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,6 +3,7 @@ import { Decorates02Config } from './Decorates02/index'
|
||||
import { Decorates03Config } from './Decorates03/index'
|
||||
import { Decorates04Config } from './Decorates04/index'
|
||||
import { Decorates05Config } from './Decorates05/index'
|
||||
import { Decorates06Config } from './Decorates06/index'
|
||||
|
||||
export default [
|
||||
Decorates01Config,
|
||||
@ -10,4 +11,5 @@ export default [
|
||||
Decorates03Config,
|
||||
Decorates04Config,
|
||||
Decorates05Config,
|
||||
Decorates06Config
|
||||
]
|
||||
|
||||
17
src/packages/components/Decorates/Mores/Clock/config.ts
Normal file
17
src/packages/components/Decorates/Mores/Clock/config.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ClockConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
border: 6,
|
||||
color: '#ffffff',
|
||||
bgColor: '#84a5e9',
|
||||
borderColor: '#ffffff'
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ClockConfig.key
|
||||
public chartConfig = cloneDeep(ClockConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
33
src/packages/components/Decorates/Mores/Clock/config.vue
Normal file
33
src/packages/components/Decorates/Mores/Clock/config.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<CollapseItem name="时钟" expanded>
|
||||
<SettingItemBox name="表盘">
|
||||
<SettingItem name="背景色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.bgColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="边框色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="边框大小">
|
||||
<n-input-number v-model:value="optionData.border" size="small" :step="0.5" :min="0"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="指针">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
15
src/packages/components/Decorates/Mores/Clock/index.ts
Normal file
15
src/packages/components/Decorates/Mores/Clock/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import image from '@/assets/images/chart/decorates/clock.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const ClockConfig: ConfigType = {
|
||||
key: 'Clock',
|
||||
chartKey: 'VClock',
|
||||
conKey: 'VCClock',
|
||||
title: '时钟',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
chartFrame: ChartFrameEnum.STATIC,
|
||||
image
|
||||
}
|
||||
102
src/packages/components/Decorates/Mores/Clock/index.vue
Normal file
102
src/packages/components/Decorates/Mores/Clock/index.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :viewBox="`0 0 200 200`">
|
||||
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
|
||||
<feOffset in="blur" dx="2.5" dy="2.5" />
|
||||
</filter>
|
||||
|
||||
<!-- 表盘 -->
|
||||
<g>
|
||||
<circle id="shadow" style="fill: rgba(0, 0, 0, 0.1)" cx="100" cy="100" r="87" filter="url(#innerShadow)"></circle>
|
||||
<circle id="circle" class="clock-border" cx="100" cy="100" r="80"></circle>
|
||||
</g>
|
||||
|
||||
<!-- 指针 -->
|
||||
<g>
|
||||
<line x1="100" y1="100" x2="100" y2="55" style="stroke-width: 3px" class="clock-line">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
attributeType="XML"
|
||||
type="rotate"
|
||||
dur="43200s"
|
||||
repeatCount="indefinite"
|
||||
:from="`${hoursAngle} 100 100`"
|
||||
:to="`${hoursAngle + 360} 100 100`"
|
||||
/>
|
||||
</line>
|
||||
<line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px" class="clock-line">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
attributeType="XML"
|
||||
type="rotate"
|
||||
dur="3600s"
|
||||
repeatCount="indefinite"
|
||||
:from="`${minuteAngle} 100 100`"
|
||||
:to="`${minuteAngle + 360} 100 100`"
|
||||
/>
|
||||
</line>
|
||||
<line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px" class="clock-line">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
attributeType="XML"
|
||||
type="rotate"
|
||||
dur="60s"
|
||||
repeatCount="indefinite"
|
||||
:from="`${secAngle} 100 100`"
|
||||
:to="`${secAngle + 360} 100 100`"
|
||||
/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- 中心圆点 -->
|
||||
<circle id="center" style="fill: #128a86; stroke: #c1efed; stroke-width: 2px" cx="100" cy="100" r="3"></circle>
|
||||
|
||||
<!-- 刻度线 -->
|
||||
<line
|
||||
x1="100"
|
||||
y1="30"
|
||||
x2="100"
|
||||
y2="40"
|
||||
class="clock-line"
|
||||
:transform="`rotate(${((num + 1) * 360) / 12} 100 100)`"
|
||||
v-for="num in 12"
|
||||
:key="`line_${num + 1}`"
|
||||
></line>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType & typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
let { border, color, bgColor, borderColor } = toRefs(props.chartConfig.option)
|
||||
|
||||
const date = new Date()
|
||||
const hoursAngle = (360 * date.getHours()) / 12 + date.getMinutes() / 2
|
||||
const minuteAngle = (360 * date.getMinutes()) / 60
|
||||
const secAngle = (360 * date.getSeconds()) / 60
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.clock-border {
|
||||
stroke: v-bind('borderColor');
|
||||
stroke-width: v-bind('border+"px"');
|
||||
fill: v-bind('bgColor');
|
||||
}
|
||||
.clock-line {
|
||||
stroke: v-bind('color') !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,5 @@
|
||||
import { NumberConfig } from './Number/index'
|
||||
import { TimeCommonConfig } from './TimeCommon/index'
|
||||
import { ClockConfig } from './Clock/index'
|
||||
|
||||
export default [TimeCommonConfig, NumberConfig]
|
||||
export default [TimeCommonConfig, NumberConfig, ClockConfig]
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import image from '@/assets/images/chart/informations/photo.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const ImageConfig: ConfigType = {
|
||||
@ -10,5 +10,6 @@ export const ImageConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
import image from '@/assets/images/chart/informations/words_cloud.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const TextCloudConfig: ConfigType = {
|
||||
key: 'TextCloud',
|
||||
chartKey: 'VTextCloud',
|
||||
conKey: 'VCTextCloud',
|
||||
title: '词云',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
image
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
词云
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
24
src/packages/components/Informations/Mores/Video/config.ts
Normal file
24
src/packages/components/Informations/Mores/Video/config.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { VideoConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import video from '@/assets/videos/earth.mp4'
|
||||
|
||||
export const option = {
|
||||
// 视频路径
|
||||
dataset: video,
|
||||
// 循环播放
|
||||
loop: true,
|
||||
// 静音
|
||||
muted: true,
|
||||
// 适应方式
|
||||
fit: 'contain',
|
||||
// 圆角
|
||||
borderRadius: 10
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = VideoConfig.key
|
||||
public chartConfig = cloneDeep(VideoConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
63
src/packages/components/Informations/Mores/Video/config.vue
Normal file
63
src/packages/components/Informations/Mores/Video/config.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<!-- eslint-disable vue/no-mutating-props -->
|
||||
<template>
|
||||
<collapse-item name="视频" expanded>
|
||||
<setting-item-box name="源" alone>
|
||||
<setting-item name="自定义源">
|
||||
<n-input v-model:value="optionData.dataset" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="控制">
|
||||
<setting-item>
|
||||
<n-checkbox v-model:checked="optionData.loop" size="small">循环播放</n-checkbox>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-checkbox v-model:checked="optionData.muted" size="small">静音</n-checkbox>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="样式">
|
||||
<setting-item name="类型">
|
||||
<n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
// 适应类型
|
||||
const fitList = [
|
||||
{
|
||||
value: 'fill',
|
||||
label: 'fill'
|
||||
},
|
||||
{
|
||||
value: 'contain',
|
||||
label: 'contain'
|
||||
},
|
||||
{
|
||||
value: 'cover',
|
||||
label: 'cover'
|
||||
},
|
||||
{
|
||||
value: 'scale-down',
|
||||
label: 'scale-down'
|
||||
},
|
||||
{
|
||||
value: 'none',
|
||||
label: 'none'
|
||||
}
|
||||
]
|
||||
|
||||
defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
15
src/packages/components/Informations/Mores/Video/index.ts
Normal file
15
src/packages/components/Informations/Mores/Video/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import image from '@/assets/images/chart/informations/video.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const VideoConfig: ConfigType = {
|
||||
key: 'Video',
|
||||
chartKey: 'VVideo',
|
||||
conKey: 'VCVideo',
|
||||
title: '视频',
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image
|
||||
}
|
||||
65
src/packages/components/Informations/Mores/Video/index.vue
Normal file
65
src/packages/components/Informations/Mores/Video/index.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<template>
|
||||
<!-- 重要：需要设置 crossOrigin="anonymous"，否则保存画板缩略图会失败 -->
|
||||
<video
|
||||
ref="vVideoRef"
|
||||
class="go-video"
|
||||
preload="auto"
|
||||
crossOrigin="anonymous"
|
||||
playsinline
|
||||
autoplay
|
||||
:loop="option.loop"
|
||||
:muted="option.muted"
|
||||
:width="w"
|
||||
:height="h"
|
||||
:src="option.dataset"
|
||||
></video>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { option as configOption } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
let option = shallowReactive({ ...configOption })
|
||||
|
||||
// 预览更新
|
||||
const vVideoRef = ref(null)
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
option = newData
|
||||
})
|
||||
|
||||
// 编辑更新
|
||||
watch(
|
||||
() => props.chartConfig.option,
|
||||
(newData: any) => {
|
||||
option = newData
|
||||
if (!vVideoRef.value) return
|
||||
const video: any = vVideoRef.value
|
||||
video.loop = option.loop
|
||||
video.muted = option.muted
|
||||
video.play()
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('video') {
|
||||
display: block;
|
||||
object-fit: v-bind('option.fit');
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { WordCloudConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = []
|
||||
|
||||
export const ShapeEnumList = [
|
||||
{ label: '圆形', value: 'circle' },
|
||||
{ label: '心形', value: 'cardioid' },
|
||||
{ label: '钻石', value: 'diamond' },
|
||||
{ label: '右三角形', value: 'triangle-forward' },
|
||||
{ label: '三角形', value: 'triangle' },
|
||||
{ label: '五边形', value: 'pentagon' },
|
||||
{ label: '星星', value: 'star' }
|
||||
]
|
||||
|
||||
export const option = {
|
||||
dataset: [...dataJson],
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: 'wordCloud',
|
||||
|
||||
// “云”绘制的形状，可以是表示为回调函数，也可以是固定关键字。
|
||||
// 可用值有：circle|cardioid|diamond|triangle-forward|triangle|pentagon|star
|
||||
shape: 'circle',
|
||||
|
||||
// 白色区域将被排除在绘制文本之外的剪影图像。
|
||||
// 随着云的形状生长，形状选项将继续应用。
|
||||
// maskImage: maskImage,
|
||||
|
||||
// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
|
||||
// Default to be put in the center and has 75% x 80% size.
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
width: '70%',
|
||||
height: '80%',
|
||||
right: null,
|
||||
bottom: null,
|
||||
|
||||
// 文本大小范围，默认 [12,60]
|
||||
sizeRange: [12, 60],
|
||||
|
||||
// 文本旋转范围和程度的步骤。 文本将通过旋转步骤45在[-90，90]中随机旋转
|
||||
rotationRange: [0, 0],
|
||||
rotationStep: 0,
|
||||
|
||||
// size of the grid in pixels for marking the availability of the canvas
|
||||
// 网格大小越大，单词之间的差距就越大。
|
||||
gridSize: 8,
|
||||
|
||||
// 设置为true，以允许单词在画布之外部分地绘制。允许绘制大于画布的大小
|
||||
drawOutOfBound: false,
|
||||
|
||||
// If perform layout animation.
|
||||
// NOTE disable it will lead to UI blocking when there is lots of words.
|
||||
layoutAnimation: true,
|
||||
|
||||
// Global text style
|
||||
textStyle: {
|
||||
fontFamily: 'sans-serif',
|
||||
fontWeight: 'bold'
|
||||
// 颜色可以是回调功能或颜色字符串
|
||||
// color: function () {
|
||||
// // 随机颜色
|
||||
// return (
|
||||
// 'rgb(' +
|
||||
// [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(
|
||||
// ','
|
||||
// ) +
|
||||
// ')'
|
||||
// )
|
||||
// }
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'self',
|
||||
|
||||
textStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333'
|
||||
}
|
||||
},
|
||||
data: [...dataJson]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = WordCloudConfig.key
|
||||
public chartConfig = cloneDeep(WordCloudConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user