github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 00:02:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 新增主题色配置

Browse Source
This commit is contained in:
MTrun 2022-02-23 15:49:00 +08:00
parent d1d27a740f
commit d7ebf0e173
3 changed files with 68 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ChartItemSetting/CollapseItem.vue
View File

@ -1,9 +1,11 @@
<template>
<n-divider style="margin: 10px 0" />
<n-collapse arrow-placement="right" default-expanded-names="1">
<n-divider style="margin: 10px 0;" />
<n-collapse arrow-placement="right">
<!-- 右侧 -->
<template #header-extra>
<div @click="click">
<slot name="header" />
</div>
</template>
<n-collapse-item :title="name" name="1">
@ -19,4 +21,8 @@ defineProps({
required: true
}
})
const click = (e:MouseEvent) => {
e.preventDefault()
e.stopPropagation()
}
</script>

64
src/components/ChartItemSetting/GlobalSetting.vue
View File

@ -1,22 +1,42 @@
<template>
<div class="go-global-setting">
<CollapseItem name="标题">
<template #header>
<n-switch v-model:value="title.show" size="small" />
</template>
<SettingItemBox name="标题">
<SettingItem width="200">
<SettingItem name="颜色">
<n-color-picker v-model:value="title.textStyle.color" size="small" />
</SettingItem>
<SettingItem name="大小">
<n-input-number
v-model:value="title.textStyle.fontSize"
:min="1"
size="small"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="副标题">
<SettingItem width="200">
<SettingItem name="颜色">
<n-color-picker
size="small"
v-model:value="title.subtextStyle.color"
/>
</SettingItem>
<SettingItem name="大小">
<n-input-number
v-model:value="title.subtextStyle.fontSize"
:min="1"
size="small"
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="X轴">
<template #header>
<n-switch v-model:value="xAxis.show" size="small" />
</template>
<SettingItemBox name="名称">
<SettingItem name="颜色">
<n-color-picker
@ -32,10 +52,7 @@
</n-space>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
size="small"
v-model:value="xAxis.axisLabel.color"
/>
<n-color-picker size="small" v-model:value="xAxis.axisLabel.color" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="轴线">
@ -87,15 +104,26 @@
/>
</SettingItem>
<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 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>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="Y轴">
<template #header>
<n-switch v-model:value="yAxis.show" size="small" />
</template>
<SettingItemBox name="名称">
<SettingItem name="颜色">
<n-color-picker
@ -111,10 +139,7 @@
</n-space>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
size="small"
v-model:value="yAxis.axisLabel.color"
/>
<n-color-picker size="small" v-model:value="yAxis.axisLabel.color" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="轴线">
@ -171,15 +196,26 @@
/>
</SettingItem>
<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 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>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="图例">
<template #header>
<n-switch v-model:value="legend.show" size="small" />
</template>
<SettingItemBox name="图例文字">
<SettingItem>
<n-color-picker size="small" v-model:value="legend.textStyle.color" />

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

@ -1,13 +1,17 @@
{
"title": {
"show": true,
"textStyle": {
"color": "#464646"
"color": "#464646",
"fontSize": 18
},
"subtextStyle": {
"color": "#6e7079"
"color": "#6e7079",
"fontSize": 14
}
},
"xAxis": {
"show": true,
"nameTextStyle": {
"color": "#B9B8CE"
},
@ -37,6 +41,7 @@
}
},
"yAxis": {
"show": true,
"nameTextStyle": {
"color": "#B9B8CE"
},
@ -66,6 +71,7 @@
}
},
"legend": {
"show": true,
"textStyle": {
"color": "#B9B8CE"
}