github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-05-12 00:00:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 处理渐变图表的配置和水球背景的全局主题跟随

Browse Source
This commit is contained in:
奔跑的面条
2022-05-03 15:36:35 +08:00
parent 6ed7c130cb
commit 0681e9217d
13 changed files with 162 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/components/Charts/Lines/LineCommon/config.vue
+1 -8
View File
@@ -36,13 +36,6 @@
:options="lineConf.lineStyle.type"
></n-select>
</SettingItem>
<SettingItem name="类型">
<n-select
v-model:value="item.lineStyle.type"
size="small"
:options="lineConf.lineStyle.type"
></n-select>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="阴影" :alone="true">
<SettingItem name="颜色">
@@ -72,13 +65,13 @@
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import {
GlobalSetting,
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
const props = defineProps({
optionData: {
src/packages/components/Charts/Lines/LineCommon/index.vue
+12 -8
View File
@@ -1,5 +1,11 @@
<template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
<v-chart
ref="vChartRef"
:theme="themeColor"
:option="option.value"
:manual-update="isPreview()"
autoresize>
</v-chart>
</template>
<script setup lang="ts">
@@ -42,7 +48,7 @@ use([
const chartEditStore = useChartEditStore()
const option = reactive({
options: {}
value: {}
})
// 初始化与渐变色处理
@@ -55,18 +61,16 @@ watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof
v.color = themeColor[i]
})
})
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
option.options = props.chartConfig.option
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
props.chartConfig.option = option.value
}
}, {
immediate: true,
})
watch(() => props.chartConfig.option.dataset, () => {
option.options = props.chartConfig.option
}, {
immediate: true,
deep: true
option.value = props.chartConfig.option
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
src/packages/components/Charts/Lines/LineGradientSingle/config.ts
+6 -7
View File
@@ -8,9 +8,6 @@ import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
const options = {
legend: {
show: true
},
tooltip: {
show: true,
trigger: 'axis',
@@ -18,6 +15,9 @@ const options = {
type: 'line'
}
},
legend: {
show: true
},
xAxis: {
show: true,
type: 'category',
@@ -32,9 +32,8 @@ const options = {
type: 'line',
smooth: false,
lineStyle: {
normal: {
width: 3
}
type: 'solid',
width: 3
},
areaStyle: {
opacity: 0.8,
@@ -48,7 +47,7 @@ const options = {
color: 'rgba(0,0,0,0)'
}
])
},
}
}
]
}
src/packages/components/Charts/Lines/LineGradientSingle/config.vue
+46
View File
@@ -1,6 +1,52 @@
<template>
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
name="单折线面积图"
:expanded="true"
>
<SettingItemBox name="线条">
<SettingItem name="宽度">
<n-input-number
v-model:value="item.lineStyle.width"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="类型">
<n-select
v-model:value="item.lineStyle.type"
size="small"
:options="lineConf.lineStyle.type"
></n-select>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import {
GlobalSetting,
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
},
})
const seriesList = computed(() => {
return props.optionData.series
})
</script>
src/packages/components/Charts/Lines/LineGradientSingle/index.ts
+1 -1
View File
@@ -6,7 +6,7 @@ export const LineGradientSingleConfig: ConfigType = {
key: 'LineGradientSingle',
chartKey: 'VLineGradientSingle',
conKey: 'VCLineGradientSingle',
title: '多折线面积图',
title: '单折线面积图',
category: ChatCategoryEnum.LINE,
categoryName: ChatCategoryEnumName.LINE,
package: PackagesCategoryEnum.CHARTS,
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+6 -7
View File
@@ -2,7 +2,7 @@
<v-chart
ref="vChartRef"
:theme="themeColor"
:option="option.options"
:option="option.value"
:manual-update="isPreview()"
autoresize>
</v-chart>
@@ -48,7 +48,7 @@ use([
const chartEditStore = useChartEditStore()
const option = reactive({
options: {}
value: {}
})
// 渐变色处理
@@ -66,18 +66,17 @@ watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof
color: 'rgba(0,0,0, 0)'
}
])
themeColor[index]
})
}
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
props.chartConfig.option = option.value
}, {
immediate: true
})
watch(() => props.chartConfig.option.dataset, () => {
option.options = props.chartConfig.option
}, {
deep: true
option.value = props.chartConfig.option
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
src/packages/components/Charts/Lines/LineGradients/config.ts
+2 -3
View File
@@ -33,9 +33,8 @@ const option = {
type: 'line',
smooth: false,
lineStyle: {
normal: {
width: 3
}
width: 3,
type: 'solid',
},
areaStyle: {
opacity: 0.8,
src/packages/components/Charts/Lines/LineGradients/config.vue
+46
View File
@@ -1,6 +1,52 @@
<template>
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
name="单折线面积图"
:expanded="true"
>
<SettingItemBox name="线条">
<SettingItem name="宽度">
<n-input-number
v-model:value="item.lineStyle.width"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="类型">
<n-select
v-model:value="item.lineStyle.type"
size="small"
:options="lineConf.lineStyle.type"
></n-select>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import {
GlobalSetting,
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
},
})
const seriesList = computed(() => {
return props.optionData.series
})
</script>
src/packages/components/Charts/Lines/LineGradients/index.ts
+1 -1
View File
@@ -6,7 +6,7 @@ export const LineGradientsConfig: ConfigType = {
key: 'LineGradients',
chartKey: 'VLineGradients',
conKey: 'VCLineGradients',
title: '单折线面积图',
title: '双折线面积图',
category: ChatCategoryEnum.LINE,
categoryName: ChatCategoryEnumName.LINE,
package: PackagesCategoryEnum.CHARTS,
src/packages/components/Charts/Lines/LineGradients/index.vue
+5 -6
View File
@@ -1,5 +1,5 @@
<template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
</template>
<script setup lang="ts">
@@ -42,7 +42,7 @@ use([
const chartEditStore = useChartEditStore()
const option = reactive({
options: {}
value: {}
})
// 渐变色处理
@@ -62,15 +62,14 @@ watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof
])
})
}
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
props.chartConfig.option = option.value
}, {
immediate: true
})
watch(() => props.chartConfig.option.dataset, () => {
option.options = props.chartConfig.option
}, {
deep: true
option.value = props.chartConfig.option
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)