From 7491d1288a458e8b495a7f35f508830f0c028e65 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Tue, 10 Mar 2026 17:29:47 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=88=86=E7=BB=84=E5=A0=86=E5=8F=A0=E6=9F=B1=E7=8A=B6=E5=9B=BE?= =?UTF-8?q?-=E7=B4=AF=E5=8A=A0-=E8=81=94=E5=8A=A8=E6=97=B6=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E7=BB=BF=E8=89=B2=E5=8C=BA=E5=9F=9F=E5=90=8E=E5=8F=B3?= =?UTF-8?q?=E4=BE=A7=E4=BC=9A=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AA=E7=BB=B4?= =?UTF-8?q?=E5=BA=A6=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91=EF=BC=8C?= =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6=E5=A4=84?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/panel/charts/g2/bar/bar.ts | 31 +++++++++- .../views/components/ChartComponentG2Plot.vue | 57 ++++++++++--------- 2 files changed, 59 insertions(+), 29 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts index edc749a342..a7f3b36b4a 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts @@ -81,10 +81,18 @@ export class Bar extends G2ChartView { title: false } }, + state: { + selected: { + stroke: 'black', + lineWidth: 1 + }, + unselected: { opacity: 0.5 } + }, interaction: { elementHighlight: { background: true, - region: true + region: true, + single: true }, elementSelect: { background: true, @@ -124,6 +132,27 @@ export class Bar extends G2ChartView { handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('interval:click', action) + const { functionCfg } = parseJson(chart.senior) + newChart.on('plot:click', e => { + // 点击背景事件，开启滑块时不触发，因为启动滑块后，通过 xy 获取点击位置对应的数据项不准确 + if (e.target.className === 'element-background' && !functionCfg?.sliderShow) { + const point = { x: e.x, y: e.y } + const snapRecords = newChart.getDataByXY(point, { shared: true }) + if (snapRecords && snapRecords.length > 0) { + newChart.emit('element:unselect', {}) + newChart.emit('interval:click', { data: { data: { ...snapRecords[0] } } }) + newChart.emit('element:select', { data: { data: snapRecords } }) + } + } + // 仅当点击在图形上时触发 + if (e.target.className === 'element' && e.target.__data__?.data) { + newChart.emit('element:unselect', {}) + const targetData = e.target.__data__?.data + const data = { data: { data: targetData } } + newChart.emit('interval:click', data) + newChart.emit('element:select', { data: { data: [{ ...targetData }] } }) + } + }) new G2TooltipCarousel(newChart, chart, data).start() extremumEvt(newChart, chart, options.children[0], container, scale, this.name === 'bar') return newChart diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue index 62394e23f9..5d6fb26955 100644 --- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue +++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue @@ -137,6 +137,7 @@ const viewTrack = ref(null) const clearLinkage = () => { linkageActiveHistory.value = false try { + myChart?.emit('element:unselect', {}) myChart?.setState('active', () => true, false) myChart?.setState('inactive', () => true, false) myChart?.setState('selected', () => true, false) @@ -146,10 +147,6 @@ const clearLinkage = () => { } const reDrawView = () => { linkageActiveHistory.value = false - const slider = myChart?.chart?.getController('slider') - if (!slider) { - myChart?.render() - } } const linkageActivePre = () => { if (linkageActiveHistory.value) { @@ -161,30 +158,34 @@ const linkageActivePre = () => { } const linkageActive = () => { linkageActiveHistory.value = true - myChart?.setState('active', () => true, false) - myChart?.setState('inactive', () => true, false) - myChart?.setState('selected', () => true, false) - myChart?.setState('active', param => { - if (Array.isArray(param)) { - return false - } else { - return checkSelected(param) - } - }) - myChart?.setState('inactive', param => { - if (Array.isArray(param)) { - return false - } else { - return !checkSelected(param) - } - }) - myChart?.setState('selected', param => { - if (Array.isArray(param)) { - return false - } else { - return checkSelected(param) - } - }) + try { + myChart?.setState('active', () => true, false) + myChart?.setState('inactive', () => true, false) + myChart?.setState('selected', () => true, false) + myChart?.setState('active', param => { + if (Array.isArray(param)) { + return false + } else { + return checkSelected(param) + } + }) + myChart?.setState('inactive', param => { + if (Array.isArray(param)) { + return false + } else { + return !checkSelected(param) + } + }) + myChart?.setState('selected', param => { + if (Array.isArray(param)) { + return false + } else { + return checkSelected(param) + } + }) + } catch (err) { + console.warn('linkageActive error') + } } const checkSelected = param => { // 获取当前视图的所有联动字段ID