From 509b11a6d43b96fc6cca30053dc0dce5cf27adb5 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Tue, 8 Apr 2025 09:24:18 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E8=BD=AE=E6=92=AD=E6=8F=90=E7=A4=BA=EF=BC=8C=E9=A5=BC=E5=9B=BE?= =?UTF-8?q?=E5=8F=AA=E8=83=BD=E8=BD=AE=E6=92=AD=E4=B8=80=E8=BD=AE=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BB=A5=E5=8F=8A=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E7=8E=AF=E5=BD=A2=E5=9B=BE=E4=B8=8D=E8=83=BD=E8=BD=AE=E6=92=AD?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/g2plot_tooltip_carousel.ts | 82 +++++++++++-------- .../components/js/panel/charts/pie/pie.ts | 8 ++ .../components/js/panel/common/common_antv.ts | 19 +++-- 3 files changed, 71 insertions(+), 38 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts index d05791f03c..80f8b00049 100644 --- a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts +++ b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts @@ -11,8 +11,33 @@ const CHART_CATEGORY = { COLUMN: ['bar', 'bar-stack', 'bar-group', 'bar-group-stack'], LINE: ['line', 'area', 'area-stack'], MIX: ['chart-mix', 'chart-mix-group', 'chart-mix-stack', 'chart-mix-dual-line'], - PIE: ['pie'] + PIE: ['pie', 'pie-donut'] } + +/** + * 判断是否为柱状图 + * @param chartType + */ +export function isColumn(chartType: string) { + return CHART_CATEGORY.COLUMN.includes(chartType) +} + +/** + * 判断是否为折线图 + * @param chartType + */ +export function isLine(chartType: string) { + return CHART_CATEGORY.LINE.includes(chartType) +} + +/** + * 判断是否为饼图 + * @param chartType + */ +export function isPie(chartType: string) { + return CHART_CATEGORY.PIE.includes(chartType) +} + const isSupport = (chartType: string) => { return Object.values(CHART_CATEGORY).some(category => category.includes(chartType)) } @@ -125,30 +150,6 @@ class ChartCarouselTooltip { }) } - /** - * 判断是否为柱状图 - * @param chartType - */ - static isColumn(chartType: string) { - return CHART_CATEGORY.COLUMN.includes(chartType) - } - - /** - * 判断是否为折线图 - * @param chartType - */ - static isLine(chartType: string) { - return CHART_CATEGORY.LINE.includes(chartType) - } - - /** - * 判断是否为饼图 - * @param chartType - */ - static isPie(chartType: string) { - return CHART_CATEGORY.PIE.includes(chartType) - } - /** * 暂停轮播 * @param id @@ -232,6 +233,9 @@ class ChartCarouselTooltip { if (this.currentIndex > this.values.length) { this.currentIndex = 0 this.hideTooltip() + this.plot.chart.showTooltip({ x: 0, y: 0 }) + this.plot.chart.getController('tooltip').update() + this.unHighlightPoint(currentValue) this.timers.interval = setTimeout(() => processArray(), this.config.interval) } else { // 如果未遍历完，继续处理下一个数据点 @@ -284,7 +288,7 @@ class ChartCarouselTooltip { private calculatePosition(value: string) { const view = this.plot.chart.views?.[0] || this.plot.chart // 饼图特殊处理 - if (['pie', 'pie-donut'].includes(this.chart.type)) { + if (CHART_CATEGORY.PIE.includes(this.chart.type)) { return this.getPieTooltipPosition(view, value) } if (this.plot instanceof DualAxes) { @@ -318,9 +322,12 @@ class ChartCarouselTooltip { .scale() .getGeometries()[0] .elements.find(item => item.data.field === value) - .getModel() + ?.getModel() + if (!piePoint) { + return { x: 0, y: 0 } + } const coordinates = [ - { x: piePoint.x[0], y: piePoint.y[0] }, + { x: [].concat(piePoint.x)[0], y: piePoint.y[0] }, { x: piePoint.x[0], y: piePoint.y[1] }, { x: piePoint.x[1], y: piePoint.y[0] }, { x: piePoint.x[1], y: piePoint.y[1] } @@ -366,17 +373,28 @@ class ChartCarouselTooltip { * 高亮指定元素 * */ private highlightElement(value: string) { + if (CHART_CATEGORY.LINE.includes(this.chart.type)) return this.unHighlightPoint(value) - const activeType = this.chart.type === 'pie' ? 'selected' : 'inactive' - this.plot.setState(activeType, (data: any) => data[this.config.xField] === value, true) + this.plot.setState( + this.getHighlightType(), + (data: any) => data[this.config.xField] === value, + true + ) } /** * 取消高亮 * **/ private unHighlightPoint(value?: string) { - const activeType = this.chart.type === 'pie' ? 'selected' : 'inactive' - this.plot.setState(activeType, (data: any) => data[this.config.xField] !== value, false) + if (CHART_CATEGORY.LINE.includes(this.chart.type)) return + this.plot.setState( + this.getHighlightType(), + (data: any) => data[this.config.xField] !== value, + false + ) + } + private getHighlightType() { + return 'active' } /** diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts index d45fbab7e7..f6f320ed87 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts @@ -120,6 +120,14 @@ export class Pie extends G2PlotChartView { field: { type: 'cat' } + }, + state: { + active: { + style: { + lineWidth: 2, + fillOpacity: 0.5 + } + } } } const options = this.setupOptions(chart, initOptions) diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index c83e6c8b54..6223b6dadf 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -42,7 +42,11 @@ import { qqMapStyleOptions, tdtMapStyleOptions } from '@/views/chart/components/js/panel/charts/map/common' -import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel' +import ChartCarouselTooltip, { + isPie, + isLine, + isColumn +} from '@/views/chart/components/js/g2plot_tooltip_carousel' const { t: tI18n } = useI18n() @@ -1724,11 +1728,14 @@ function calculateTooltipPosition( ) { // 辅助函数: 根据不同图表类型计算 Tooltip 的y位置 const getTooltipY = () => { - return ( - Number(chartElement.getBoundingClientRect().top) + - chartElement.getBoundingClientRect().height / 2 - ) - // return tooltipCtl.point.y + Number(chartElement.getBoundingClientRect().top) + if (isColumn(chart.type)) { + return ( + 60 + + Number(chartElement.getBoundingClientRect().top) + + chartElement.getBoundingClientRect().height / 2 + ) + } + return 60 + tooltipCtl.point.y + Number(chartElement.getBoundingClientRect().top) } if (isCarousel) { return {