public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-06-17 21:08:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(图表): 优化柱条图图例导航按钮的布局和样式，调整相关属性以提升可用性

Browse Source
This commit is contained in:
jianneng-fit2cloud
2026-05-26 12:00:24 +08:00
parent c11946830e
commit ab94b48549
2 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,10 @@
import { Chart as G2Column } from '@antv/g2'
import { G2ChartView, G2DrawOptions } from '@/views/chart/components/js/panel/types/impl/g2'
import {
G2ChartView,
G2DrawOptions,
LEGEND_NAV_CONTROLLER_PADDING,
getLegendNavButtonPath
} from '@/views/chart/components/js/panel/types/impl/g2'
import {
BAR_AXIS_TYPE,
BAR_EDITOR_PROPERTY,
@@ -403,38 +408,28 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
const l = JSON.parse(JSON.stringify(customStyle.legend))
if (l.show) {
let position
const orient = l.orient
const legendSymbol = l.icon
const legendSize = l.size
const legendFontSize = l.fontSize
const legendColor = l.color
// position 图例布局
// layoutJustifyContent 图例实例布局
let layoutJustifyContent = 'center'
// 根据图例方向和位置设置布局和位置
if (orient === 'horizontal') {
// 水平布局
position = l.vPosition === 'center' ? 'bottom' : l.vPosition
let layoutJustifyContent = 'center'
if (l.vPosition === 'top' || l.vPosition === 'bottom') {
position = l.vPosition
layoutJustifyContent =
l.hPosition === 'left' && l.vPosition !== 'center'
l.hPosition === 'left'
? 'flex-start'
: l.hPosition === 'right' && l.vPosition !== 'center'
: l.hPosition === 'right'
? 'flex-end'
: 'center'
} else {
// 垂直布局
position = l.hPosition === 'center' ? 'left' : l.hPosition
layoutJustifyContent =
l.vPosition === 'top' && l.hPosition !== 'center'
? 'flex-start'
: l.vPosition === 'bottom' && l.hPosition !== 'center'
? 'flex-end'
: 'center'
position = l.hPosition
}
const verticalLegend = position === 'left' || position === 'right'
legend = {
color: {
orientation: orient,
position,
layout: {
justifyContent: layoutJustifyContent
@@ -443,11 +438,16 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
itemMarkerSize: legendSize,
itemLabelFontSize: legendFontSize,
itemLabelFill: legendColor,
navPageNumFontSize: legendSize,
navPageNumFontSize: legendFontSize,
navPageNumFill: legendColor,
navPageNumFillOpacity: 1,
navButtonD: getLegendNavButtonPath(legendSize),
navButtonSize: legendSize,
navOrientation: verticalLegend ? 'vertical' : 'horizontal',
navButtonFill: legendColor,
navButtonFillOpacity: 1,
navOrientation: 'horizontal',
...(verticalLegend ? { maxCols: 1 } : { maxRows: 1 }),
navControllerPadding: LEGEND_NAV_CONTROLLER_PADDING,
navControllerSpacing: 20
}
}

20
core/core-frontend/src/views/chart/components/js/panel/types/impl/g2.ts
View File

@@ -9,6 +9,15 @@ import { parseJson, setupSeriesColor } from '../../../util'
import { isEmpty } from 'lodash-es'
import { valueFormatter } from '../../../formatter'
export const LEGEND_NAV_CONTROLLER_PADDING = 10
export const LEGEND_NAV_CONTROLLER_SPACING = 12
export const getLegendNavButtonPath = (size: number) => [
['M', -size / 2, -size / 2],
['L', size / 2, -size / 2],
['L', 0, size / 2],
['Z']
]
export interface G2DrawOptions<O> extends AntVDrawOptions<O> {
/**
* 缩放比例
@@ -68,11 +77,16 @@ export abstract class G2ChartView<
itemLabelFill: legendColor,
itemLabelFillOpacity: 1,
itemLabelOpacity: 1,
navPageNumFontSize: legendSize,
navPageNumFontSize: legendFontSize,
navPageNumFill: legendColor,
navPageNumFillOpacity: 1,
navButtonD: getLegendNavButtonPath(legendSize),
navButtonSize: legendSize,
navOrientation: verticalLegend ? 'vertical' : 'horizontal',
navControllerSpacing: 4,
navButtonFill: legendColor,
navButtonFillOpacity: 1,
navOrientation: 'horizontal',
navControllerPadding: LEGEND_NAV_CONTROLLER_PADDING,
navControllerSpacing: LEGEND_NAV_CONTROLLER_SPACING,
...(verticalLegend ? { maxCols: 1 } : { maxRows: 1 })
}
} else {