mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 08:12:49 +08:00
fix: 新增主题色配置
This commit is contained in:
parent
d1d27a740f
commit
d7ebf0e173
@ -1,9 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<n-divider style="margin: 10px 0" />
|
<n-divider style="margin: 10px 0;" />
|
||||||
<n-collapse arrow-placement="right" default-expanded-names="1">
|
<n-collapse arrow-placement="right">
|
||||||
<!-- 右侧 -->
|
<!-- 右侧 -->
|
||||||
<template #header-extra>
|
<template #header-extra>
|
||||||
|
<div @click="click">
|
||||||
<slot name="header" />
|
<slot name="header" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<n-collapse-item :title="name" name="1">
|
<n-collapse-item :title="name" name="1">
|
||||||
@ -19,4 +21,8 @@ defineProps({
|
|||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const click = (e:MouseEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,22 +1,42 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="go-global-setting">
|
<div class="go-global-setting">
|
||||||
<CollapseItem name="标题">
|
<CollapseItem name="标题">
|
||||||
|
<template #header>
|
||||||
|
<n-switch v-model:value="title.show" size="small" />
|
||||||
|
</template>
|
||||||
<SettingItemBox name="标题">
|
<SettingItemBox name="标题">
|
||||||
<SettingItem width="200">
|
<SettingItem name="颜色">
|
||||||
<n-color-picker v-model:value="title.textStyle.color" size="small" />
|
<n-color-picker v-model:value="title.textStyle.color" size="small" />
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
|
<SettingItem name="大小">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="title.textStyle.fontSize"
|
||||||
|
:min="1"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
<SettingItemBox name="副标题">
|
<SettingItemBox name="副标题">
|
||||||
<SettingItem width="200">
|
<SettingItem name="颜色">
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
v-model:value="title.subtextStyle.color"
|
v-model:value="title.subtextStyle.color"
|
||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
|
<SettingItem name="大小">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="title.subtextStyle.fontSize"
|
||||||
|
:min="1"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
</CollapseItem>
|
</CollapseItem>
|
||||||
|
|
||||||
<CollapseItem name="X轴">
|
<CollapseItem name="X轴">
|
||||||
|
<template #header>
|
||||||
|
<n-switch v-model:value="xAxis.show" size="small" />
|
||||||
|
</template>
|
||||||
<SettingItemBox name="名称">
|
<SettingItemBox name="名称">
|
||||||
<SettingItem name="颜色">
|
<SettingItem name="颜色">
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
@ -32,10 +52,7 @@
|
|||||||
</n-space>
|
</n-space>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="颜色">
|
<SettingItem name="颜色">
|
||||||
<n-color-picker
|
<n-color-picker size="small" v-model:value="xAxis.axisLabel.color" />
|
||||||
size="small"
|
|
||||||
v-model:value="xAxis.axisLabel.color"
|
|
||||||
/>
|
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
<SettingItemBox name="轴线">
|
<SettingItemBox name="轴线">
|
||||||
@ -87,15 +104,26 @@
|
|||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="类型">
|
<SettingItem name="类型">
|
||||||
<n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
|
<n-select
|
||||||
|
v-model:value="xAxis.splitLine.lineStyle.type"
|
||||||
|
size="small"
|
||||||
|
:options="axisConf.splitLint.lineStyle.type"
|
||||||
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="位置">
|
<SettingItem name="位置">
|
||||||
<n-select v-model:value="xAxis.position" size="small" :options="axisConf.xposition" />
|
<n-select
|
||||||
|
v-model:value="xAxis.position"
|
||||||
|
size="small"
|
||||||
|
:options="axisConf.xposition"
|
||||||
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
</CollapseItem>
|
</CollapseItem>
|
||||||
|
|
||||||
<CollapseItem name="Y轴">
|
<CollapseItem name="Y轴">
|
||||||
|
<template #header>
|
||||||
|
<n-switch v-model:value="yAxis.show" size="small" />
|
||||||
|
</template>
|
||||||
<SettingItemBox name="名称">
|
<SettingItemBox name="名称">
|
||||||
<SettingItem name="颜色">
|
<SettingItem name="颜色">
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
@ -111,10 +139,7 @@
|
|||||||
</n-space>
|
</n-space>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="颜色">
|
<SettingItem name="颜色">
|
||||||
<n-color-picker
|
<n-color-picker size="small" v-model:value="yAxis.axisLabel.color" />
|
||||||
size="small"
|
|
||||||
v-model:value="yAxis.axisLabel.color"
|
|
||||||
/>
|
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
<SettingItemBox name="轴线">
|
<SettingItemBox name="轴线">
|
||||||
@ -171,15 +196,26 @@
|
|||||||
/>
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="类型">
|
<SettingItem name="类型">
|
||||||
<n-select v-model:value="yAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
|
<n-select
|
||||||
|
v-model:value="yAxis.splitLine.lineStyle.type"
|
||||||
|
size="small"
|
||||||
|
:options="axisConf.splitLint.lineStyle.type"
|
||||||
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="位置">
|
<SettingItem name="位置">
|
||||||
<n-select v-model:value="yAxis.position" size="small" :options="axisConf.yposition" />
|
<n-select
|
||||||
|
v-model:value="yAxis.position"
|
||||||
|
size="small"
|
||||||
|
:options="axisConf.yposition"
|
||||||
|
/>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
</CollapseItem>
|
</CollapseItem>
|
||||||
|
|
||||||
<CollapseItem name="图例">
|
<CollapseItem name="图例">
|
||||||
|
<template #header>
|
||||||
|
<n-switch v-model:value="legend.show" size="small" />
|
||||||
|
</template>
|
||||||
<SettingItemBox name="图例文字">
|
<SettingItemBox name="图例文字">
|
||||||
<SettingItem>
|
<SettingItem>
|
||||||
<n-color-picker size="small" v-model:value="legend.textStyle.color" />
|
<n-color-picker size="small" v-model:value="legend.textStyle.color" />
|
||||||
|
@ -1,13 +1,17 @@
|
|||||||
{
|
{
|
||||||
"title": {
|
"title": {
|
||||||
|
"show": true,
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#464646"
|
"color": "#464646",
|
||||||
|
"fontSize": 18
|
||||||
},
|
},
|
||||||
"subtextStyle": {
|
"subtextStyle": {
|
||||||
"color": "#6e7079"
|
"color": "#6e7079",
|
||||||
|
"fontSize": 14
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"xAxis": {
|
"xAxis": {
|
||||||
|
"show": true,
|
||||||
"nameTextStyle": {
|
"nameTextStyle": {
|
||||||
"color": "#B9B8CE"
|
"color": "#B9B8CE"
|
||||||
},
|
},
|
||||||
@ -37,6 +41,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"yAxis": {
|
"yAxis": {
|
||||||
|
"show": true,
|
||||||
"nameTextStyle": {
|
"nameTextStyle": {
|
||||||
"color": "#B9B8CE"
|
"color": "#B9B8CE"
|
||||||
},
|
},
|
||||||
@ -66,6 +71,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"legend": {
|
"legend": {
|
||||||
|
"show": true,
|
||||||
"textStyle": {
|
"textStyle": {
|
||||||
"color": "#B9B8CE"
|
"color": "#B9B8CE"
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user