Merge pull request #10155 from ulleo/radius-column-bar

feat(图表): 柱形图/条形图支持设置圆角柱形
2025-02-24 19:42:56 +08:00 · 2024-06-06 18:08:43 +08:00 · 2024-06-06 18:08:43 +08:00 · 4fe8174622
commit 4fe8174622
parent 31aff43313 ee8bce2fe4
12 changed files with 117 additions and 2 deletions
--- 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: '树形展示',
--- 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
  /**
   * 柱间距
   */
--- 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(() => {
      </el-row>
    </div>

+    <el-form-item
+      class="form-item"
+      v-if="showProperty('radiusColumnBar')"
+      :label="t('chart.radiusColumnBar')"
+      :class="'form-item-' + themes"
+    >
+      <el-radio-group
+        size="small"
+        :effect="themes"
+        v-model="state.basicStyleForm.radiusColumnBar"
+        @change="changeBasicStyle('radiusColumnBar')"
+      >
+        <el-radio label="rightAngle" :effect="themes">{{ t('chart.rightAngle') }}</el-radio>
+        <el-radio label="roundAngle" :effect="themes">{{ t('chart.roundAngle') }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
    <el-form-item
      :label="t('chart.orient')"
      class="form-item"
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@ -1422,6 +1422,8 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
  lineSymbolSize: 4,
  lineSmooth: true,
  barDefault: true,
+  radiusColumnBar: 'rightAngle',
+  columnBarRightAngleRadius: 20,
  barWidth: 40,
  barGap: 0.4,
  lineType: 'solid',
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
@ -173,6 +173,20 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
        color
      }
    }
+    if (basicStyle.radiusColumnBar === 'roundAngle') {
+      const columnStyle = {
+        radius: [
+          basicStyle.columnBarRightAngleRadius,
+          basicStyle.columnBarRightAngleRadius,
+          basicStyle.columnBarRightAngleRadius,
+          basicStyle.columnBarRightAngleRadius
+        ]
+      }
+      options = {
+        ...options,
+        columnStyle
+      }
+    }
    return options
  }

--- 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
  }

--- 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': [
--- 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<BarOptions, Bar> {
        color
      }
    }
+    if (basicStyle.radiusColumnBar === 'roundAngle') {
+      const barStyle = {
+        radius: [
+          basicStyle.columnBarRightAngleRadius,
+          basicStyle.columnBarRightAngleRadius,
+          basicStyle.columnBarRightAngleRadius,
+          basicStyle.columnBarRightAngleRadius
+        ]
+      }
+      options = {
+        ...options,
+        barStyle
+      }
+    }
    return options
  }

--- 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<BarOptions, G2Progress> {
        }
      }
    }
+    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 {
--- 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<BarOptions, Bar> {
        }
      }
    }
+    if (basicStyle.radiusColumnBar === 'roundAngle') {
+      const barStyle = {
+        radius: [
+          basicStyle.columnBarRightAngleRadius,
+          basicStyle.columnBarRightAngleRadius,
+          basicStyle.columnBarRightAngleRadius,
+          basicStyle.columnBarRightAngleRadius
+        ]
+      }
+      options = {
+        ...options,
+        barStyle
+      }
+    }
    return options
  }

--- 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',
--- 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<DualAxesOptions, DualAxes> {
      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
  }