From 03634cd100f4af8a1d549addbdfd4adf551d46bb Mon Sep 17 00:00:00 2001 From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com> Date: Tue, 22 Nov 2022 11:00:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=B8=90=E5=8F=98?= =?UTF-8?q?=E8=89=B2AntV=E5=9B=BE=E5=BA=93=E7=9A=84=E6=89=80=E6=9C=89?= =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E3=80=81=E9=9D=A2=E7=A7=AF=E5=9B=BE?= =?UTF-8?q?=E3=80=81=E9=A5=BC=E5=9B=BE=E3=80=81=E7=8E=AF=E5=BD=A2=E5=9B=BE?= =?UTF-8?q?=E3=80=81=E4=BB=AA=E8=A1=A8=E7=9B=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 1 + frontend/src/lang/tw.js | 1 + frontend/src/lang/zh.js | 1 + frontend/src/views/chart/chart/bar/bar_antv.js | 10 ++++++++++ frontend/src/views/chart/chart/chart.js | 1 + .../src/views/chart/chart/gauge/gauge_antv.js | 13 +++++++++++++ frontend/src/views/chart/chart/line/line_antv.js | 11 +++++++++++ frontend/src/views/chart/chart/pie/pie_antv.js | 12 ++++++++++++ frontend/src/views/chart/chart/util.js | 15 ++++++++++++++- .../chart/components/shapeAttr/ColorSelector.vue | 12 ++++++++++++ 10 files changed, 76 insertions(+), 1 deletion(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 75277831cc..7416bd843a 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -915,6 +915,7 @@ export default { password_input_error: 'Original password input error' }, chart: { + gradient: 'Gradient', layer_controller: 'Quota switch', suspension: 'Suspension', chart_background: 'Component background', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 34cb3bb7f6..c62f20507e 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -915,6 +915,7 @@ export default { password_input_error: '原始密碼輸入錯誤' }, chart: { + gradient: '漸變', layer_controller: '指標切換', suspension: '懸浮', chart_background: '組件背景', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index a29a2b0b17..d36c92ed67 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -914,6 +914,7 @@ export default { password_input_error: '原始密码输入错误' }, chart: { + gradient: '渐变', layer_controller: '指标切换', suspension: '悬浮', chart_background: '组件背景', diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js index 8a95f15dd8..b799ec2517 100644 --- a/frontend/src/views/chart/chart/bar/bar_antv.js +++ b/frontend/src/views/chart/chart/bar/bar_antv.js @@ -103,6 +103,11 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta options.isPercent = chart.type === 'percentage-bar-stack' // custom color options.color = antVCustomColor(chart) + if (customAttr.color.gradient) { + options.color = options.color.map((ele) => { + return `l(270) 0:#ffffff00 1:${ele}` + }) + } // 开始渲染 if (plot) { @@ -199,6 +204,11 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt } // custom color options.color = antVCustomColor(chart) + if (customAttr.color.gradient) { + options.color = options.color.map((ele) => { + return `l(0) 0:#ffffff00 1:${ele}` + }) + } // 开始渲染 if (plot) { diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index a1083cc57a..c9c81595cc 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -28,6 +28,7 @@ export const DEFAULT_COLOR_CASE = { tableBorderColor: '#E6E7E4', seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false} areaBorderColor: '#303133', + gradient: false, areaBaseColor: '#FFFFFF' } diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js index 86473dab33..e7a25db3f7 100644 --- a/frontend/src/views/chart/chart/gauge/gauge_antv.js +++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js @@ -124,6 +124,8 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) { } } } + console.log('hasThreshold', hasThreshold) + if (hasThreshold) { options.range = { color: theme.styleSheet.paletteQualitative10, @@ -152,6 +154,17 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) { } } + if (customAttr.color.gradient) { + const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => `l(0) 0:#ffffff00 1:${ele}`) + if (!options.range) { + options.range = { + color: colorList + } + } else { + options.range.color = colorList + } + } + // 开始渲染 if (plot) { plot.destroy() diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js index 52cd766dfe..fa6f38bf52 100644 --- a/frontend/src/views/chart/chart/line/line_antv.js +++ b/frontend/src/views/chart/chart/line/line_antv.js @@ -178,6 +178,17 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) { } // custom color options.color = antVCustomColor(chart) + const areaColors = [...options.color, ...options.color] + if (customAttr.color.gradient) { + options.areaStyle = () => { + const cr = areaColors.shift() + if (cr) { + return { + fill: `l(270) 0:#ffffff00 1:${cr}` + } + } + } + } // 开始渲染 if (plot) { diff --git a/frontend/src/views/chart/chart/pie/pie_antv.js b/frontend/src/views/chart/chart/pie/pie_antv.js index 00fbb8ba81..b3ad13f44a 100644 --- a/frontend/src/views/chart/chart/pie/pie_antv.js +++ b/frontend/src/views/chart/chart/pie/pie_antv.js @@ -82,6 +82,12 @@ export function basePieOptionAntV(plot, container, chart, action) { // custom color options.color = antVCustomColor(chart) + if (customAttr.color.gradient) { + options.color = options.color.map((ele) => { + return `l(270) 0:#ffffff00 1:${ele}` + }) + } + // 开始渲染 if (plot) { plot.destroy() @@ -159,6 +165,12 @@ export function basePieRoseOptionAntV(plot, container, chart, action) { // custom color options.color = antVCustomColor(chart) + if (customAttr.color.gradient) { + options.color = options.color.map((ele) => { + return `l(270) 0:#ffffff00 1:${ele}` + }) + } + // 开始渲染 if (plot) { plot.destroy() diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index c14f28c8d7..6a0593eed8 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -280,6 +280,7 @@ export const TYPE_CONFIGS = [ 'color-selector': [ 'value', 'custom', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -464,7 +465,8 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', - 'alpha' + 'alpha', + 'gradient' ], 'size-selector-ant-v': [ 'lineWidth', @@ -624,6 +626,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -703,6 +706,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -782,6 +786,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -861,6 +866,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1004,6 +1010,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1083,6 +1090,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1160,6 +1168,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1219,6 +1228,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1279,6 +1289,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1336,6 +1347,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1396,6 +1408,7 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', + 'gradient', 'alpha' ], 'size-selector-ant-v': [ diff --git a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue index 6c8d7a0749..03bbf03191 100644 --- a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue +++ b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue @@ -151,6 +151,17 @@ + + + + { this.colorForm['modifyName'] = item