From ea75f161a7e328b37887a0b4162917985ec1fc76 Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Fri, 11 Mar 2022 10:22:54 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=B8=90=E5=8F=98?= =?UTF-8?q?=E8=89=B2=E5=85=A8=E5=B1=80=E5=8F=98=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Charts/Lines/LineCommon/config.ts | 2 +- .../Charts/Lines/LineCommon/index.vue | 21 ++++++--- .../Charts/Lines/LineGradientSingle/index.vue | 43 +++++++++++++++---- .../Charts/Lines/LineGradients/config.ts | 28 ++++++------ .../Charts/Lines/LineGradients/index.vue | 41 ++++++++++++++---- src/settings/chartThemes/index.ts | 37 ++++++++-------- .../chart/ContentEdit/hooks/useDrag.hook.ts | 1 - 7 files changed, 113 insertions(+), 60 deletions(-) diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts index 2e3871ba..e5ce5744 100644 --- a/src/packages/components/Charts/Lines/LineCommon/config.ts +++ b/src/packages/components/Charts/Lines/LineCommon/config.ts @@ -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] diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue index 6bc9e27d..ad656c2f 100644 --- a/src/packages/components/Charts/Lines/LineCommon/index.vue +++ b/src/packages/components/Charts/Lines/LineCommon/index.vue @@ -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) -}) - +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 + }) + \ No newline at end of file diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue index 636a00dd..4cfc3876 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue @@ -1,20 +1,18 @@ diff --git a/src/packages/components/Charts/Lines/LineGradients/config.ts b/src/packages/components/Charts/Lines/LineGradients/config.ts index 7f1ea302..a8b18542 100644 --- a/src/packages/components/Charts/Lines/LineGradients/config.ts +++ b/src/packages/components/Charts/Lines/LineGradients/config.ts @@ -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] } diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue index 636a00dd..bbe83261 100644 --- a/src/packages/components/Charts/Lines/LineGradients/index.vue +++ b/src/packages/components/Charts/Lines/LineGradients/index.vue @@ -1,20 +1,18 @@ diff --git a/src/settings/chartThemes/index.ts b/src/settings/chartThemes/index.ts index d472bdad..f33aaec4 100644 --- a/src/settings/chartThemes/index.ts +++ b/src/settings/chartThemes/index.ts @@ -38,11 +38,11 @@ export const chartColorsName = { customed: '暗淡', macarons: '马卡龙', walden: '蓝绿', - wonderland: '青草', purplePassion: '深紫', vintage: '复古', - chalk: '粉红', + chalk: '粉青', westeros: '灰粉', + wonderland: '青草', essos: '橘红', shine: '深色', roma: '罗马红' @@ -54,29 +54,32 @@ export const chartColorsshow = { customed: 'linear-gradient(to right, #5470c6 0%, #91cc75 100%)', macarons: 'linear-gradient(to right, #2ec7c9 0%, #b6a2de 100%)', walden: 'linear-gradient(to right, #3fb1e3 0%, #6be6c1 100%)', - wonderland: 'linear-gradient(to right, #4ea397 0%, #22c3aa 100%)', purplePassion: 'linear-gradient(to right, #9b8bba 0%, #e098c7 100%)', vintage: 'linear-gradient(to right, #d87c7c 0%, #919e8b 100%)', - chalk: 'linear-gradient(to right, #fc97af 0%, #d4a4eb 100%)', + chalk: 'linear-gradient(to right, #fc97af 0%, #87f7cf 100%)', westeros: 'linear-gradient(to right, #516b91 0%, #edafda 100%)', + wonderland: 'linear-gradient(to right, #4ea397 0%, #22c3aa 100%)', essos: 'linear-gradient(to right, #893448 0%, #d95850 100%)', shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)', roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)' } -// 主题色列表 +// 渐变主题色列表（阴影，渐变1，渐变2） export const chartColorsSearch = { - dark: ['#4992ff', '#7cffb2'], - customed: ['#5470c6', '#91cc75'], - macarons: ['#2ec7c9', '#b6a2de'], - walden: ['#3fb1e3', '#6be6c1'], - wonderland: ['#4ea397', '#22c3aa'], - purplePassion: ['#9b8bba', '#e098c7'], - vintage: ['#d87c7c', '#919e8b'], - chalk: ['#fc97af', '#d4a4eb'], - westeros: ['#516b91', '#edafda'], - essos: ['#893448', '#d95850'], - shine: ['#c12e34', '#0098d9'], - roma: ['#e01f54', '#5e4ea5'], + dark: ['#4992ff', '#7cffb2', 'rgba(68, 181, 226, 0.3)', 'rgba(73, 146, 255, 0.5)', 'rgba(124, 255, 178, 0.5)'], + customed: ['#5470c6', '#91cc75', 'rgba(84, 112, 198, 0.5)', 'rgba(84, 112, 198, 0.5)', 'rgba(145, 204, 117, 0.5)'], + macarons: ['#2ec7c9', '#b6a2de', 'rgba(182, 162, 222, 0.3)', 'rgba(46, 199, 201, 0.5)', 'rgba(182, 162, 222, 0.5)'], + + walden: ['#3fb1e3', '#6be6c1', 'rgba(68, 181, 226, 0.3)', 'rgba(63, 177, 227, 0.5)', 'rgba(107, 230, 193, 0.5)'], + purplePassion: ['#9b8bba', '#e098c7', 'rgba(182, 162, 222, 0.3)', 'rgba(155, 139, 186, 0.5)', 'rgba(237, 175, 218, 0.5)'], + vintage: ['#d87c7c', '#919e8b', 'rgba(182, 162, 222, 0.3)', 'rgba(216, 124, 124, 0.5)', 'rgba(145, 158, 139, 0.5)'], + + chalk: ['#fc97af', '#87f7cf', 'rgba(135, 247, 207, 0.3)', 'rgba(252, 151, 175, 0.5)', 'rgba(135, 247, 207, 0.5)'], + westeros: ['#516b91', '#edafda', 'rgba(81, 107, 145, 0.3)', 'rgba(81, 107, 145, 0.5)', 'rgba(89, 196, 230, 0.5)'], + wonderland: ['#4ea397', '#22c3aa', 'rgba(68, 181, 226, 0.3)', 'rgba(78, 163, 151, 0.5)', 'rgba(34, 195, 170, 0.5)'], + + essos: ['#893448', '#d95850', 'rgba(137, 52, 72, 0.3)', 'rgba(137, 52, 72, 0.5)', 'rgba(217, 88, 80, 0.5)'], + shine: ['#c12e34', '#0098d9', 'rgba(137, 52, 72, 0.3)', 'rgba(193, 46, 52, 0.5)', 'rgba(230, 182, 0, 0.5)'], + roma: ['#e01f54', '#5e4ea5', 'rgba(137, 52, 72, 0.3)', 'rgba(224, 31, 84, 0.5)', 'rgba(94, 78, 165, 0.5)'], } // 默认主题详细配置 diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 5bf4e01e..6a5af3ca 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -188,7 +188,6 @@ export const useMousePointHandle = ( }, 50) const mouseup = () => { - // 设置拖拽状态 chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) chartEditStore.setMousePosition(0, 0) document.removeEventListener('mousemove', mousemove)