public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-05-15 13:32:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(图表): 优化条形图，区间条形图，散点图的点击效果，点击标签可直接跳转 #11355 #12727

Browse Source
This commit is contained in:
wisonic-s
2025-04-09 17:11:47 +08:00
committed by GitHub
parent f362faf982
commit c1bcd393cc
3 changed files with 128 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
View File

@@ -101,6 +101,17 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
const newChart = new Bar(container, options)
newChart.on('interval:click', action)
if (options.label) {
newChart.on('label:click', e => {
action({
x: e.x,
y: e.y,
data: {
data: e.target.attrs.data
}
})
})
}
configPlotTooltipEvent(chart, newChart)
configAxisLabelLengthLimit(chart, newChart)
return newChart
@@ -237,6 +248,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
attrs: {
x: 0,
y: 0,
data,
text: value,
textAlign: 'start',
textBaseline: 'top',
@@ -319,8 +331,24 @@ export class HorizontalStackBar extends HorizontalBar {
baseOptions.label.style.fill = labelAttr.color
const label = {
...baseOptions.label,
formatter: function (param: Datum) {
return valueFormatter(param.value, labelAttr.labelFormatter)
formatter: function (data: Datum) {
const value = valueFormatter(data.value, labelAttr.formatter)
const group = new Group({})
group.addShape({
type: 'text',
attrs: {
x: 0,
y: 0,
data,
text: value,
textAlign: 'start',
textBaseline: 'top',
fontSize: labelAttr.fontSize,
fontFamily: chart.fontFamily,
fill: labelAttr.color
}
})
return group
}
}
return {
@@ -438,11 +466,29 @@ export class HorizontalPercentageStackBar extends HorizontalStackBar {
const l = parseJson(customAttr).label
const label = {
...baseOptions.label,
formatter: function (param: Datum) {
if (!param.value) {
return '0%'
formatter: function (data: Datum) {
let value = data.value
if (value) {
value = (Math.round(value * 10000) / 100).toFixed(l.reserveDecimalCount) + '%'
} else {
value = '0%'
}
return (Math.round(param.value * 10000) / 100).toFixed(l.reserveDecimalCount) + '%'
const group = new Group({})
group.addShape({
type: 'text',
attrs: {
x: 0,
y: 0,
data,
text: value,
textAlign: 'start',
textBaseline: 'top',
fontSize: l.fontSize,
fontFamily: chart.fontFamily,
fill: l.color
}
})
return group
}
}
return {

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

@@ -22,6 +22,7 @@ import {
import { Datum } from '@antv/g2plot/esm/types/common'
import { useI18n } from '@/hooks/web/useI18n'
import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
import { Group } from '@antv/g-canvas'
const { t } = useI18n()
const DEFAULT_DATA = []
@@ -170,6 +171,17 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
const newChart = new BarClass(container, options)
newChart.on('interval:click', action)
if (options.label) {
newChart.on('label:click', e => {
action({
x: e.x,
y: e.y,
data: {
data: e.target.attrs.data
}
})
})
}
configPlotTooltipEvent(chart, newChart)
configAxisLabelLengthLimit(chart, newChart)
return newChart
@@ -391,7 +403,22 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
valueFormatter(param.values[1], labelAttr.labelFormatter)
}
}
return res
const group = new Group({})
group.addShape({
type: 'text',
attrs: {
x: 0,
y: 0,
data: param,
text: res,
textAlign: 'start',
textBaseline: 'top',
fontSize: labelAttr.fontSize,
fontFamily: chart.fontFamily,
fill: labelAttr.color
}
})
return group
}
}
return {

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

@@ -14,6 +14,8 @@ import {
import { useI18n } from '@/hooks/web/useI18n'
import { defaults, isEmpty } from 'lodash-es'
import { DEFAULT_LEGEND_STYLE } from '@/views/chart/components/editor/util/chart'
import { type Datum } from '@antv/g2plot/esm'
import { Group } from '@antv/g-canvas'
const { t } = useI18n()
/**
@@ -144,6 +146,17 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
const { Scatter: G2Scatter } = await import('@antv/g2plot/esm/plots/scatter')
const newChart = new G2Scatter(container, options)
newChart.on('point:click', action)
if (options.label) {
newChart.on('label:click', e => {
action({
x: e.x,
y: e.y,
data: {
data: e.target.attrs.data
}
})
})
}
configPlotTooltipEvent(chart, newChart)
return newChart
}
@@ -277,6 +290,41 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
return optionTmp
}
protected configLabel(chart: Chart, options: ScatterOptions): ScatterOptions {
const tmpOption = super.configLabel(chart, options)
if (!tmpOption.label) {
return options
}
const { label: labelAttr } = parseJson(chart.customAttr)
tmpOption.label.style.fill = labelAttr.color
const label = {
...tmpOption.label,
formatter: function (data: Datum) {
const value = valueFormatter(data.value, labelAttr.formatter)
const group = new Group({})
group.addShape({
type: 'text',
attrs: {
x: 0,
y: 0,
data,
text: value,
textAlign: 'start',
textBaseline: 'top',
fontSize: labelAttr.fontSize,
fontFamily: chart.fontFamily,
fill: labelAttr.color
}
})
return group
}
}
return {
...tmpOption,
label
}
}
protected setupOptions(chart: Chart, options: ScatterOptions) {
return flow(
this.configTheme,