dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(图表): 散点图、象限图、漏斗图支持设置序列颜色

Browse Source
This commit is contained in:
wisonic 2024-07-23 12:24:19 +08:00
parent fbf27d93ca
commit 5ca8fbb017
3 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
View File

@ -1,6 +1,6 @@
import { FunnelOptions, Funnel as G2Funnel } from '@antv/g2plot/esm/plots/funnel'
import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
import { flow } from '@/views/chart/components/js/util'
import { flow, setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util'
import { getPadding } from '../../common/common_antv'
import { useI18n } from '@/hooks/web/useI18n'
@ -22,7 +22,7 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'basic-style-selector': ['colors', 'alpha'],
'basic-style-selector': ['colors', 'alpha', 'seriesColor'],
'label-selector': ['fontSize', 'color', 'hPosition', 'labelFormatter'],
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'title-selector': [
@ -121,9 +121,13 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
return tmpOptions
}
public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
return setUpSingleDimensionSeriesColor(chart, data)
}
protected setupOptions(chart: Chart, options: FunnelOptions): FunnelOptions {
return flow(
this.configTheme,
this.configSingleDimensionColor,
this.configLabel,
this.configMultiSeriesTooltip,
this.configLegend

29
core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
View File

@ -3,7 +3,7 @@ import {
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter'
import { flow, parseJson } from '../../../util'
import { flow, parseJson, setUpSingleDimensionSeriesColor } from '../../../util'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import { useI18n } from '@/hooks/web/useI18n'
import { isEmpty, map } from 'lodash-es'
@ -28,7 +28,13 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
'quadrant-selector'
]
propertyInner: EditorPropertyInner = {
'basic-style-selector': ['colors', 'alpha', 'scatterSymbol', 'scatterSymbolSize'],
'basic-style-selector': [
'colors',
'alpha',
'scatterSymbol',
'scatterSymbolSize',
'seriesColor'
],
'label-selector': ['fontSize', 'color'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'x-axis-selector': [
@ -393,10 +399,25 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
}
return chart
}
protected configColor(chart: Chart, options: ScatterOptions): ScatterOptions {
const { xAxis, yAxis, yAxisExt } = chart
if (!(xAxis?.length && yAxis?.length && yAxisExt?.length)) {
return options
}
return this.configSingleDimensionColor(chart, options)
}
public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
const { xAxis, yAxis, yAxisExt } = chart
if (!(xAxis?.length && yAxis?.length && yAxisExt?.length)) {
return []
}
const tmp = data[0].data
return setUpSingleDimensionSeriesColor(chart, tmp)
}
protected setupOptions(chart: Chart, options: ScatterOptions) {
return flow(
this.configTheme,
this.configColor,
this.configLabel,
this.configTooltip,
this.configLegend,
@ -405,7 +426,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
this.configAnalyse,
this.configSlider,
this.configBasicStyle
)(chart, options)
)(chart, options, {}, this)
}
constructor() {

13
core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
View File

@ -27,7 +27,13 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
'linkage'
]
propertyInner: EditorPropertyInner = {
'basic-style-selector': ['colors', 'alpha', 'scatterSymbol', 'scatterSymbolSize'],
'basic-style-selector': [
'colors',
'alpha',
'scatterSymbol',
'scatterSymbolSize',
'seriesColor'
],
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'x-axis-selector': [
@ -69,6 +75,10 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
axis: AxisType[] = ['xAxis', 'yAxis', 'extBubble', 'filter', 'drill', 'extLabel', 'extTooltip']
axisConfig: AxisConfig = {
...this['axisConfig'],
yAxis: {
...this['axisConfig'].yAxis,
limit: undefined
},
extBubble: {
name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
type: 'q',
@ -234,6 +244,7 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
protected setupOptions(chart: Chart, options: ScatterOptions) {
return flow(
this.configTheme,
this.configColor,
this.configLabel,
this.configTooltip,
this.configLegend,