mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into dev-commet

Browse Source
This commit is contained in:
tnt group 2022-10-15 18:37:12 +08:00
commit af50a00111
12 changed files with 94 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Pages/ChartItemSetting/GlobalSetting.vue
View File

@ -21,6 +21,23 @@
</setting-item-box>
</collapse-item>
<collapse-item v-if="grid" name="容器">
<setting-item-box name="距离">
<setting-item name="左侧距离">
<n-input v-model:value="grid.left" size="small"></n-input>
</setting-item>
<setting-item name="右侧距离">
<n-input v-model:value="grid.right" size="small"></n-input>
</setting-item>
<setting-item name="上侧距离">
<n-input v-model:value="grid.top" size="small"></n-input>
</setting-item>
<setting-item name="下侧距离">
<n-input v-model:value="grid.bottom" size="small"></n-input>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item v-if="xAxis" name="X轴">
<template #header>
<n-switch v-model:value="xAxis.show" size="small"></n-switch>
@ -51,6 +68,9 @@
<setting-item name="大小">
<n-input-number v-model:value="xAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
</setting-item>
<setting-item name="偏移量">
<n-input-number v-model:value="xAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="轴线">
<setting-item name="展示">
@ -140,6 +160,9 @@
<setting-item name="大小">
<n-input-number v-model:value="yAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
</setting-item>
<setting-item name="偏移量">
<n-input-number v-model:value="yAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="轴线">
<setting-item name="展示">
@ -289,6 +312,10 @@ const legend = computed(() => {
return props.optionData.legend
})
const grid = computed(() => {
return props.optionData.grid
})
const visualMap = computed(() => {
return props.optionData.visualMap
})

9
src/packages/components/Charts/Bars/BarCommon/config.ts
View File

@ -4,15 +4,15 @@ import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const seriesItem = {
type: 'bar',
barWidth: 15,
label: {
show: true,
position: 'top',
color: "#fff",
fontSize: 12,
color: '#fff',
fontSize: 12
},
itemStyle: {
color: null,
@ -28,9 +28,6 @@ export const option = {
type: 'shadow'
}
},
legend: {
show: true
},
xAxis: {
show: true,
type: 'category'

5
src/packages/components/Charts/Bars/BarCrossrange/config.ts
View File

@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const seriesItem = {
type: 'bar',
barWidth: null,
@ -28,9 +28,6 @@ export const option = {
type: 'shadow'
}
},
legend: {
show: true
},
xAxis: {
show: true,
type: 'value'

7
src/packages/components/Charts/Lines/LineCommon/config.ts
View File

@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const seriesItem = {
type: 'line',
label: {
@ -21,7 +21,7 @@ export const seriesItem = {
lineStyle: {
type: 'solid',
width: 3,
color: null,
color: null
}
}
@ -33,9 +33,6 @@ export const option = {
type: 'line'
}
},
legend: {
show: true
},
xAxis: {
show: true,
type: 'category'

14
src/packages/components/Charts/Lines/LineGradientSingle/config.ts
View File

@ -5,7 +5,7 @@ import { graphic } from 'echarts/core'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
const options = {
tooltip: {
@ -15,12 +15,9 @@ const options = {
type: 'line'
}
},
legend: {
show: true
},
xAxis: {
show: true,
type: 'category',
type: 'category'
},
yAxis: {
show: true,
@ -35,8 +32,8 @@ const options = {
label: {
show: true,
position: 'top',
color: "#fff",
fontSize: 12,
color: '#fff',
fontSize: 12
},
lineStyle: {
type: 'solid',
@ -59,8 +56,7 @@ const options = {
]
}
export default class Config extends PublicConfigClass
implements CreateComponentType {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key: string = LineGradientSingleConfig.key
public chartConfig = LineGradientSingleConfig
// 图表配置项

5
src/packages/components/Charts/Lines/LineGradients/config.ts
View File

@ -5,12 +5,9 @@ import { graphic } from 'echarts/core'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
const option = {
legend: {
show: true
},
tooltip: {
show: true,
trigger: 'axis',

5
src/packages/components/Charts/Lines/LineLinearSingle/config.ts
View File

@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const option = {
tooltip: {
@ -14,9 +14,6 @@ export const option = {
type: 'line'
}
},
legend: {
show: true
},
xAxis: {
show: true,
type: 'category'

2
src/packages/components/Charts/Mores/Heatmap/config.ts
View File

@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
import { cloneDeep } from 'lodash'
import dataJson from './data.json'
export const includes = ['xAxis', 'yAxis']
export const includes = ['xAxis', 'yAxis', 'grid']
export const option = {
dataset: { ...dataJson },

2
src/packages/components/Charts/Scatters/ScatterCommon/config.ts
View File

@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const seriesItem = {
type: 'scatter',

2
src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/config.ts
View File

@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const option = {
dataset: dataJson,

13
src/settings/chartThemes/global.theme.json
View File

@ -22,7 +22,8 @@
"axisLabel": {
"show": true,
"fontSize": 12,
"color": "#B9B8CE"
"color": "#B9B8CE",
"rotate": 0
},
"position": "bottom",
"axisLine": {
@ -58,7 +59,8 @@
"axisLabel": {
"show": true,
"fontSize": 12,
"color": "#B9B8CE"
"color": "#B9B8CE",
"rotate": 0
},
"position": "left",
"axisLine": {
@ -88,5 +90,12 @@
"textStyle": {
"color": "#B9B8CE"
}
},
"grid": {
"show": false,
"left": "10%",
"top": "60",
"right": "10%",
"bottom": "60"
}
}

23
src/views/chart/hooks/useSync.hook.ts
View File

@ -66,12 +66,8 @@ export const useSync = () => {
intComponent(e as CreateComponentType)
}
})
// 数据赋值
for (const key in projectData) {
// 组件
if (key === ChartEditStoreEnum.COMPONENT_LIST) {
for (const comItem of projectData[key]) {
// 重新创建是为了处理类种方法消失的问题
// 创建函数-重新创建是为了处理类种方法消失的问题
const create = async (
_componentInstance: CreateComponentType,
callBack?: (componentInstance: CreateComponentType) => void
@ -97,6 +93,11 @@ export const useSync = () => {
}
}
// 数据赋值
for (const key in projectData) {
// 组件
if (key === ChartEditStoreEnum.COMPONENT_LIST) {
for (const comItem of projectData[key]) {
if (comItem.isGroup) {
// 创建分组
let groupClass = new PublicGroupConfigClass()
@ -106,19 +107,19 @@ export const useSync = () => {
groupClass = componentMerge(groupClass, comItem)
}
// 注册子应用
// 异步注册子应用
const targetList: CreateComponentType[] = []
;(comItem as CreateComponentGroupType).groupList.forEach(groupItem => {
create(groupItem, e => {
for (const groupItem of (comItem as CreateComponentGroupType).groupList) {
await create(groupItem, e => {
targetList.push(e)
})
})
}
groupClass.groupList = targetList
// 分组插入到列表
chartEditStore.addComponentList(groupClass, false, true)
} else {
create(comItem as CreateComponentType)
await create(comItem as CreateComponentType)
}
}
} else {