From e5b86d9326edce2d5f081763c21ab2a32a9b9f4b Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Wed, 6 Mar 2024 17:59:24 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE):=20AntV=20=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E5=A4=AA=E9=95=BF=E4=BC=9A=E8=A2=AB=E9=81=AE=E6=8C=A1?= =?UTF-8?q?=20#8322=20#8201?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/customComponent/UserViewDialog.vue | 2 +- .../src/views/chart/chart/bar/bar_antv.js | 15 +- .../views/chart/chart/common/common_antv.js | 149 +++++++++++++----- .../views/chart/chart/funnel/funnel_antv.js | 12 +- .../src/views/chart/chart/line/line_antv.js | 9 +- .../src/views/chart/chart/mix/mix_antv.js | 4 +- .../src/views/chart/chart/pie/pie_antv.js | 7 +- .../src/views/chart/chart/radar/radar_antv.js | 12 +- .../views/chart/chart/scatter/scatter_antv.js | 8 +- .../views/chart/chart/treemap/treemap_antv.js | 12 +- .../views/chart/chart/waterfall/waterfall.js | 4 +- .../views/chart/chart/wordCloud/word_cloud.js | 3 + .../chart/components/ChartComponentG2.vue | 16 -- .../components/shapeAttr/SizeSelector.vue | 1 + .../components/shapeAttr/SizeSelectorAntV.vue | 1 + 15 files changed, 181 insertions(+), 74 deletions(-) diff --git a/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue b/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue index d1c9eeddc2..da73930ef5 100644 --- a/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue +++ b/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue @@ -40,7 +40,7 @@ 0 && xAxis[0].groupType === 'q') { tooltip.fields = ['x', 'category', 'value', 'group', 'field'] - tooltip.customContent = (title, data) => { - const key1 = xAxis[0]?.name - let key2, v1, v2, subGroup + tooltip.showTitle = true + tooltip.title = 'category' + let subGroupTpl = '' + if (xAxisExt?.length) { + subGroupTpl = '
' + + '{subGroupName}:' + + '{subGroupValue}' + + '
' + } + tooltip.itemTpl = '
  • ' + + subGroupTpl + + '
    ' + + '{name}:' + + '{x}' + + '
    ' + + '
    ' + + '{group}:' + + '{value}' + + '
    ' + + '
    • ' + tooltip.customItems = items => { + items?.forEach(item => { + item.title = item.data.category + item.name = xAxis[0]?.name - let hasSubGroup = false - - if (data && data.length > 0) { - title = data[0].data.category - key2 = data[0].data.group - subGroup = data[0].data.field - hasSubGroup = xAxisExt.length > 0 + item.group = item.data.group + item.subGroupValue = item.data.field + item.subGroupName = xAxisExt?.[0]?.name const fx = xAxis[0] if (fx.formatterCfg) { - v1 = valueFormatter(data[0].data.x, fx.formatterCfg) + item.x = valueFormatter(item.data.x, fx.formatterCfg) } else { - v1 = valueFormatter(data[0].data.x, formatterItem) + item.x = valueFormatter(item.data.x, formatterItem) } for (let i = 0; i < yAxis.length; i++) { const f = yAxis[i] - if (f.name === key2) { + if (f.name === item.group) { if (f.formatterCfg) { - v2 = valueFormatter(data[0].data.value, f.formatterCfg) + item.value = valueFormatter(item.data.value, f.formatterCfg) } else { - v2 = valueFormatter(data[0].data.value, formatterItem) + item.value = valueFormatter(item.data.value, formatterItem) } break } } - } - - return ` -
    -
    ${title}
    - ` + - (hasSubGroup - ? `
    - ${xAxisExt[0].name}:${subGroup} -
    ` : ``) + - ` -
    - ${key1}:${v1} -
    -
    - ${key2}:${v2} -
    -
     
    -
    - ` + }) + return items } } } @@ -1160,3 +1163,75 @@ export function getMeta(chart) { } return meta } +export function getTooltipContainer(id) { + const curDom = document.getElementById(id) + if (curDom) { + curDom.remove() + } + const g2Tooltip = document.createElement('div') + g2Tooltip.setAttribute('id', id) + g2Tooltip.classList.add('g2-tooltip') + + const g2TooltipTitle = document.createElement('div') + g2TooltipTitle.classList.add('g2-tooltip-title') + g2Tooltip.appendChild(g2TooltipTitle) + + const g2TooltipList = document.createElement('ul') + g2TooltipList.classList.add('g2-tooltip-list') + g2Tooltip.appendChild(g2TooltipList) + const full = document.getElementsByClassName('fullscreen') + if (full.length) { + full.item(0).appendChild(g2Tooltip) + } else { + document.body.appendChild(g2Tooltip) + } + return g2Tooltip +} +export function configPlotTooltipEvent(chart, plot) { + const customAttr = JSON.parse(chart.customAttr) + const t = JSON.parse(JSON.stringify(customAttr.tooltip)) + if (!t.show) { + return + } + // 手动处理 tooltip 的显示和隐藏事件，需配合源码理解 + // https://github.com/antvis/G2/blob/master/src/chart/controller/tooltip.ts#showTooltip + plot.on('tooltip:show', () => { + const tooltipCtl = plot.chart.getController('tooltip') + if (!tooltipCtl) { + return + } + if (tooltipCtl.tooltip) { + // 处理视图放大后再关闭 tooltip 的 dom 被清除 + const container = tooltipCtl.tooltip.cfg.container + const dom = document.getElementById(container.id) + if (!dom) { + const full = document.getElementsByClassName('fullscreen') + if (full.length) { + full.item(0).appendChild(container) + } else { + document.body.appendChild(container) + } + } + } + const event = plot.chart.interactions.tooltip?.context?.event + plot.chart.getOptions().tooltip.follow = false + tooltipCtl.title = Math.random().toString() + plot.chart.getTheme().components.tooltip.x = event.clientX + plot.chart.getTheme().components.tooltip.y = event.clientY + }) + // https://github.com/antvis/G2/blob/master/src/chart/controller/tooltip.ts#hideTooltip + plot.on('plot:mouseleave', () => { + const tooltipCtl = plot.chart.getController('tooltip') + if (!tooltipCtl) { + return + } + plot.chart.getOptions().tooltip.follow = true + tooltipCtl.hideTooltip() + }) +} + +export const TOOLTIP_TPL = '
  • ' + + '' + + '{name}:' + + '{value}' + + '
    • ' diff --git a/core/frontend/src/views/chart/chart/funnel/funnel_antv.js b/core/frontend/src/views/chart/chart/funnel/funnel_antv.js index 61a5a25a08..d2632978e8 100644 --- a/core/frontend/src/views/chart/chart/funnel/funnel_antv.js +++ b/core/frontend/src/views/chart/chart/funnel/funnel_antv.js @@ -1,4 +1,11 @@ -import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv' +import { + configPlotTooltipEvent, + getLabel, + getLegend, + getPadding, + getTheme, + getTooltip +} from '@/views/chart/chart/common/common_antv' import { Funnel } from '@antv/g2plot' import { antVCustomColor } from '@/views/chart/chart/util' @@ -54,7 +61,8 @@ export function baseFunnelOptionAntV(plot, container, chart, action) { plot.off('interval:click') plot.on('interval:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } diff --git a/core/frontend/src/views/chart/chart/line/line_antv.js b/core/frontend/src/views/chart/chart/line/line_antv.js index 1fe56e47f5..df3c81549e 100644 --- a/core/frontend/src/views/chart/chart/line/line_antv.js +++ b/core/frontend/src/views/chart/chart/line/line_antv.js @@ -9,7 +9,8 @@ import { getPadding, getSlider, getAnalyse, - setGradientColor + setGradientColor, + configPlotTooltipEvent } from '@/views/chart/chart/common/common_antv' import { antVCustomColor, handleEmptyDataStrategy } from '@/views/chart/chart/util' import _ from 'lodash' @@ -110,7 +111,8 @@ export function baseLineOptionAntV(plot, container, chart, action) { plot.off('point:click') plot.on('point:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } @@ -220,6 +222,7 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) { plot.off('point:click') plot.on('point:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } diff --git a/core/frontend/src/views/chart/chart/mix/mix_antv.js b/core/frontend/src/views/chart/chart/mix/mix_antv.js index 737416abda..a41c813946 100644 --- a/core/frontend/src/views/chart/chart/mix/mix_antv.js +++ b/core/frontend/src/views/chart/chart/mix/mix_antv.js @@ -1,4 +1,5 @@ import { + configPlotTooltipEvent, getLabel, getLegend, getPadding, @@ -107,7 +108,8 @@ export function baseMixOptionAntV(plot, container, chart, action) { plot.on('point:click', action) plot.off('interval:click') plot.on('interval:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } diff --git a/core/frontend/src/views/chart/chart/pie/pie_antv.js b/core/frontend/src/views/chart/chart/pie/pie_antv.js index 00fbb8ba81..83c57cddd5 100644 --- a/core/frontend/src/views/chart/chart/pie/pie_antv.js +++ b/core/frontend/src/views/chart/chart/pie/pie_antv.js @@ -1,4 +1,5 @@ import { + configPlotTooltipEvent, getLabel, getLegend, getPadding, @@ -90,7 +91,8 @@ export function basePieOptionAntV(plot, container, chart, action) { plot.off('interval:click') plot.on('interval:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } @@ -167,6 +169,7 @@ export function basePieRoseOptionAntV(plot, container, chart, action) { plot.off('interval:click') plot.on('interval:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } diff --git a/core/frontend/src/views/chart/chart/radar/radar_antv.js b/core/frontend/src/views/chart/chart/radar/radar_antv.js index 11dc0cc9b5..3a01685023 100644 --- a/core/frontend/src/views/chart/chart/radar/radar_antv.js +++ b/core/frontend/src/views/chart/chart/radar/radar_antv.js @@ -1,4 +1,11 @@ -import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv' +import { + configPlotTooltipEvent, + getLabel, + getLegend, + getPadding, + getTheme, + getTooltip +} from '@/views/chart/chart/common/common_antv' import { Radar } from '@antv/g2plot' import { antVCustomColor } from '@/views/chart/chart/util' import { minBy, maxBy } from 'lodash' @@ -146,7 +153,8 @@ export function baseRadarOptionAntV(plot, container, chart, action) { plot.off('point:click') plot.on('point:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } diff --git a/core/frontend/src/views/chart/chart/scatter/scatter_antv.js b/core/frontend/src/views/chart/chart/scatter/scatter_antv.js index f6e84a17c3..57f8611cc4 100644 --- a/core/frontend/src/views/chart/chart/scatter/scatter_antv.js +++ b/core/frontend/src/views/chart/chart/scatter/scatter_antv.js @@ -7,7 +7,10 @@ import { getYAxis, getPadding, getSlider, - getAnalyse + getAnalyse, + getTooltipContainer, + TOOLTIP_TPL, + configPlotTooltipEvent } from '@/views/chart/chart/common/common_antv' import { Scatter } from '@antv/g2plot' @@ -92,6 +95,7 @@ export function baseScatterOptionAntV(plot, container, chart, action) { plot.off('point:click') plot.on('point:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } diff --git a/core/frontend/src/views/chart/chart/treemap/treemap_antv.js b/core/frontend/src/views/chart/chart/treemap/treemap_antv.js index 406602f539..91def99b53 100644 --- a/core/frontend/src/views/chart/chart/treemap/treemap_antv.js +++ b/core/frontend/src/views/chart/chart/treemap/treemap_antv.js @@ -1,4 +1,11 @@ -import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv' +import { + configPlotTooltipEvent, + getLabel, + getLegend, + getPadding, + getTheme, + getTooltip +} from '@/views/chart/chart/common/common_antv' import { Treemap } from '@antv/g2plot' export function baseTreemapOptionAntV(plot, container, chart, action) { @@ -51,6 +58,7 @@ export function baseTreemapOptionAntV(plot, container, chart, action) { plot.off('polygon:click') plot.on('polygon:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } diff --git a/core/frontend/src/views/chart/chart/waterfall/waterfall.js b/core/frontend/src/views/chart/chart/waterfall/waterfall.js index 79797d01c3..d5e9886423 100644 --- a/core/frontend/src/views/chart/chart/waterfall/waterfall.js +++ b/core/frontend/src/views/chart/chart/waterfall/waterfall.js @@ -1,4 +1,5 @@ import { + configPlotTooltipEvent, getLabel, getPadding, getTheme, @@ -108,7 +109,8 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) { plot.off('interval:click') plot.on('interval:click', action) - +// 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } diff --git a/core/frontend/src/views/chart/chart/wordCloud/word_cloud.js b/core/frontend/src/views/chart/chart/wordCloud/word_cloud.js index 81980dbb23..0095f2baf7 100644 --- a/core/frontend/src/views/chart/chart/wordCloud/word_cloud.js +++ b/core/frontend/src/views/chart/chart/wordCloud/word_cloud.js @@ -1,4 +1,5 @@ import { + configPlotTooltipEvent, getPadding, getTheme, getTooltip @@ -48,5 +49,7 @@ export function baseWordCloudOptionAntV(plot, container, chart, action) { plot = new WordCloud(container, options) plot.off('point:click') plot.on('point:click', action) + // 处理 tooltip 被其他视图遮挡 + configPlotTooltipEvent(chart, plot) return plot } diff --git a/core/frontend/src/views/chart/components/ChartComponentG2.vue b/core/frontend/src/views/chart/components/ChartComponentG2.vue index 3cfc23bd60..246982c139 100644 --- a/core/frontend/src/views/chart/components/ChartComponentG2.vue +++ b/core/frontend/src/views/chart/components/ChartComponentG2.vue @@ -34,7 +34,6 @@
    @@ -482,18 +481,3 @@ export default { } } - diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue index d0d6644476..8f3e3fd531 100644 --- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue +++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelector.vue @@ -1165,6 +1165,7 @@