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

fix: 解决不能预览渐变色的问题

Browse Source
This commit is contained in:
MTrun 2022-03-12 11:29:57 +08:00
parent 3560effe2c
commit 0ee76c1579
6 changed files with 57 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/packages/components/Charts/Lines/LineCommon/config.ts
View File

@ -1,6 +1,7 @@
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
import { LineCommonConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
export const includes = ['legend', 'xAxis', 'yAxis']
@ -36,16 +37,16 @@ export const option = {
colorStops: [
{
offset: 0,
color: '#42a5f5' // 0% 处的颜色
color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
},
{
offset: 1,
color: '#48D8BF' // 100% 处的颜色
color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(68, 181, 226, 0.3)',
shadowColor: chartColorsSearch[defaultTheme][2],
shadowBlur: 10,
shadowOffsetY: 20
},

26
src/packages/components/Charts/Lines/LineCommon/index.vue
View File

@ -3,9 +3,9 @@
</template>
<script setup lang="ts">
import { computed, PropType, watch, reactive, watchEffect } from 'vue';
import { PropType, watch, reactive } from 'vue';
import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
@ -42,19 +42,17 @@ 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) => {
value.lineStyle.shadowColor = themeColor[2]
value.lineStyle.color.colorStops.forEach((v: {color: string}, i:number) => {
v.color = themeColor[i]
// 初始化与渐变色处理
watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
if (!document.location.hash.includes('preview')) {
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)
},
{

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

@ -2,6 +2,7 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
import { LineGradientSingleConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import { graphic } from 'echarts/core'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
export const includes = ['legend', 'xAxis', 'yAxis']
@ -40,11 +41,11 @@ const options = {
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(25,163,223,.5)'
color: chartColorsSearch[defaultTheme][3]
},
{
offset: 1,
color: 'rgba(25,163,223, 0)'
color: 'rgba(0,0,0,0)'
}
])
},

36
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
View File

@ -3,7 +3,7 @@
</template>
<script setup lang="ts">
import { reactive, watchEffect, watch, PropType } from 'vue'
import { reactive, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
@ -42,26 +42,24 @@ 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]
})
if (!document.location.hash.includes('preview')) {
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)
},
{

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

@ -2,6 +2,7 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
import { LineGradientsConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import { graphic } from 'echarts/core'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
export const includes = ['legend', 'xAxis', 'yAxis']
@ -40,11 +41,11 @@ const option = {
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(25,163,223,.3)'
color: chartColorsSearch[defaultTheme][3]
},
{
offset: 1,
color: 'rgba(25,163,223, 0)'
color: 'rgba(0,0,0,0)'
}
])
},
@ -64,11 +65,11 @@ const option = {
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,202,149,0.3)'
color: chartColorsSearch[defaultTheme][4]
},
{
offset: 1,
color: 'rgba(0,202,149,0)'
color: 'rgba(0,0,0,0)'
}
])
},

33
src/packages/components/Charts/Lines/LineGradients/index.vue
View File

@ -3,7 +3,7 @@
</template>
<script setup lang="ts">
import { reactive, watchEffect, watch, PropType } from 'vue'
import { reactive, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
@ -41,25 +41,24 @@ const chartEditStore = useChartEditStore()
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)'
}
])
})
if (!document.location.hash.includes('preview')) {
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)
},
{