Compare commits
24 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
796c844df7 | ||
|
|
85aa2d8283 | ||
|
|
a4cd1f31b5 | ||
|
|
5588205d8d | ||
|
|
def75f0948 | ||
|
|
a93fd3c036 | ||
|
|
1f856d3631 | ||
|
|
6a83cfa7b0 | ||
|
|
eedd2ecf9d | ||
|
|
eba9489077 | ||
|
|
2e5601f0ba | ||
|
|
da8e0bb6f2 | ||
|
|
78e1d3ffe4 | ||
|
|
02b423e620 | ||
|
|
78c63298d7 | ||
|
|
3e641e4bab | ||
|
|
6ef2bd6b93 | ||
|
|
c408cf8e1d | ||
|
|
b50326e3c2 | ||
|
|
624de4fdb5 | ||
|
|
856d7d1de3 | ||
|
|
77a129788f | ||
|
|
4f21020d24 | ||
|
|
31636964ad |
43
README.md
@@ -1,6 +1,6 @@
|
||||
<p align="center">
|
||||
<a
|
||||
href="https://www.goviewlink.com?channel=mayun"
|
||||
href="https://ai.goviewlink.com/?channel=mayun"
|
||||
target="_blank"
|
||||
style="
|
||||
padding: 10px 20px;
|
||||
@@ -92,7 +92,44 @@
|
||||
background: #f9f9f9;
|
||||
">
|
||||
<img src="readme/sponsors/mdy-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
|
||||
</a>
|
||||
</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<a
|
||||
href="https://iotdoc.sagoo.cn/"
|
||||
target="_blank"
|
||||
style="
|
||||
padding: 10px 20px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
background: #f9f9f9;
|
||||
">
|
||||
<img src="readme/sponsors/shaguo-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
|
||||
</a>
|
||||
<a
|
||||
href="http://www.yunchengxc.com/"
|
||||
target="_blank"
|
||||
style="
|
||||
padding: 10px 20px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
background: #f9f9f9;
|
||||
">
|
||||
<img src="readme/sponsors/yuncheng-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
|
||||
</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<a
|
||||
href="https://www.diboot.com?from=gv/"
|
||||
target="_blank"
|
||||
style="
|
||||
padding: 10px 20px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
background: #f9f9f9;
|
||||
">
|
||||
<img src="readme/sponsors/diboot-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +250,7 @@ Cloud IDE 代码在线预览地址:[https://idegitee.com/dromara/go-view](http
|
||||
|
||||
## 交流群
|
||||
|
||||
QQ 群:881415392
|
||||
QQ 群:647239611
|
||||
|
||||
<img width="260px" src="readme/go-view-qq.jpg" alt="QQ群" style="border-radius: 20px" />
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "go-view",
|
||||
"version": "1.2.9",
|
||||
"version": "1.3.1",
|
||||
"engines": {
|
||||
"node": ">=12.0"
|
||||
},
|
||||
@@ -16,6 +16,7 @@
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@amap/amap-jsapi-types": "^0.0.8",
|
||||
"@iconify/json": "^2.2.158",
|
||||
"@types/color": "^3.0.3",
|
||||
"@types/crypto-js": "^4.1.1",
|
||||
"@types/keymaster": "^1.6.30",
|
||||
@@ -32,6 +33,7 @@
|
||||
"gsap": "^3.11.3",
|
||||
"highlight.js": "^11.5.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"iconify-icon": "^1.0.8",
|
||||
"keymaster": "^1.6.2",
|
||||
"mitt": "^3.0.0",
|
||||
"monaco-editor": "^0.33.0",
|
||||
@@ -50,8 +52,6 @@
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.0.2",
|
||||
"@commitlint/config-conventional": "^17.0.2",
|
||||
"@iconify/types": "^2.0.0",
|
||||
"@iconify/vue": "^4.1.1",
|
||||
"@types/node": "^16.11.26",
|
||||
"@types/three": "^0.144.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.18.0",
|
||||
|
||||
42
pnpm-lock.yaml
generated
@@ -11,6 +11,9 @@ dependencies:
|
||||
'@amap/amap-jsapi-types':
|
||||
specifier: ^0.0.8
|
||||
version: 0.0.8
|
||||
'@iconify/json':
|
||||
specifier: ^2.2.158
|
||||
version: 2.2.158
|
||||
'@types/color':
|
||||
specifier: ^3.0.3
|
||||
version: 3.0.3
|
||||
@@ -59,6 +62,9 @@ dependencies:
|
||||
html2canvas:
|
||||
specifier: ^1.4.1
|
||||
version: 1.4.1
|
||||
iconify-icon:
|
||||
specifier: ^1.0.8
|
||||
version: 1.0.8
|
||||
keymaster:
|
||||
specifier: ^1.6.2
|
||||
version: 1.6.2
|
||||
@@ -87,7 +93,7 @@ dependencies:
|
||||
specifier: ^0.13.1
|
||||
version: 0.13.1(vue@3.2.37)
|
||||
vue-i18n:
|
||||
specifier: ^9.2.2
|
||||
specifier: 9.2.2
|
||||
version: 9.2.2(vue@3.2.37)
|
||||
vue-router:
|
||||
specifier: 4.0.12
|
||||
@@ -109,12 +115,6 @@ devDependencies:
|
||||
'@commitlint/config-conventional':
|
||||
specifier: ^17.0.2
|
||||
version: 17.0.2
|
||||
'@iconify/types':
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0
|
||||
'@iconify/vue':
|
||||
specifier: ^4.1.1
|
||||
version: 4.1.1(vue@3.2.37)
|
||||
'@types/node':
|
||||
specifier: ^16.11.26
|
||||
version: 16.11.40
|
||||
@@ -1122,18 +1122,16 @@ packages:
|
||||
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
|
||||
dev: true
|
||||
|
||||
/@iconify/types@2.0.0:
|
||||
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
|
||||
dev: true
|
||||
|
||||
/@iconify/vue@4.1.1(vue@3.2.37):
|
||||
resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
|
||||
peerDependencies:
|
||||
vue: '>=3'
|
||||
/@iconify/json@2.2.158:
|
||||
resolution: {integrity: sha512-6foGYcG97nmYpJ7N0MAbtfH7SKf7RvoOCYYSBi8gs+8qopXzplIP2F4lQiLrjpbPQihAoTercmGYWi4ABxLX1A==}
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
vue: 3.2.37
|
||||
dev: true
|
||||
pathe: 1.1.1
|
||||
dev: false
|
||||
|
||||
/@iconify/types@2.0.0:
|
||||
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
|
||||
dev: false
|
||||
|
||||
/@intlify/core-base@9.2.2:
|
||||
resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
|
||||
@@ -3668,6 +3666,12 @@ packages:
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/iconify-icon@1.0.8:
|
||||
resolution: {integrity: sha512-jvbUKHXf8EnGGArmhlP2IG8VqQLFFyTvTqb9LVL2TKTh7/eCCD1o2HHE9thpbJJb6B8hzhcFb6rOKhvo7reNKA==}
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
dev: false
|
||||
|
||||
/iconv-lite@0.4.24:
|
||||
resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -4741,6 +4745,10 @@ packages:
|
||||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/pathe@1.1.1:
|
||||
resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
|
||||
dev: false
|
||||
|
||||
/picocolors@1.0.0:
|
||||
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
|
||||
|
||||
|
||||
BIN
readme/go-view-event.png
Normal file
|
After Width: | Height: | Size: 188 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
BIN
readme/sponsors/diboot-banner.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 15 KiB |
BIN
readme/sponsors/shaguo-banner.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
readme/sponsors/yuncheng-banner.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
@@ -30,5 +30,5 @@ const hljsTheme = useCode()
|
||||
|
||||
// 全局语言
|
||||
const { locale, dateLocale } = useLang()
|
||||
|
||||
//测试提交
|
||||
</script>
|
||||
|
||||
BIN
src/assets/images/project/moke-20211219181327.png
Normal file
|
After Width: | Height: | Size: 475 KiB |
BIN
src/assets/videos/earth.mp4
Normal file
3
src/components/GoIconify/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import GoIconify from './index.vue';
|
||||
|
||||
export { GoIconify };
|
||||
34
src/components/GoIconify/index.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<iconify-icon
|
||||
:icon="icon"
|
||||
:rotate="`${rotate}deg`"
|
||||
:width="width"
|
||||
:style="{
|
||||
color: color
|
||||
}"
|
||||
></iconify-icon>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#999999',
|
||||
required: false
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: '20',
|
||||
required: false
|
||||
},
|
||||
rotate: {
|
||||
type: [String, Number],
|
||||
default: '0',
|
||||
required: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -119,7 +119,10 @@ export const useChartDataFetch = (
|
||||
|
||||
if (isPreview()) {
|
||||
targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
|
||||
? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
|
||||
? addGlobalDataInterface(targetComponent, useChartEditStore, (newData: any) => {
|
||||
echartsUpdateHandle(newData)
|
||||
if (updateCallback) updateCallback(newData)
|
||||
})
|
||||
: requestIntervalFn()
|
||||
} else {
|
||||
requestIntervalFn()
|
||||
|
||||
126
src/main.ts
@@ -1,59 +1,67 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router, { setupRouter } from '@/router'
|
||||
import i18n from '@/i18n/index'
|
||||
import { setupStore } from '@/store'
|
||||
import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
|
||||
import { GoAppProvider } from '@/components/GoAppProvider/index'
|
||||
import { setHtmlTheme } from '@/utils'
|
||||
|
||||
// 引入全局样式
|
||||
import '@/styles/pages/index.scss'
|
||||
// 引入动画
|
||||
import 'animate.css/animate.min.css'
|
||||
// 引入标尺
|
||||
import 'vue3-sketch-ruler/lib/style.css'
|
||||
|
||||
async function appInit() {
|
||||
const goAppProvider = createApp(GoAppProvider)
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 注册全局常用的 naive-ui 组件
|
||||
setupNaive(app)
|
||||
|
||||
// 注册全局自定义指令
|
||||
setupDirectives(app)
|
||||
|
||||
// 注册全局自定义组件
|
||||
setupCustomComponents(app)
|
||||
|
||||
// 挂载状态管理
|
||||
setupStore(app)
|
||||
|
||||
// 解决路由守卫,Axios中可使用,Dialog,Message 等全局组件
|
||||
goAppProvider.mount('#appProvider', true)
|
||||
|
||||
// 挂载路由
|
||||
setupRouter(app)
|
||||
|
||||
// 路由准备就绪后挂载APP实例
|
||||
await router.isReady()
|
||||
|
||||
// Store 准备就绪后处理主题色
|
||||
setHtmlTheme()
|
||||
|
||||
// 语言注册
|
||||
app.use(i18n)
|
||||
|
||||
// 挂载到页面
|
||||
app.mount('#app', true)
|
||||
|
||||
// 挂载到 window
|
||||
window['$vue'] = app
|
||||
}
|
||||
|
||||
appInit().then(() => {
|
||||
initFunction()
|
||||
})
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router, { setupRouter } from '@/router'
|
||||
import i18n from '@/i18n/index'
|
||||
import { setupStore } from '@/store'
|
||||
import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
|
||||
import { GoAppProvider } from '@/components/GoAppProvider/index'
|
||||
import { setHtmlTheme } from '@/utils'
|
||||
import { addCollection } from 'iconify-icon'
|
||||
import uimIcons from '@iconify/json/json/uim.json'
|
||||
import lineMdIcons from '@iconify/json/json/line-md.json'
|
||||
import wiIcons from '@iconify/json/json/wi.json'
|
||||
|
||||
// 引入全局样式
|
||||
import '@/styles/pages/index.scss'
|
||||
// 引入动画
|
||||
import 'animate.css/animate.min.css'
|
||||
// 引入标尺
|
||||
import 'vue3-sketch-ruler/lib/style.css'
|
||||
// 注册图标
|
||||
addCollection(uimIcons)
|
||||
addCollection(lineMdIcons)
|
||||
addCollection(wiIcons)
|
||||
|
||||
async function appInit() {
|
||||
const goAppProvider = createApp(GoAppProvider)
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 注册全局常用的 naive-ui 组件
|
||||
setupNaive(app)
|
||||
|
||||
// 注册全局自定义指令
|
||||
setupDirectives(app)
|
||||
|
||||
// 注册全局自定义组件
|
||||
setupCustomComponents(app)
|
||||
|
||||
// 挂载状态管理
|
||||
setupStore(app)
|
||||
|
||||
// 解决路由守卫,Axios中可使用,Dialog,Message 等全局组件
|
||||
goAppProvider.mount('#appProvider', true)
|
||||
|
||||
// 挂载路由
|
||||
setupRouter(app)
|
||||
|
||||
// 路由准备就绪后挂载APP实例
|
||||
await router.isReady()
|
||||
|
||||
// Store 准备就绪后处理主题色
|
||||
setHtmlTheme()
|
||||
|
||||
// 语言注册
|
||||
app.use(i18n)
|
||||
|
||||
// 挂载到页面
|
||||
app.mount('#app', true)
|
||||
|
||||
// 挂载到 window
|
||||
window['$vue'] = app
|
||||
}
|
||||
|
||||
appInit().then(() => {
|
||||
initFunction()
|
||||
})
|
||||
|
||||
|
||||
@@ -4,9 +4,30 @@
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
:name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
|
||||
:name="`系列${index + 1}`"
|
||||
:expanded="true"
|
||||
>
|
||||
<template #header>
|
||||
<n-text class="go-fs-13" depth="3">
|
||||
{{ item.type == 'bar' ? '「柱状图」' : '「折线图」' }}
|
||||
</n-text>
|
||||
</template>
|
||||
<SettingItemBox name="类型">
|
||||
<SettingItem name="宽度">
|
||||
<n-select
|
||||
:value="item.type"
|
||||
size="small"
|
||||
:options="[
|
||||
{ label: '柱状图', value: 'bar' },
|
||||
{ label: '折线图', value: 'line' }
|
||||
]"
|
||||
@update:value="(value: any) => {
|
||||
updateHandle(item, value)
|
||||
}"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="图形" v-if="item.type == 'bar'">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
@@ -34,6 +55,12 @@
|
||||
<SettingItem name="类型">
|
||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||
</SettingItem>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.smooth" size="small" />
|
||||
<n-text>曲线</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点" v-if="item.type == 'line'">
|
||||
<SettingItem name="大小">
|
||||
@@ -63,10 +90,10 @@
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' }
|
||||
{ label: '顶部', value: 'top' },
|
||||
{ label: '左侧', value: 'left' },
|
||||
{ label: '右侧', value: 'right' },
|
||||
{ label: '底部', value: 'bottom' }
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
@@ -75,10 +102,18 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { PropType, computed, toRaw } from 'vue'
|
||||
import { merge, cloneDeep } from 'lodash';
|
||||
|
||||
import GlobalSetting from '@/components/Pages/ChartItemSetting/GlobalSetting.vue'
|
||||
import CollapseItem from '@/components/Pages/ChartItemSetting/CollapseItem.vue'
|
||||
import SettingItemBox from '@/components/Pages/ChartItemSetting/SettingItemBox.vue'
|
||||
import SettingItem from '@/components/Pages/ChartItemSetting/SettingItem.vue'
|
||||
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes'
|
||||
import { barSeriesItem, lineSeriesItem } from './config'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
@@ -90,4 +125,14 @@ const props = defineProps({
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const updateHandle = (item:any, value:string) => {
|
||||
const _label = cloneDeep(toRaw(item.label))
|
||||
lineSeriesItem.label = _label
|
||||
if (value === 'line') {
|
||||
merge(item, lineSeriesItem)
|
||||
} else {
|
||||
merge(item, barSeriesItem)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, PropType, nextTick } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { isObject, cloneDeep } from 'lodash'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
@@ -51,17 +52,35 @@ const option = computed(() => {
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData, oldData) => {
|
||||
if (newData.dimensions.length !== oldData.dimensions.length) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(barSeriesItem, lineSeriesItem)
|
||||
(newData: any, oldData) => {
|
||||
try {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (Array.isArray((newData as any)?.dimensions)) {
|
||||
const seriesArr: typeof barSeriesItem[] = []
|
||||
// 对oldData进行判断,防止传入错误数据之后对旧维度判断产生干扰
|
||||
// 此处计算的是dimensions的Y轴维度,若是dimensions.length为0或1,则默认为1,排除X轴维度干扰
|
||||
const oldDimensions =
|
||||
Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
|
||||
const newDimensions = (newData as any).dimensions.length >= 1 ? (newData as any).dimensions.length : 1
|
||||
const dimensionsGap = newDimensions - oldDimensions
|
||||
if (dimensionsGap < 0) {
|
||||
props.chartConfig.option.series.splice(newDimensions - 1)
|
||||
} else if (dimensionsGap > 0) {
|
||||
if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
|
||||
props.chartConfig.option.series = []
|
||||
}
|
||||
for (let i = 0; i < dimensionsGap; i++) {
|
||||
seriesArr.push(cloneDeep(barSeriesItem))
|
||||
}
|
||||
props.chartConfig.option.series.push(...seriesArr)
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
props.chartConfig.option.series = seriesArr
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -16,8 +16,7 @@ export enum ThemeEnum {
|
||||
MACARON = 'macaron',
|
||||
BLUE = 'blue',
|
||||
DARKBLUE = 'darkblue',
|
||||
WINE = 'wine',
|
||||
WEIXIN = 'tileLayer'
|
||||
WINE = 'wine'
|
||||
}
|
||||
|
||||
export enum LangEnum {
|
||||
@@ -31,6 +30,11 @@ export enum ViewModeEnum {
|
||||
STEREOSCOPIC = '3D'
|
||||
}
|
||||
|
||||
export const ShowHideEnum = {
|
||||
SHOW: true,
|
||||
HIDE: false
|
||||
}
|
||||
|
||||
export enum FeaturesEnum {
|
||||
BG = 'bg',
|
||||
POINT = 'point',
|
||||
@@ -71,6 +75,25 @@ export const option = {
|
||||
},
|
||||
mapMarkerType: MarkerEnum.CIRCLE_MARKER,
|
||||
viewMode: ViewModeEnum.PLANE,
|
||||
showLabel: ShowHideEnum.SHOW,
|
||||
satelliteTileLayer: {
|
||||
show: ShowHideEnum.HIDE,
|
||||
zIndex: 1,
|
||||
opacity: 1,
|
||||
zooms: [3, 18]
|
||||
},
|
||||
roadNetTileLayer: {
|
||||
show: ShowHideEnum.HIDE,
|
||||
zIndex: 2,
|
||||
opacity: 1,
|
||||
zooms: [3, 18]
|
||||
},
|
||||
trafficTileLayer: {
|
||||
show: ShowHideEnum.HIDE,
|
||||
zIndex: 3,
|
||||
opacity: 1,
|
||||
zooms: [3, 18]
|
||||
},
|
||||
lang: LangEnum.ZH_CN,
|
||||
features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
|
||||
}
|
||||
|
||||
@@ -22,13 +22,21 @@
|
||||
<n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="内容" :alone="true">
|
||||
<setting-item-box name="显示要素" :alone="true">
|
||||
<n-checkbox-group v-model:value="optionData.mapOptions.features">
|
||||
<n-space item-style="display: flex;">
|
||||
<n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="文字标注" :alone="true">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="位置">
|
||||
<setting-item name="经度">
|
||||
<n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
|
||||
@@ -76,11 +84,94 @@
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item name="图层" :expanded="true">
|
||||
<setting-item-box name="卫星图层">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.satelliteTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.satelliteTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.satelliteTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.satelliteTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="路网图层">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.roadNetTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.roadNetTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.roadNetTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.roadNetTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="实时交通">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.trafficTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.trafficTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.trafficTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.trafficTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
|
||||
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
defineProps({
|
||||
@@ -134,10 +225,6 @@ const themeOptions = [
|
||||
{
|
||||
value: ThemeEnum.WINE,
|
||||
label: '酱籽'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.WEIXIN,
|
||||
label: '卫星'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -170,19 +257,19 @@ const viewModeOptions = [
|
||||
const featuresOptions = [
|
||||
{
|
||||
value: FeaturesEnum.BG,
|
||||
label: '显示地图背景'
|
||||
label: '区域面'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.POINT,
|
||||
label: '显示标识'
|
||||
label: '标注'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.ROAD,
|
||||
label: '显示道路'
|
||||
label: '道路'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.BUILDING,
|
||||
label: '显示建筑'
|
||||
label: '建筑物'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -28,9 +28,13 @@ let {
|
||||
amapStyleKeyCustom,
|
||||
features,
|
||||
viewMode,
|
||||
showLabel,
|
||||
pitch,
|
||||
skyColor,
|
||||
marker
|
||||
marker,
|
||||
satelliteTileLayer,
|
||||
roadNetTileLayer,
|
||||
trafficTileLayer
|
||||
} = toRefs(props.chartConfig.option.mapOptions)
|
||||
|
||||
let mapIns: any = null
|
||||
@@ -42,7 +46,7 @@ const initMap = (newData: any) => {
|
||||
// 初始化
|
||||
AMapLoader.load({
|
||||
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥!!!
|
||||
version: '1.4.8', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
||||
version: '1.4.15', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
||||
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
|
||||
})
|
||||
.then(AMap => {
|
||||
@@ -56,17 +60,40 @@ const initMap = (newData: any) => {
|
||||
pitch: pitch.value, // 地图俯仰角度,有效范围 0 度- 83 度
|
||||
skyColor: skyColor.value,
|
||||
viewMode: viewMode.value, // 地图模式
|
||||
showLabel: showLabel.value, // 是否显示地图文字标记
|
||||
willReadFrequently: true
|
||||
})
|
||||
dataHandle(props.chartConfig.option.dataset)
|
||||
let satellite = new AMap.TileLayer.Satellite()
|
||||
let roadNet = new AMap.TileLayer.RoadNet()
|
||||
if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
|
||||
mapIns.add([satellite, roadNet])
|
||||
} else {
|
||||
mapIns.remove([satellite, roadNet])
|
||||
mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
|
||||
|
||||
let satelliteLayer = new AMap.TileLayer.Satellite({
|
||||
zIndex: satelliteTileLayer.value.zIndex,
|
||||
opacity: satelliteTileLayer.value.opacity,
|
||||
zooms: satelliteTileLayer.value.zooms
|
||||
})
|
||||
let roadNetLayer = new AMap.TileLayer.RoadNet({
|
||||
zIndex: roadNetTileLayer.value.zIndex,
|
||||
opacity: roadNetTileLayer.value.opacity,
|
||||
zooms: roadNetTileLayer.value.zooms
|
||||
})
|
||||
let trafficLayer = new AMap.TileLayer.Traffic({
|
||||
zIndex: trafficTileLayer.value.zIndex,
|
||||
opacity: trafficTileLayer.value.opacity,
|
||||
zooms: trafficTileLayer.value.zooms
|
||||
})
|
||||
mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
|
||||
if (satelliteTileLayer.value.show) {
|
||||
mapIns.add([satelliteLayer])
|
||||
}
|
||||
if (roadNetTileLayer.value.show) {
|
||||
mapIns.add([roadNetLayer])
|
||||
}
|
||||
if (trafficTileLayer.value.show) {
|
||||
mapIns.add([trafficLayer])
|
||||
}
|
||||
|
||||
mapIns.setMapStyle(
|
||||
`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
|
||||
)
|
||||
})
|
||||
.catch(e => {})
|
||||
}
|
||||
|
||||
@@ -171,7 +171,19 @@ const backLevel = () => {
|
||||
|
||||
// 切换地图
|
||||
const checkOrMap = async (newData: string) => {
|
||||
await getGeojson(newData)
|
||||
if (newData === 'china') {
|
||||
if (props.chartConfig.option.mapRegion.showHainanIsLands) {
|
||||
// 显示南海
|
||||
hainanLandsHandle(true)
|
||||
vEchartsSetOption()
|
||||
} else {
|
||||
// 隐藏南海
|
||||
hainanLandsHandle(false)
|
||||
vEchartsSetOption()
|
||||
}
|
||||
} else {
|
||||
await getGeojson(newData)
|
||||
}
|
||||
props.chartConfig.option.geo.map = newData
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'map') item.map = newData
|
||||
|
||||
@@ -1,44 +1,52 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { FunnelChart } 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'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="(option as EChartsOption)"
|
||||
:manual-update="isPreview()"
|
||||
autoresize
|
||||
></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { FunnelChart } 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'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:option="(option as EChartsOption)"
|
||||
:manual-update="isPreview()"
|
||||
autoresize
|
||||
></v-chart>
|
||||
@@ -12,6 +12,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, PropType, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
|
||||
@@ -1,95 +1,103 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { HeatmapChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme, setOption } 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'
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
VisualMapComponent
|
||||
} from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
HeatmapChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
VisualMapComponent
|
||||
])
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
|
||||
const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
const { seriesData, xAxis, yAxis } = dataset
|
||||
if (xAxis) {
|
||||
// @ts-ignore
|
||||
props.chartConfig.option.xAxis.data = xAxis
|
||||
}
|
||||
if (yAxis) {
|
||||
// @ts-ignore
|
||||
props.chartConfig.option.yAxis.data = yAxis
|
||||
}
|
||||
if (seriesData) {
|
||||
props.chartConfig.option.series[0].data = seriesData
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
try {
|
||||
dataSetHandle(newData)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="(option as EChartsOption)"
|
||||
:manual-update="isPreview()"
|
||||
autoresize
|
||||
></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { HeatmapChart } from 'echarts/charts'
|
||||
import { includes } from './config'
|
||||
import { mergeTheme, setOption } 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'
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
VisualMapComponent
|
||||
} from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
HeatmapChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
VisualMapComponent
|
||||
])
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
|
||||
const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
const { seriesData, xAxis, yAxis } = dataset
|
||||
if (xAxis) {
|
||||
// @ts-ignore
|
||||
props.chartConfig.option.xAxis.data = xAxis
|
||||
}
|
||||
if (yAxis) {
|
||||
// @ts-ignore
|
||||
props.chartConfig.option.yAxis.data = yAxis
|
||||
}
|
||||
if (seriesData) {
|
||||
props.chartConfig.option.series[0].data = seriesData
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
try {
|
||||
dataSetHandle(newData)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -134,7 +134,10 @@ watch(
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||
addPieInterval(newData)
|
||||
clearPieInterval()
|
||||
if (props.chartConfig.option.isCarousel) {
|
||||
addPieInterval(newData)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@@ -1,81 +1,80 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { ScatterCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
export const seriesItem = {
|
||||
type: 'scatter',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
symbolSize: 12,
|
||||
markArea: {
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: 'transparent',
|
||||
borderWidth: 1,
|
||||
borderType: 'dashed'
|
||||
},
|
||||
data: [
|
||||
[
|
||||
{
|
||||
xAxis: 'min',
|
||||
yAxis: 'min'
|
||||
},
|
||||
{
|
||||
xAxis: 'max',
|
||||
yAxis: 'max'
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'pin',
|
||||
symbolSize: 50,
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
tooltip: {
|
||||
showDelay: 0,
|
||||
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
|
||||
// console.log(params)
|
||||
return params.value.length > 1
|
||||
? `${params.seriesName}:<br />${params.value[0]} ${params.value[1]}`
|
||||
: `${params.seriesName}:<br />${params.name} ${params.value}`
|
||||
},
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
scale: true
|
||||
},
|
||||
yAxis: {
|
||||
scale: true
|
||||
},
|
||||
series: dataJson.map((item, index) => ({
|
||||
...seriesItem,
|
||||
datasetIndex: index
|
||||
}))
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ScatterCommonConfig.key
|
||||
public chartConfig = cloneDeep(ScatterCommonConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { ScatterCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
export const seriesItem = {
|
||||
type: 'scatter',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
symbolSize: 12,
|
||||
markArea: {
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: 'transparent',
|
||||
borderWidth: 1,
|
||||
borderType: 'dashed'
|
||||
},
|
||||
data: [
|
||||
[
|
||||
{
|
||||
xAxis: 'min',
|
||||
yAxis: 'min'
|
||||
},
|
||||
{
|
||||
xAxis: 'max',
|
||||
yAxis: 'max'
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'pin',
|
||||
symbolSize: 50,
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
tooltip: {
|
||||
showDelay: 0,
|
||||
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
|
||||
return params.value.length > 1
|
||||
? `${params.seriesName}:<br />${params.value[0]} ${params.value[1]}`
|
||||
: `${params.name} ${params.value}`
|
||||
},
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
scale: true
|
||||
},
|
||||
yAxis: {
|
||||
scale: true
|
||||
},
|
||||
series: dataJson.map((item, index) => ({
|
||||
...seriesItem,
|
||||
datasetIndex: index
|
||||
}))
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ScatterCommonConfig.key
|
||||
public chartConfig = cloneDeep(ScatterCommonConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="go-icon-box">
|
||||
<Icon :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
|
||||
<GoIconify :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { GoIconify } from '@/components/GoIconify'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
|
||||
@@ -36,7 +36,7 @@ let option = shallowReactive({ ...configOption })
|
||||
// 预览更新
|
||||
const vVideoRef = ref(null)
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
option = newData
|
||||
option.dataset = newData
|
||||
})
|
||||
|
||||
// 编辑更新
|
||||
|
||||
@@ -70,6 +70,7 @@ const click = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: v-bind('textAlign');
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
color: v-bind('fontColor');
|
||||
|
||||
@@ -24,8 +24,8 @@ export function isArray(p: any): p is [] {
|
||||
return Array.isArray(p)
|
||||
}
|
||||
|
||||
export const toNumber = (number: number | string, toFixedNumber = 2) => {
|
||||
return isString(number) ? parseFloat(parseFloat(number).toFixed(2)) : number
|
||||
export const toNumber = (number: number | string, toFixedNumber: number = 2) => {
|
||||
return isString(number) ? parseFloat(parseFloat(number).toFixed(toFixedNumber)) : number
|
||||
}
|
||||
|
||||
export const toString = (str: any) => {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
</n-text>
|
||||
</div>
|
||||
<div class="list-center go-flex-center go-transition" draggable="true">
|
||||
<Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
|
||||
<GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" style="height: auto" />
|
||||
<chart-glob-image v-else class="list-img" :chartConfig="item" />
|
||||
</div>
|
||||
<div class="list-bottom">
|
||||
@@ -64,7 +64,7 @@ import { createComponent } from '@/packages'
|
||||
import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
|
||||
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { GoIconify } from '@/components/GoIconify'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
import omit from 'lodash/omit'
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
:title="item.title"
|
||||
@click="selectChartHandle(item)"
|
||||
>
|
||||
<Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
|
||||
<GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
|
||||
<chart-glob-image v-else class="list-item-img" :chartConfig="item" />
|
||||
<n-text class="list-item-fs" depth="2">{{ item.title }}</n-text>
|
||||
</div>
|
||||
@@ -79,7 +79,7 @@ import { isString, addEventListener, removeEventListener } from '@/utils'
|
||||
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
|
||||
import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
|
||||
import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { GoIconify } from '@/components/GoIconify'
|
||||
|
||||
const props = defineProps({
|
||||
menuOptions: {
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false" :closeOnEsc="false">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 600px">
|
||||
<template #header>
|
||||
<n-space>
|
||||
<n-text>过滤器函数编辑器</n-text>
|
||||
@@ -49,12 +49,12 @@
|
||||
<n-tag type="info">
|
||||
<span class="func-keyword">function</span> filter(data, res) {
|
||||
</n-tag>
|
||||
<monaco-editor v-model:modelValue="filter" width="660px" height="500px" language="javascript" />
|
||||
<monaco-editor v-model:modelValue="filter" width="460px" height="380px" language="javascript" />
|
||||
<n-tag type="info">}</n-tag>
|
||||
</n-space>
|
||||
</div>
|
||||
<n-divider vertical style="height: 580px" />
|
||||
<n-scrollbar style="max-height: 580px">
|
||||
<n-divider vertical style="height: 480px" />
|
||||
<n-scrollbar style="max-height: 480px">
|
||||
<n-space :size="15" vertical>
|
||||
<div class="editor-data-show">
|
||||
<n-space>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false">
|
||||
<n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false" :close-on-esc="false">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
|
||||
<template #header></template>
|
||||
<template #header-extra> </template>
|
||||
|
||||
@@ -302,7 +302,11 @@ export const useMouseHandle = () => {
|
||||
}
|
||||
})
|
||||
})
|
||||
chartEditStore.moveComponentList(prevComponentInstance)
|
||||
|
||||
const moveComponentInstance = prevComponentInstance.filter(
|
||||
item => item.attr.offsetX !== 0 && item.attr.offsetY !== 0
|
||||
)
|
||||
moveComponentInstance.length && chartEditStore.moveComponentList(moveComponentInstance)
|
||||
}
|
||||
document.removeEventListener('mousemove', mousemove)
|
||||
document.removeEventListener('mouseup', mouseup)
|
||||
|
||||
@@ -58,7 +58,7 @@ const previewHandle = () => {
|
||||
// 发布
|
||||
const sendHandle = () => {
|
||||
goDialog({
|
||||
message: '想体验发布功能,请前往查看: https://demo.mtruning.club/#/login。源码需切换到:master-fetch 分支。',
|
||||
message: '想体验发布功能,请前往 master-fetch 分支查看: https://gitee.com/MTrun/go-view/tree/master-fetch',
|
||||
positiveText: '了然',
|
||||
closeNegativeText: true,
|
||||
onPositiveCallback: () => {}
|
||||
@@ -95,10 +95,4 @@ const comBtnList = computed(() => {
|
||||
cloneList.shift()
|
||||
return cloneList
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.align-center {
|
||||
margin-top: -4px;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -15,13 +15,7 @@
|
||||
</transition-group>
|
||||
</aside>
|
||||
</div>
|
||||
<layout-header>
|
||||
<template #left></template>
|
||||
<template #right>
|
||||
<go-lang-select></go-lang-select>
|
||||
<go-theme-select></go-theme-select>
|
||||
</template>
|
||||
</layout-header>
|
||||
<layout-header></layout-header>
|
||||
<div class="go-login">
|
||||
<div class="go-login-carousel">
|
||||
<n-carousel
|
||||
|
||||
@@ -14,12 +14,17 @@ import Preview from './index.vue'
|
||||
let key = ref(Date.now())
|
||||
|
||||
// 数据变更 -> 组件销毁重建
|
||||
;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
|
||||
if (!window.opener && !window.opener.addEventListener) return
|
||||
window.opener.addEventListener(saveEvent, async (e: any) => {
|
||||
const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
|
||||
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
|
||||
key.value = Date.now()
|
||||
try {
|
||||
const listenerArr = [SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW]
|
||||
listenerArr.forEach((saveEvent: string) => {
|
||||
if (!window.opener || !window.opener.addEventListener) return
|
||||
window.opener.addEventListener(saveEvent, async (e: any) => {
|
||||
const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
|
||||
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
|
||||
key.value = Date.now()
|
||||
})
|
||||
})
|
||||
})
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
</script>
|
||||
|
||||
2
types/shims-vue.d.ts
vendored
@@ -6,4 +6,4 @@ declare module '*.vue' {
|
||||
|
||||
declare module 'lodash/*'
|
||||
declare module 'dom-helpers'
|
||||
declare module '@iconify/vue'
|
||||
declare module 'vue3-sketch-ruler';
|
||||
|
||||
@@ -25,7 +25,7 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
find: 'vue-i18n',
|
||||
replacement: 'vue-i18n/dist/vue-i18n.cjs.js', //解决i8n警告
|
||||
replacement: 'vue-i18n/dist/vue-i18n.cjs.js' //解决i8n警告
|
||||
}
|
||||
],
|
||||
dedupe: ['vue']
|
||||
@@ -40,7 +40,14 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vue({
|
||||
template: {
|
||||
compilerOptions: {
|
||||
// 排除 iconify 图标影子组件编译报错
|
||||
isCustomElement: tag => tag.startsWith('iconify-icon')
|
||||
}
|
||||
}
|
||||
}),
|
||||
monacoEditorPlugin({
|
||||
languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
|
||||
}),
|
||||
@@ -70,7 +77,7 @@ export default defineConfig({
|
||||
// minify: 'terser', // 如果需要用terser混淆,可打开这两行
|
||||
// terserOptions: terserOptions,
|
||||
rollupOptions: rollupOptions,
|
||||
brotliSize: brotliSize,
|
||||
reportCompressedSize: brotliSize,
|
||||
chunkSizeWarningLimit: chunkSizeWarningLimit
|
||||
}
|
||||
})
|
||||
|
||||