diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 836eb53f2b..6fc6b5d082 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -1166,6 +1166,9 @@ export default { font_size: '字号', word_size_range: '字号区间', word_spacing: '文字间隔', + radiusColumnBar: '柱形', + rightAngle: '直角', + roundAngle: '圆角', table_layout_mode: '展示形式', table_layout_grid: '平铺展示', table_layout_tree: '树形展示', diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index 7879b7f438..7642d59876 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -148,6 +148,14 @@ declare interface ChartBasicStyle { * 柱宽 */ barWidth: number + /** + * 柱子形状:直角|圆角 + */ + radiusColumnBar?: 'rightAngle' | 'roundAngle' + /** + * 圆角柱倒角 + */ + columnBarRightAngleRadius: number /** * 柱间距 */ diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue index e981ac07f5..61031225da 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue @@ -273,6 +273,23 @@ onMounted(() => { + + + {{ t('chart.rightAngle') }} + {{ t('chart.roundAngle') }} + + + { color } } + if (basicStyle.radiusColumnBar === 'roundAngle') { + const columnStyle = { + radius: [ + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius + ] + } + options = { + ...options, + columnStyle + } + } return options } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts index 0a9c5cc4b0..0761db98c6 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts @@ -198,6 +198,20 @@ export class BidirectionalHorizontalBar extends G2PlotChartView< ...options, layout: basicStyle.layout } + if (basicStyle.radiusColumnBar === 'roundAngle') { + const barStyle = { + radius: [ + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius + ] + } + options = { + ...options, + barStyle + } + } return options } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/common.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/common.ts index d48243e348..b6578c4795 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/common.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/common.ts @@ -28,7 +28,7 @@ export const BAR_RANGE_EDITOR_PROPERTY: EditorProperty[] = [ export const BAR_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'background-overall-component': ['all'], - 'basic-style-selector': ['colors', 'alpha', 'gradient'], + 'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar'], 'label-selector': ['fontSize', 'color', 'labelFormatter'], 'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter', 'show'], 'x-axis-selector': [ diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts index da39748f56..eac47b3396 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts @@ -161,6 +161,20 @@ export class HorizontalBar extends G2PlotChartView { color } } + if (basicStyle.radiusColumnBar === 'roundAngle') { + const barStyle = { + radius: [ + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius + ] + } + options = { + ...options, + barStyle + } + } return options } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts index 3a853fbe5e..142acad842 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts @@ -163,6 +163,20 @@ export class ProgressBar extends G2PlotChartView { } } } + if (basicStyle.radiusColumnBar === 'roundAngle') { + const barStyle = { + radius: [ + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius + ] + } + options = { + ...options, + barStyle + } + } return options } protected configTooltip(chart: Chart, options: BarOptions): BarOptions { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts index 30a1b4cebc..a6d81e77eb 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts @@ -292,6 +292,20 @@ export class RangeBar extends G2PlotChartView { } } } + if (basicStyle.radiusColumnBar === 'roundAngle') { + const barStyle = { + radius: [ + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius, + basicStyle.columnBarRightAngleRadius + ] + } + options = { + ...options, + barStyle + } + } return options } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix-common.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix-common.ts index f094348493..bff49fdf3f 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix-common.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix-common.ts @@ -23,7 +23,8 @@ export const CHART_MIX_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'lineWidth', 'lineSymbol', 'lineSymbolSize', - 'lineSmooth' + 'lineSmooth', + 'radiusColumnBar' ], 'x-axis-selector': [ 'name', diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts index c69513fc4a..cd94f34471 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts @@ -225,7 +225,21 @@ export class ColumnLineMix extends G2PlotChartView { tempOption.geometryOptions[1].smooth = smooth tempOption.geometryOptions[1].point = point tempOption.geometryOptions[1].lineStyle = lineStyle + + if (s.radiusColumnBar === 'roundAngle') { + const columnStyle = { + radius: [ + s.columnBarRightAngleRadius, + s.columnBarRightAngleRadius, + s.columnBarRightAngleRadius, + s.columnBarRightAngleRadius + ] + } + tempOption.geometryOptions[0].columnStyle = columnStyle + tempOption.geometryOptions[1].columnStyle = columnStyle + } } + return tempOption }