mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/packages/components/Charts/Lines/LineCommon/config.vue
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: {

20
src/packages/components/Charts/Lines/LineCommon/index.vue
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)

13
src/packages/components/Charts/Lines/LineGradientSingle/config.ts
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)'
}
])
},
}
}
]
}

46
src/packages/components/Charts/Lines/LineGradientSingle/config.vue
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>

2
src/packages/components/Charts/Lines/LineGradientSingle/index.ts
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,

13
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
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)

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

@ -33,9 +33,8 @@ const option = {
type: 'line',
smooth: false,
lineStyle: {
normal: {
width: 3
}
width: 3,
type: 'solid',
},
areaStyle: {
opacity: 0.8,

46
src/packages/components/Charts/Lines/LineGradients/config.vue
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>

2
src/packages/components/Charts/Lines/LineGradients/index.ts
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,

11
src/packages/components/Charts/Lines/LineGradients/index.vue
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)

31
src/packages/components/Charts/Mores/WaterPolo/config.vue
View File

@ -1,22 +1,41 @@
<template>
<CollapseItem name="水球" :expanded="true">
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
name="水球"
:expanded="true"
>
<SettingItemBox name="内容">
<SettingItem name="数值">
<n-input-number
v-model:value="optionData.series[0].data[0]"
v-model:value="item.data[0]"
:min="0"
:step="0.01"
size="small"
placeholder="水球数值"
></n-input-number>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.color[0].colorStops[0].color"
></n-color-picker>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.color[0].colorStops[1].color"
></n-color-picker>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="背景" :alone="true">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.series[0].backgroundStyle.color"
v-model:value="item.backgroundStyle.color"
></n-color-picker>
</SettingItem>
</SettingItemBox>
@ -24,7 +43,7 @@
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { PropType, computed } from 'vue'
import { option } from './config'
import {
CollapseItem,
@ -38,4 +57,8 @@ const props = defineProps({
required: true,
},
})
const seriesList = computed(() => {
return props.optionData.series
})
</script>

11
src/packages/components/Charts/Mores/WaterPolo/index.vue
View File

@ -2,7 +2,7 @@
<v-chart
ref="vChartRef"
:theme="themeColor"
:option="option.options"
:option="option.value"
:manual-update="isPreview()"
autoresize
></v-chart>
@ -41,7 +41,7 @@ use([CanvasRenderer, GridComponent])
const chartEditStore = useChartEditStore()
const option = reactive({
options: {},
value: {},
})
// 渐变色处理
@ -50,6 +50,9 @@ watch(
(newColor: keyof typeof chartColorsSearch) => {
if (!isPreview()) {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
// 背景颜色
props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
// 水球颜色
props.chartConfig.option.series[0].color[0].colorStops = [
{
offset: 0,
@ -61,7 +64,7 @@ watch(
},
]
}
option.options = props.chartConfig.option
option.value = props.chartConfig.option
},
{
immediate: true,
@ -70,7 +73,7 @@ watch(
const updateDataset = (newData: string | number) => {
props.chartConfig.option.series[0].data = [parseFloat(`${newData}`).toFixed(2)]
option.options = props.chartConfig.option
option.value = props.chartConfig.option
}
watch(

4
src/views/chart/ContentLayers/components/LayersListItem/index.vue
View File

@ -12,7 +12,7 @@
:fallback-src="requireErrorImg()"
></n-image>
<n-ellipsis>
<n-text class="list-text">
<n-text class="list-text" :depth="2">
{{ props.componentData.chartConfig.title }}
</n-text>
</n-ellipsis>
@ -107,7 +107,7 @@ $textSize: 10px;
@include hover-border-color('hover-border-color');
}
.list-text {
padding-left: 10px;
padding-left: 6px;
font-size: $textSize;
}
}