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

feat: 支持渐变色全局变换

Browse Source
This commit is contained in:
MTrun
2022-03-11 10:22:54 +08:00
parent 0abcbbae53
commit 3560effe2c
7 changed files with 113 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/components/Charts/Lines/LineCommon/config.ts
+1 -1
View File
@@ -46,7 +46,7 @@ export const option = {
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(68, 181, 226, 0.3)',
shadowBlur: 5,
shadowBlur: 10,
shadowOffsetY: 20
},
data: [120, 200, 150, 80, 70, 110, 130]
src/packages/components/Charts/Lines/LineCommon/index.vue
+14 -7
View File
@@ -47,10 +47,17 @@ watchEffect(()=> {
})
// 渐变色处理
watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: string) => {
const themeColor = (chartColorsSearch as any)[newColor] || chartColorsSearch[defaultTheme]
props.chartConfig.option.series[0].lineStyle.color.colorStops[0].color = themeColor[0]
props.chartConfig.option.series[0].lineStyle.color.colorStops[1].color = themeColor[1]
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>
watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
props.chartConfig.option.series.forEach((value: any) => {
value.lineStyle.shadowColor = themeColor[2]
value.lineStyle.color.colorStops.forEach((v: {color: string}, i:number) => {
v.color = themeColor[i]
})
})
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
},
{
immediate: true
})
</script>
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+34 -9
View File
@@ -1,20 +1,18 @@
<template>
<VChart :theme="themeColor" :option="option" autoresize />
<VChart :theme="themeColor" :option="option.options" autoresize />
</template>
<script setup lang="ts">
import { computed, PropType } from 'vue'
import { reactive, watchEffect, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import {
GridComponent,
TooltipComponent,
LegendComponent,
} from 'echarts/components'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
const props = defineProps({
themeSetting: {
@@ -38,8 +36,35 @@ use([
TooltipComponent,
LegendComponent,
])
const chartEditStore = useChartEditStore()
const option = computed(() => {
return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
const option = reactive({
options: {}
})
watchEffect(()=> {
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
// 渐变色处理
watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
props.chartConfig.option.series.forEach((value: any, index: number) => {
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: themeColor[3]
},
{
offset: 1,
color: 'rgba(0,0,0, 0)'
}
])
themeColor[index]
})
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
},
{
immediate: true
})
</script>
src/packages/components/Charts/Lines/LineGradients/config.ts
+12 -16
View File
@@ -48,7 +48,7 @@ const option = {
}
])
},
data: [120, 200, 150, 80, 70, 110, 130],
data: [120, 200, 150, 80, 70, 110, 130]
},
{
name: 'data2',
@@ -60,21 +60,17 @@ const option = {
}
},
areaStyle: {
normal: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,202,149,0.3)'
},
{
offset: 1,
color: 'rgba(0,202,149,0)'
}
]),
shadowColor: 'rgba(0,202,149, 0.9)',
shadowBlur: 20
}
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,202,149,0.3)'
},
{
offset: 1,
color: 'rgba(0,202,149,0)'
}
])
},
data: [130, 130, 312, 268, 155, 117, 160]
}
src/packages/components/Charts/Lines/LineGradients/index.vue
+32 -9
View File
@@ -1,20 +1,18 @@
<template>
<VChart :theme="themeColor" :option="option" autoresize />
<VChart :theme="themeColor" :option="option.options" autoresize />
</template>
<script setup lang="ts">
import { computed, PropType } from 'vue'
import { reactive, watchEffect, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import {
GridComponent,
TooltipComponent,
LegendComponent,
} from 'echarts/components'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
const props = defineProps({
themeSetting: {
@@ -38,8 +36,33 @@ use([
TooltipComponent,
LegendComponent,
])
const chartEditStore = useChartEditStore()
const option = computed(() => {
return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
const option = reactive({
options: {}
})
watchEffect(()=> {
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
// 渐变色处理
watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
props.chartConfig.option.series.forEach((value: any, index: number) => {
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: themeColor[3 + index]
},
{
offset: 1,
color: 'rgba(0,0,0, 0)'
}
])
})
option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
},
{
immediate: true
})
</script>