feat: 新增全局测试
This commit is contained in:
MTrun
parent
c071cb5a49
commit
40a129aafd
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<n-divider />
|
<n-divider style="margin: 10px 0" />
|
||||||
<n-collapse arrow-placement="right" default-expanded-names="1">
|
<n-collapse arrow-placement="right" default-expanded-names="1">
|
||||||
<!-- 右侧 -->
|
<!-- 右侧 -->
|
||||||
<template #header-extra>
|
<template #header-extra>
|
||||||
150
src/components/ChartItemSetting/GlobalSetting.vue
Normal file
150
src/components/ChartItemSetting/GlobalSetting.vue
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
<template>
|
||||||
|
<div class="go-global-setting">
|
||||||
|
<CollapseItem name="标题">
|
||||||
|
<SettingItemBox name="标题">
|
||||||
|
<SettingItem width="200">
|
||||||
|
<n-color-picker v-model:value="title.textStyle.color" size="small" />
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
<SettingItemBox name="副标题">
|
||||||
|
<SettingItem width="200">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
v-model:value="title.subtextStyle.color"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
|
|
||||||
|
<CollapseItem name="X轴">
|
||||||
|
<SettingItemBox name="文本">
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
v-model:value="xAxis.nameTextStyle.color"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
<SettingItemBox name="轴线">
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
v-model:value="xAxis.axisLine.lineStyle.color"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="粗细">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="xAxis.axisLine.lineStyle.width"
|
||||||
|
:min="1"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="对齐零">
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="xAxis.axisLine.onZero" size="small" />
|
||||||
|
</n-space>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
<SettingItemBox name="分割线">
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
v-model:value="xAxis.splitLine.lineStyle.color"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="粗细">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="xAxis.splitLine.lineStyle.width"
|
||||||
|
:min="1"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="类型">
|
||||||
|
<n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
|
|
||||||
|
<CollapseItem name="Y轴">
|
||||||
|
<SettingItemBox name="文本">
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
v-model:value="yAxis.nameTextStyle.color"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
<SettingItemBox name="轴线">
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
v-model:value="yAxis.axisLine.lineStyle.color"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="粗细">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="yAxis.axisLine.lineStyle.width"
|
||||||
|
:min="1"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="对齐零">
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="yAxis.axisLine.onZero" size="small" />
|
||||||
|
</n-space>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
<SettingItemBox name="分割线">
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
v-model:value="yAxis.splitLine.lineStyle.color"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="粗细">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="yAxis.splitLine.lineStyle.width"
|
||||||
|
:min="1"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="类型">
|
||||||
|
<n-select v-model:value="yAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
|
|
||||||
|
<CollapseItem name="图例">
|
||||||
|
<SettingItemBox name="图例文字">
|
||||||
|
<SettingItem>
|
||||||
|
<n-color-picker size="small" v-model:value="legend.textStyle.color" />
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { toRefs, PropType } from 'vue'
|
||||||
|
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||||
|
import { axisConf } from '@/packages/chartConfiguration/echarts/index'
|
||||||
|
import {
|
||||||
|
CollapseItem,
|
||||||
|
SettingItemBox,
|
||||||
|
SettingItem
|
||||||
|
} from '@/components/ChartItemSetting/index'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object as PropType<GlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { title, xAxis, yAxis, legend } = toRefs(props.data)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@include go(global-setting) {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
32
src/components/ChartItemSetting/SettingItem.vue
Normal file
32
src/components/ChartItemSetting/SettingItem.vue
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<div class="go-setting-item" :style="{ width: width + 'px' }">
|
||||||
|
<slot />
|
||||||
|
<n-text class="name" depth="3">{{ name }}</n-text>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps({
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: Number,
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@include go(setting-item) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 110px;
|
||||||
|
text-align: start;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
.name {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
38
src/components/ChartItemSetting/SettingItemBox.vue
Normal file
38
src/components/ChartItemSetting/SettingItemBox.vue
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="go-config-item-box">
|
||||||
|
<n-text class="item-left" depth="2">{{ name }}</n-text>
|
||||||
|
<div class="item-right" justify="space-between">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps({
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$leftWidth: 80px;
|
||||||
|
@include go('config-item-box') {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
.item-left {
|
||||||
|
width: $leftWidth;
|
||||||
|
text-align: left;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.item-right {
|
||||||
|
display: grid;
|
||||||
|
grid-column-gap: 10px;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
width: calc(100% - #{$leftWidth});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
9
src/components/ChartItemSetting/index.ts
Normal file
9
src/components/ChartItemSetting/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// 设置项布局
|
||||||
|
import SettingItem from './SettingItem.vue'
|
||||||
|
import SettingItemBox from './SettingItemBox.vue'
|
||||||
|
import CollapseItem from './CollapseItem.vue'
|
||||||
|
|
||||||
|
// 全局配置属性通用模板
|
||||||
|
import GlobalSetting from './GlobalSetting.vue'
|
||||||
|
|
||||||
|
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting }
|
||||||
@ -1,26 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
v-if="type === 'number'"
|
|
||||||
:style="{ width: width ? width + 'px' : '100%' }"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<div v-else :style="{ width: `${width}px` }">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
defineProps({
|
|
||||||
width: {
|
|
||||||
type: Number,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
required: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="go-config-item-box go-flex-items-center">
|
|
||||||
<n-text class="item-left">{{ name }}</n-text>
|
|
||||||
<n-space class="item-right" justify="space-between">
|
|
||||||
<slot />
|
|
||||||
</n-space>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
defineProps({
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$leftWidth: 100px;
|
|
||||||
@include go('config-item-box') {
|
|
||||||
position: relative;
|
|
||||||
justify-content: flex-start;
|
|
||||||
.item-left {
|
|
||||||
width: $leftWidth;
|
|
||||||
text-align: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
.item-right {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="go-global-setting">
|
|
||||||
<CollapseItem name="标题">
|
|
||||||
<ConfigItemBox name="标题颜色">
|
|
||||||
<ConfigItem :width="200">
|
|
||||||
<n-color-picker
|
|
||||||
v-model:value="title.textStyle.color"
|
|
||||||
/>
|
|
||||||
</ConfigItem>
|
|
||||||
</ConfigItemBox>
|
|
||||||
<ConfigItemBox name="副标题颜色">
|
|
||||||
<ConfigItem :width="200">
|
|
||||||
<n-color-picker
|
|
||||||
v-model:value="title.subtextStyle.color"
|
|
||||||
/>
|
|
||||||
</ConfigItem>
|
|
||||||
</ConfigItemBox>
|
|
||||||
</CollapseItem>
|
|
||||||
<CollapseItem name="图例">
|
|
||||||
<ConfigItemBox name="图例文字颜色">
|
|
||||||
<ConfigItem :width="200">
|
|
||||||
<n-color-picker
|
|
||||||
v-model:value="legend.textStyle.color"
|
|
||||||
/>
|
|
||||||
</ConfigItem>
|
|
||||||
</ConfigItemBox>
|
|
||||||
</CollapseItem>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { toRefs, PropType } from 'vue'
|
|
||||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
|
||||||
import {
|
|
||||||
CollapseItem,
|
|
||||||
ConfigItemBox,
|
|
||||||
ConfigItem
|
|
||||||
} from '@/components/ConfigItemCom/index'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
data: {
|
|
||||||
type: Object as PropType<GlobalThemeJsonType>,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const { title, legend } = toRefs(props.data)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@include go(global-setting) {
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
// 设置项布局
|
|
||||||
import ConfigItem from './ConfigItem.vue'
|
|
||||||
import ConfigItemBox from './ConfigItemBox.vue'
|
|
||||||
import CollapseItem from './CollapseItem.vue'
|
|
||||||
|
|
||||||
// 全局配置属性通用模板
|
|
||||||
import GlobalSetting from './GlobalSetting.vue'
|
|
||||||
|
|
||||||
export { CollapseItem, ConfigItemBox, ConfigItem, GlobalSetting }
|
|
||||||
20
src/packages/chartConfiguration/echarts/axis.ts
Normal file
20
src/packages/chartConfiguration/echarts/axis.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
export const axisConf = {
|
||||||
|
splitLint: {
|
||||||
|
lineStyle: {
|
||||||
|
type: [
|
||||||
|
{
|
||||||
|
label: 'solid',
|
||||||
|
value: 'solid'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'dashed',
|
||||||
|
value: 'dashed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'dotted',
|
||||||
|
value: 'dotted'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/packages/chartConfiguration/echarts/index.ts
Normal file
1
src/packages/chartConfiguration/echarts/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './axis'
|
||||||
@ -16,13 +16,13 @@
|
|||||||
"color": "#B9B8CE",
|
"color": "#B9B8CE",
|
||||||
"width": 1
|
"width": 1
|
||||||
},
|
},
|
||||||
"onZero": true,
|
"onZero": true
|
||||||
"onZeroAxisIndex": null
|
|
||||||
},
|
},
|
||||||
"splitLine": {
|
"splitLine": {
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#484753",
|
"color": "#484753",
|
||||||
"width": 1
|
"width": 1,
|
||||||
|
"type": "solid"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -35,13 +35,13 @@
|
|||||||
"color": "#B9B8CE",
|
"color": "#B9B8CE",
|
||||||
"width": 1
|
"width": 1
|
||||||
},
|
},
|
||||||
"onZero": true,
|
"onZero": true
|
||||||
"onZeroAxisIndex": null
|
|
||||||
},
|
},
|
||||||
"splitLine": {
|
"splitLine": {
|
||||||
"lineStyle": {
|
"lineStyle": {
|
||||||
"color": "#484753",
|
"color": "#484753",
|
||||||
"width": 1
|
"width": 1,
|
||||||
|
"type": "solid"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
import { GlobalSetting } from '@/components/ConfigItemCom/index'
|
import { GlobalSetting } from '@/components/ChartItemSetting/index'
|
||||||
|
|
||||||
const chartEditStoreStore = useChartEditStoreStore()
|
const chartEditStoreStore = useChartEditStoreStore()
|
||||||
const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig
|
const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user