diff --git a/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java b/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java index 290b691398..0acde3d49a 100644 --- a/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java +++ b/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java @@ -123,6 +123,10 @@ public class ChartDataManage { List sizeField = getSizeField(view); yAxis.addAll(sizeField); } + if (StringUtils.equalsIgnoreCase(view.getType(), "quadrant")) { + List yAxisExt = new ArrayList<>(view.getYAxisExt()); + yAxis.addAll(yAxisExt); + } List extStack = new ArrayList<>(view.getExtStack()); List extBubble = new ArrayList<>(view.getExtBubble()); if (ObjectUtils.isNotEmpty(view.getExtLabel()) && enableExtData(view.getType())) { diff --git a/core/core-frontend/src/assets/svg/quadrant-dark.svg b/core/core-frontend/src/assets/svg/quadrant-dark.svg new file mode 100644 index 0000000000..b78cb0611d --- /dev/null +++ b/core/core-frontend/src/assets/svg/quadrant-dark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/core/core-frontend/src/assets/svg/quadrant.svg b/core/core-frontend/src/assets/svg/quadrant.svg new file mode 100644 index 0000000000..9f06298b2d --- /dev/null +++ b/core/core-frontend/src/assets/svg/quadrant.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue index db09310e7a..fc4be90547 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -1279,16 +1279,16 @@ const setActive = (ele, type = 'dimension') => { isCtrl.value = false } const activeChild = type === 'dimension' ? activeDimension : activeQuota - const deactiveChild = type === 'quota' ? activeDimension : activeQuota - deactiveChild.value = [] + const deactivateChild = type === 'quota' ? activeDimension : activeQuota + deactivateChild.value = [] activeChild.value = activeChild.value.some(item => item.id === ele.id) ? [] : [ele] } const setActiveCtrl = (ele, type = 'dimension') => { isCtrl.value = true const activeChild = type === 'dimension' ? activeDimension : activeQuota - const deactiveChild = type === 'quota' ? activeDimension : activeQuota - deactiveChild.value = [] + const deactivateChild = type === 'quota' ? activeDimension : activeQuota + deactivateChild.value = [] const index = activeChild.value.findIndex(item => item.id === ele.id) if (index !== -1) { activeChild.value.splice(index, 1) @@ -1308,8 +1308,8 @@ const dragStart = (e: DragEvent) => { const singleDragStart = (e: DragEvent, ele, type) => { const activeChild = type === 'dimension' ? activeDimension : activeQuota - const deactiveChild = type === 'quota' ? activeDimension : activeQuota - deactiveChild.value = [] + const deactivateChild = type === 'quota' ? activeDimension : activeQuota + deactivateChild.value = [] if (!activeChild.value.length) { activeChild.value = [ele] } diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 0ee979407a..e727d01097 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -674,19 +674,19 @@ export const DEFAULT_QUADRANT_STYLE: QuadrantAttr = { regionStyle: [ { fill: '#fdfcfc', - fillOpacity: 0.5 + fillOpacity: 0 }, { fill: '#fafdfa', - fillOpacity: 0.5 + fillOpacity: 0 }, { fill: '#fdfcfc', - fillOpacity: 0.5 + fillOpacity: 0 }, { fill: '#fafdfa', - fillOpacity: 0.5 + fillOpacity: 0 } ], labels: [ @@ -1284,16 +1284,16 @@ export const CHART_TYPE_CONFIGS = [ { render: 'antv', category: 'distribute', - value: 'funnel', - title: t('chart.chart_funnel'), - icon: 'funnel' + value: 'quadrant', + title: t('chart.chart_quadrant'), + icon: 'quadrant' }, { render: 'antv', category: 'distribute', - value: 'quadrant', - title: t('chart.chart_quadrant'), - icon: 'scatter' + value: 'funnel', + title: t('chart.chart_funnel'), + icon: 'funnel' } ] }, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts index 87f77935e1..8d584fa688 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts @@ -72,7 +72,16 @@ export class Quadrant extends G2PlotChartView { 'legend-selector': ['icon', 'orient', 'color', 'fontSize', 'hPosition', 'vPosition'], 'quadrant-selector': ['regionStyle', 'label', 'lineStyle'] } - axis: AxisType[] = ['xAxis', 'yAxis', 'extBubble', 'filter', 'drill', 'extLabel', 'extTooltip'] + axis: AxisType[] = [ + 'xAxis', + 'yAxis', + 'yAxisExt', + 'extBubble', + 'filter', + 'drill', + 'extLabel', + 'extTooltip' + ] axisConfig: AxisConfig = { ...this['axisConfig'], extBubble: { @@ -81,14 +90,19 @@ export class Quadrant extends G2PlotChartView { limit: 1 }, xAxis: { - name: `${t('chart.drag_block_table_data_column')} / ${t('chart.dimension')}`, + name: `${t('chart.form_type')} / ${t('chart.dimension')}`, type: 'd', limit: 1 }, yAxis: { - name: `${t('chart.drag_block_table_data_column')} / ${t('chart.quota')}`, + name: `${t('chart.x_axis')} / ${t('chart.quota')}`, type: 'q', - limit: 2 + limit: 1 + }, + yAxisExt: { + name: `${t('chart.y_axis')} / ${t('chart.quota')}`, + type: 'q', + limit: 1 } } @@ -96,7 +110,7 @@ export class Quadrant extends G2PlotChartView { const colorFieldObj = { id: chart.xAxis[0]?.id, name: chart.xAxis[0]?.['originName'] } const sizeFieldObj = { id: chart.extBubble[0]?.id, name: chart.extBubble[0]?.['originName'] } const xFieldObj = { id: chart.yAxis[0]?.id, name: chart.yAxis[0]?.['originName'] } - const yFieldObj = { id: chart.yAxis[1]?.id, name: chart.yAxis[1]?.['originName'] } + const yFieldObj = { id: chart.yAxisExt[0]?.id, name: chart.yAxisExt[0]?.['originName'] } return { colorFieldObj, sizeFieldObj, xFieldObj, yFieldObj } } public getUniqueObjects(arr: T[]): T[] { @@ -295,7 +309,8 @@ export class Quadrant extends G2PlotChartView { const tooltipAttr = customAttr.tooltip const xAxisTitle = chart.xAxis[0] const yAxisTitle = chart.yAxis[0] - if (!tooltipAttr.show || (!xAxisTitle && !yAxisTitle)) { + const yAxisExtTitle = chart.yAxisExt[0] + if (!tooltipAttr.show || (!xAxisTitle && !yAxisTitle && !yAxisExtTitle)) { return { ...options, tooltip: false @@ -303,8 +318,8 @@ export class Quadrant extends G2PlotChartView { } xAxisTitle['show'] = true yAxisTitle['show'] = true + yAxisExtTitle['show'] = true tooltipAttr.seriesTooltipFormatter?.push(xAxisTitle) - tooltipAttr.seriesTooltipFormatter?.push(yAxisTitle) const formatterMap = tooltipAttr.seriesTooltipFormatter ?.filter(i => i.show) .reduce((pre, next) => { @@ -312,23 +327,30 @@ export class Quadrant extends G2PlotChartView { return pre }, {}) as Record const tooltip: ScatterOptions['tooltip'] = { - showTitle: false, + showTitle: true, + title: (_title, datum) => { + return datum?.[xAxisTitle['originName']] + }, customItems(originalItems) { if (!tooltipAttr.seriesTooltipFormatter?.length) { return originalItems } const result = [] - originalItems?.forEach(item => { - const formatter = formatterMap[item.name] - if (formatter) { - const value = - formatter.groupType === 'q' - ? valueFormatter(parseFloat(item.value as string), formatter.formatterCfg) - : item.value - const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName - result.push({ color: item.color, name, value }) - } - }) + originalItems + ?.filter(i => i.name !== xAxisTitle['originName']) + .forEach(item => { + const formatter = formatterMap[item.name] + if (formatter) { + const value = + formatter.groupType === 'q' + ? valueFormatter(parseFloat(item.value as string), formatter.formatterCfg) + : item.value + const name = isEmpty(formatter.chartShowName) + ? formatter.name + : formatter.chartShowName + result.push({ color: item.color, name, value }) + } + }) return result } } @@ -343,10 +365,18 @@ export class Quadrant extends G2PlotChartView { ...chart.customStyle.yAxis.splitLine, show: false } + chart.customStyle.yAxisExt.splitLine = { + ...chart.customStyle.yAxisExt.splitLine, + show: false + } chart.customStyle.yAxis.axisLine = { ...chart.customStyle.yAxis.axisLine, show: true } + chart.customStyle.yAxisExt.axisLine = { + ...chart.customStyle.yAxisExt.axisLine, + show: true + } chart.customAttr.quadrant = { ...DEFAULT_QUADRANT_STYLE }