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

fix(图表): 修复开启条件样式后，圆角失效的问题

Browse Source
This commit is contained in:
jianneng-fit2cloud
2025-04-16 14:38:38 +08:00
committed by jianneng-fit2cloud
parent 1761dfc68f
commit d497d6c892
6 changed files with 78 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -187,7 +187,7 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
}
options = {
...options,
...configRoundAngle(basicStyle, 'columnStyle')
...configRoundAngle(chart, 'columnStyle')
}
let columnWidthRatio
const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio

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

@@ -6,6 +6,7 @@ import { cloneDeep, defaultTo, isEmpty, map } from 'lodash-es'
import {
configAxisLabelLengthLimit,
configPlotTooltipEvent,
configRoundAngle,
getPadding,
getTooltipContainer,
getTooltipItemConditionColor,
@@ -212,17 +213,9 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
...options,
layout: basicStyle.layout
}
if (['roundAngle', 'topRoundAngle'].includes(basicStyle.radiusColumnBar)) {
const valueField = basicStyle.layout === 'vertical' ? 'valueExt' : 'value'
const radius = Array(basicStyle.radiusColumnBar === 'roundAngle' ? 4 : 2).fill(
basicStyle.columnBarRightAngleRadius
)
options = {
...options,
barStyle: datum => ({
radius: datum[valueField] && radius.length === 2 ? [0, 0, ...radius] : radius
})
}
options = {
...options,
...configRoundAngle(chart, 'barStyle')
}
return options
}

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

@@ -176,11 +176,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
}
options = {
...options,
...configRoundAngle(
basicStyle,
'barStyle',
['bar-stack-horizontal', 'percentage-bar-stack-horizontal'].includes(this.name)
)
...configRoundAngle(chart, 'barStyle')
}
let barWidthRatio

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

@@ -3,6 +3,7 @@ import { flow, hexColorToRGBA, parseJson } from '../../../util'
import {
configAxisLabelLengthLimit,
configPlotTooltipEvent,
configRoundAngle,
getTooltipContainer,
setGradientColor,
TOOLTIP_TPL
@@ -183,14 +184,9 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
}
}
}
if (['roundAngle', 'topRoundAngle'].includes(basicStyle.radiusColumnBar)) {
const radius = Array(basicStyle.radiusColumnBar === 'roundAngle' ? 4 : 2).fill(
basicStyle.columnBarRightAngleRadius
)
options = {
...options,
barStyle: { radius }
}
options = {
...options,
...configRoundAngle(chart, 'barStyle')
}
let barWidthRatio

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

@@ -6,6 +6,7 @@ import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
import {
configAxisLabelLengthLimit,
configPlotTooltipEvent,
configRoundAngle,
getPadding,
getTooltipContainer,
setGradientColor,
@@ -321,25 +322,10 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
}
}
}
if (['roundAngle', 'topRoundAngle'].includes(basicStyle.radiusColumnBar)) {
const radius = Array(2).fill(basicStyle.columnBarRightAngleRadius)
options = {
...options,
barStyle: datum => {
const isTopRound = basicStyle.radiusColumnBar === 'topRoundAngle'
const baseRadius = [...radius, ...radius]
return {
radius:
datum.values[0] < datum.values[1]
? isTopRound
? [...radius, 0, 0]
: baseRadius
: isTopRound
? [0, 0, ...radius]
: baseRadius
}
}
}
options = {
...options,
...configRoundAngle(chart, 'barStyle')
}
let barWidthRatio
const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio

81
core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
View File

@@ -2217,8 +2217,6 @@ export function handleConditionsStyle(chart: Chart, options) {
// 辅助函数：配置柱条样式颜色，条形图为barStyle,柱形图为columnStyle
const columnStyle = data => {
return {
...options.columnStyle,
...options.barStyle,
...(data[colorField]?.[0] ? { fill: data[colorField][0] } : {})
}
}
@@ -2232,8 +2230,8 @@ export function handleConditionsStyle(chart: Chart, options) {
const tmpOption = {
...options,
rawFields,
columnStyle: columnStyle,
barStyle: columnStyle,
...configRoundAngle(chart, 'columnStyle', columnStyle),
...configRoundAngle(chart, 'barStyle', columnStyle),
tooltip: {
...options.tooltip,
...(options.tooltip['customItems']
@@ -2397,36 +2395,80 @@ export const numberToChineseUnderHundred = (num: number): string => {
/**
* 配置柱条图的圆角
* @param basicStyle
* @param styleName
* @param isStackHorizontalBar 堆叠条形图、百分比条形图
* @param callBack 自定义其他属性函数
*/
export const configRoundAngle = (
basicStyle: DeepPartial<ChartBasicStyle>,
styleName: string,
isStackHorizontalBar?: boolean
) => {
export const configRoundAngle = (chart: Chart, styleName: string, callBack?: (datum) => {}) => {
const { basicStyle } = parseJson(chart.customAttr)
if (['roundAngle', 'topRoundAngle'].includes(basicStyle.radiusColumnBar)) {
const radius = Array(2).fill(basicStyle.columnBarRightAngleRadius)
const topRadius = [0, 0, ...radius]
const bottomRadius = [...radius, 0, 0]
const finalRadius = [...radius, ...radius]
const isTopRound = basicStyle.radiusColumnBar === 'topRoundAngle'
// 对称条形图
if (chart.type === 'bidirectional-bar') {
const valueField = basicStyle.layout === 'vertical' ? 'valueExt' : 'value'
return {
[styleName]: datum => ({
radius: datum[valueField] && isTopRound ? topRadius : isTopRound ? radius : finalRadius,
...(callBack ? callBack(datum) : {})
})
}
}
// 进度条
if (chart.type === 'progress-bar') {
return {
[styleName]: datum => {
return {
radius: isTopRound ? bottomRadius : finalRadius,
...(callBack ? callBack(datum) : {})
}
}
}
}
// 区间条形图
if (chart.type === 'bar-range') {
return {
[styleName]: datum => {
return {
radius:
datum.values[0] < datum.values[1]
? isTopRound
? bottomRadius
: finalRadius
: isTopRound
? topRadius
: finalRadius,
...(callBack ? callBack(datum) : {})
}
}
}
}
// 堆叠条形图、百分比条形图第一个和最后一个反转
const isStackHorizontalBar = [
'bar-stack-horizontal',
'percentage-bar-stack-horizontal'
].includes(chart.type)
// 配置柱条样式
const style = datum => {
if (isTopRound && datum.isFirst && datum.isLast) {
return { radius }
return { radius, ...(callBack ? callBack(datum) : {}) }
}
if (!isTopRound && datum.isFirst && datum.isLast) {
return { radius: [...radius, ...radius] }
return { radius: finalRadius, ...(callBack ? callBack(datum) : {}) }
}
// 堆叠条形图、百分比条形图第一个和最后一个反转
if (isStackHorizontalBar) {
if (datum.isLast || (!isTopRound && datum.isFirst)) {
return {
radius: datum.isFirst ? [0, 0, ...radius] : radius
radius: datum.isFirst ? topRadius : radius,
...(callBack ? callBack(datum) : {})
}
}
} else if (datum.isFirst || (!isTopRound && datum.isLast)) {
return {
radius: datum.isLast ? [0, 0, ...radius] : radius
radius: datum.isLast ? topRadius : radius,
...(callBack ? callBack(datum) : {})
}
}
}
@@ -2434,13 +2476,16 @@ export const configRoundAngle = (
[styleName]: style
}
}
return {}
return {
[styleName]: datum => {
return { ...(callBack ? callBack(datum) : {}) }
}
}
}
/**
* 为圆角组装options.data，
* 添加 isFirst 和 isLast 属性
* 不会影响原始数据排序
* @param data
* @param isGroup
* @param isStack