From 13b2269b32e2e111b126be96f4e93eb9b6b7974a Mon Sep 17 00:00:00 2001 From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com> Date: Thu, 24 Nov 2022 10:54:42 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=80=91=E5=B8=83=E5=9B=BE=E6=B8=90?= =?UTF-8?q?=E5=8F=98=20=E7=99=BE=E5=88=86=E6=AF=94=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E4=B8=BA30%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/chart/chart/bar/bar_antv.js | 7 +++--- .../views/chart/chart/common/common_antv.js | 6 +++++ .../src/views/chart/chart/gauge/gauge_antv.js | 6 +++-- .../src/views/chart/chart/line/line_antv.js | 9 ++++---- .../src/views/chart/chart/pie/pie_antv.js | 12 ---------- frontend/src/views/chart/chart/util.js | 5 +--- .../views/chart/chart/waterfall/waterfall.js | 23 ++++++++++++------- .../components/shapeAttr/ColorSelector.vue | 2 +- frontend/src/views/chart/view/ChartEdit.vue | 1 + 9 files changed, 37 insertions(+), 34 deletions(-) diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js index b799ec2517..ef626eeabe 100644 --- a/frontend/src/views/chart/chart/bar/bar_antv.js +++ b/frontend/src/views/chart/chart/bar/bar_antv.js @@ -8,7 +8,8 @@ import { getYAxis, getPadding, getSlider, - getAnalyse + getAnalyse, + setGradientColor } from '@/views/chart/chart/common/common_antv' import { antVCustomColor } from '@/views/chart/chart/util' @@ -105,7 +106,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta options.color = antVCustomColor(chart) if (customAttr.color.gradient) { options.color = options.color.map((ele) => { - return `l(270) 0:#ffffff00 1:${ele}` + return setGradientColor(ele, customAttr.color.gradient, 270) }) } @@ -206,7 +207,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt options.color = antVCustomColor(chart) if (customAttr.color.gradient) { options.color = options.color.map((ele) => { - return `l(0) 0:#ffffff00 1:${ele}` + return setGradientColor(ele, customAttr.color.gradient) }) } diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js index 236d7da1b0..759f9c09a6 100644 --- a/frontend/src/views/chart/chart/common/common_antv.js +++ b/frontend/src/views/chart/chart/common/common_antv.js @@ -879,3 +879,9 @@ function getLineDash(type) { return [0, 0] } } + +export function setGradientColor(rawColor, show = false, angle = 0) { + const item = rawColor.split(',') + item.splice(3, 1, '0.3)') + return show ? `l(${angle}) 0:${item.join(',')} 1:${rawColor}` : rawColor +} diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js index b4b3844d6e..5070f6f2c1 100644 --- a/frontend/src/views/chart/chart/gauge/gauge_antv.js +++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js @@ -1,4 +1,4 @@ -import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv' +import { getPadding, getTheme, setGradientColor } from '@/views/chart/chart/common/common_antv' import { Gauge } from '@antv/g2plot' import { DEFAULT_LABEL, DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart' import { getScaleValue } from '@/components/canvas/utils/style' @@ -154,7 +154,9 @@ 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}`) + const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => { + return setGradientColor(ele, customAttr.color.gradient) + }) if (!options.range) { options.range = { color: colorList diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js index d1a9c93948..c3ef3bfe59 100644 --- a/frontend/src/views/chart/chart/line/line_antv.js +++ b/frontend/src/views/chart/chart/line/line_antv.js @@ -8,7 +8,8 @@ import { getYAxis, getPadding, getSlider, - getAnalyse + getAnalyse, + setGradientColor } from '@/views/chart/chart/common/common_antv' import { antVCustomColor, handleEmptyDataStrategy } from '@/views/chart/chart/util' import _ from 'lodash' @@ -183,10 +184,10 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) { const areaColors = [...options.color, ...options.color] if (customAttr.color.gradient) { options.areaStyle = () => { - const cr = areaColors.shift() - if (cr) { + const ele = areaColors.shift() + if (ele) { return { - fill: `l(270) 0:#ffffff00 1:${cr}` + fill: setGradientColor(ele, customAttr.color.gradient, 270) } } } diff --git a/frontend/src/views/chart/chart/pie/pie_antv.js b/frontend/src/views/chart/chart/pie/pie_antv.js index b3ad13f44a..00fbb8ba81 100644 --- a/frontend/src/views/chart/chart/pie/pie_antv.js +++ b/frontend/src/views/chart/chart/pie/pie_antv.js @@ -82,12 +82,6 @@ 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() @@ -165,12 +159,6 @@ 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 00084eace9..93e41b6a89 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -943,6 +943,7 @@ export const TYPE_CONFIGS = [ 'color-selector': [ 'value', 'custom', + 'gradient', 'alpha' ], 'label-selector-ant-v': [ @@ -1168,7 +1169,6 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', - 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1228,7 +1228,6 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', - 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1289,7 +1288,6 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', - 'gradient', 'alpha' ], 'size-selector-ant-v': [ @@ -1347,7 +1345,6 @@ export const TYPE_CONFIGS = [ 'value', 'colorPanel', 'customColor', - 'gradient', 'alpha' ], 'size-selector-ant-v': [ diff --git a/frontend/src/views/chart/chart/waterfall/waterfall.js b/frontend/src/views/chart/chart/waterfall/waterfall.js index 61a20c363e..79797d01c3 100644 --- a/frontend/src/views/chart/chart/waterfall/waterfall.js +++ b/frontend/src/views/chart/chart/waterfall/waterfall.js @@ -4,7 +4,8 @@ import { getTheme, getTooltip, getXAxis, - getYAxis + getYAxis, + setGradientColor } from '@/views/chart/chart/common/common_antv' import { Waterfall } from '@antv/g2plot' import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter' @@ -28,11 +29,17 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) { } // data const data = chart.data.data + const [risingColorRgba, fallingColorRgba, totalColorRgba] = theme.styleSheet.paletteQualitative10 + + let customAttrCopy = {} + if (chart.customAttr) { + customAttrCopy = JSON.parse(chart.customAttr) + } // total const total = { label: '合计', style: { - fill: theme.styleSheet.paletteQualitative10[2] + fill: setGradientColor(totalColorRgba, customAttrCopy.color.gradient, 270) } } // options @@ -50,25 +57,25 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) { items: [ { name: '增加', marker: { style: { - fill: theme.styleSheet.paletteQualitative10[0] + fill: setGradientColor(risingColorRgba, customAttrCopy.color.gradient, 270) } }}, { name: '减少', marker: { style: { - fill: theme.styleSheet.paletteQualitative10[1] + fill: setGradientColor(fallingColorRgba, customAttrCopy.color.gradient, 270) } }}, { name: '合计', marker: { style: { - fill: theme.styleSheet.paletteQualitative10[2] + fill: setGradientColor(totalColorRgba, customAttrCopy.color.gradient, 270) } }} ] }, xAxis: xAxis, yAxis: yAxis, - risingFill: theme.styleSheet.paletteQualitative10[0], - fallingFill: theme.styleSheet.paletteQualitative10[1], + risingFill: setGradientColor(risingColorRgba, customAttrCopy.color.gradient, 270), + fallingFill: setGradientColor(fallingColorRgba, customAttrCopy.color.gradient, 270), total: total, interactions: [ { @@ -79,7 +86,7 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) { } ] } - // size + let customAttr = {} if (chart.customAttr) { customAttr = JSON.parse(chart.customAttr) diff --git a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue index e4972fc2d0..7c7ae00757 100644 --- a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue +++ b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue @@ -477,7 +477,7 @@ export default { this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor - + this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false) this.initCustomColor() } } diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 30ac660e0c..eb6fa9ef82 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -1662,6 +1662,7 @@ export default { name: 'ChartEdit', components: { PositionAdjust, + // eslint-disable-next-line MarginSelector, ScrollCfg, CalcChartFieldEdit,