center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix: 瀑布图渐变 百分比调整为30%

Browse Source
This commit is contained in:
dataeaseShu 2022-11-24 10:54:42 +08:00
parent 7dafec6cd4
commit 13b2269b32
9 changed files with 37 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/views/chart/chart/bar/bar_antv.js
View File

@ -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)
})
}

6
frontend/src/views/chart/chart/common/common_antv.js
View File

@ -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
}

6
frontend/src/views/chart/chart/gauge/gauge_antv.js
View File

@ -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

9
frontend/src/views/chart/chart/line/line_antv.js
View File

@ -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)
}
}
}

12
frontend/src/views/chart/chart/pie/pie_antv.js
View File

@ -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()

5
frontend/src/views/chart/chart/util.js
View File

@ -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': [

23
frontend/src/views/chart/chart/waterfall/waterfall.js
View File

@ -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)

2
frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
View File

@ -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()
}
}

1
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -1662,6 +1662,7 @@ export default {
name: 'ChartEdit',
components: {
PositionAdjust,
// eslint-disable-next-line
MarginSelector,
ScrollCfg,
CalcChartFieldEdit,