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
}