feat(图表): 柱状图条形图支持设置柱宽

#11540
#11815
#13548

core/core-frontend/src/locales/en.ts

@@ -1197,6 +1197,7 @@ export default {
     color_technology: 'Technology',
     color_simple: 'Simple',
     not_alpha: 'Opacity',
+    column_width_ratio: 'Column Width Ratio',
     area_border_color: 'Map border',
     area_base_color: 'Map area fill',
     size: 'Size',

core/core-frontend/src/locales/tw.ts

@@ -1169,6 +1169,7 @@ export default {
     color_technology: '科技',
     color_simple: '簡潔',
     not_alpha: '不透明度',
+    column_width_ratio: '柱寬比例',
     area_border_color: '地圖邊線',
     area_base_color: '地圖區塊填充',
     size: '大小',

core/core-frontend/src/locales/zh-CN.ts

@@ -1171,6 +1171,7 @@ export default {
     color_technology: '科技',
     color_simple: '简洁',
     not_alpha: '不透明度',
+    column_width_ratio: '柱宽比例',
     area_border_color: '地图边线',
     area_base_color: '地图区块填充',
     size: '大小',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -177,6 +177,10 @@ declare interface ChartBasicStyle {
    * 圆角柱倒角
    */
   columnBarRightAngleRadius: number
+  /**
+   * 一般柱状图宽度占比，0 - 100 范围数值
+   */
+  columnWidthRatio: number
   /**
    * 柱间距
    */

core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue

@@ -65,6 +65,22 @@ const onAlphaChange = v => {
   changeBasicStyle('alpha')
 }
 
+const onColumnWidthRatioChange = v => {
+  const _v = parseInt(v)
+  if (_v >= 1 && _v <= 100) {
+    state.basicStyleForm.columnWidthRatio = _v
+  } else if (_v < 1) {
+    state.basicStyleForm.columnWidthRatio = 1
+  } else if (_v > 100) {
+    state.basicStyleForm.columnWidthRatio = 100
+  } else {
+    const basicStyle = cloneDeep(props.chart.customAttr.basicStyle)
+    const oldForm = defaultsDeep(basicStyle, cloneDeep(DEFAULT_BASIC_STYLE)) as ChartBasicStyle
+    state.basicStyleForm.columnWidthRatio = oldForm.columnWidthRatio
+  }
+  changeBasicStyle('columnWidthRatio')
+}
+
 const changeMisc = prop => {
   emit('onMiscChange', { data: state.miscForm, requestData: true }, prop)
 }
@@ -1207,6 +1223,40 @@ onMounted(() => {
         @change="changeBasicStyle('barGap')"
       />
     </el-form-item>
+    <div class="alpha-setting" v-if="showProperty('columnWidthRatio')">
+      <label class="alpha-label" :class="{ dark: 'dark' === themes }">
+        {{ t('chart.column_width_ratio') }}
+      </label>
+      <el-row style="flex: 1" :gutter="8">
+        <el-col :span="13">
+          <el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
+            <el-slider
+              :effect="themes"
+              :min="1"
+              :max="100"
+              v-model="state.basicStyleForm.columnWidthRatio"
+              @change="changeBasicStyle('columnWidthRatio')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="11" style="padding-top: 2px">
+          <el-form-item class="form-item" :class="'form-item-' + themes">
+            <el-input
+              type="number"
+              :effect="themes"
+              v-model="state.basicStyleForm.columnWidthRatio"
+              :min="1"
+              :max="100"
+              class="basic-input-number"
+              :controls="false"
+              @change="onColumnWidthRatioChange"
+            >
+              <template #suffix> % </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
     <!--bar end-->
     <!--line area start-->
     <el-row :gutter="8">

core/core-frontend/src/views/chart/components/editor/editor-style/components/DualBasicStyleSelector.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { onMounted, PropType, reactive, watch, ref } from 'vue'
-import { COLOR_PANEL, DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
+import {
+  COLOR_PANEL,
+  DEFAULT_BASIC_STYLE,
+  DEFAULT_MISC
+} from '@/views/chart/components/editor/util/chart'
 import { useI18n } from '@/hooks/web/useI18n'
 import CustomColorStyleSelect from '@/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
@@ -75,6 +79,23 @@ const onAlphaChange = v => {
   }
   changeBasicStyle('alpha')
 }
+
+const onColumnWidthRatioChange = v => {
+  const _v = parseInt(v)
+  if (_v >= 1 && _v <= 100) {
+    state.basicStyleForm.columnWidthRatio = _v
+  } else if (_v < 1) {
+    state.basicStyleForm.columnWidthRatio = 1
+  } else if (_v > 100) {
+    state.basicStyleForm.columnWidthRatio = 100
+  } else {
+    const basicStyle = cloneDeep(props.chart.customAttr.basicStyle)
+    const oldForm = defaultsDeep(basicStyle, cloneDeep(DEFAULT_BASIC_STYLE)) as ChartBasicStyle
+    state.basicStyleForm.columnWidthRatio = oldForm.columnWidthRatio
+  }
+  changeBasicStyle('columnWidthRatio')
+}
+
 const onSubAlphaChange = v => {
   const _v = parseInt(v)
   if (_v >= 0 && _v <= 100) {
@@ -208,6 +229,40 @@ onMounted(() => {
               <el-radio label="roundAngle" :effect="themes">{{ t('chart.roundAngle') }}</el-radio>
             </el-radio-group>
           </el-form-item>
+          <div class="alpha-setting" v-if="showProperty('columnWidthRatio')">
+            <label class="alpha-label" :class="{ dark: 'dark' === themes }">
+              {{ t('chart.column_width_ratio') }}
+            </label>
+            <el-row style="flex: 1" :gutter="8">
+              <el-col :span="13">
+                <el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
+                  <el-slider
+                    :effect="themes"
+                    :min="1"
+                    :max="100"
+                    v-model="state.basicStyleForm.columnWidthRatio"
+                    @change="changeBasicStyle('columnWidthRatio')"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="11" style="padding-top: 2px">
+                <el-form-item class="form-item" :class="'form-item-' + themes">
+                  <el-input
+                    type="number"
+                    :effect="themes"
+                    v-model="state.basicStyleForm.columnWidthRatio"
+                    :min="1"
+                    :max="100"
+                    class="basic-input-number"
+                    :controls="false"
+                    @change="onColumnWidthRatioChange"
+                  >
+                    <template #suffix> % </template>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
         </template>
         <template v-else>
           <el-row :gutter="8">

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1589,6 +1589,7 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   barDefault: true,
   radiusColumnBar: 'rightAngle',
   columnBarRightAngleRadius: 20,
+  columnWidthRatio: 60,
   barWidth: 40,
   barGap: 0.4,
   lineType: 'solid',

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

@@ -27,7 +27,7 @@ import {
   TOOLTIP_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
 import { useI18n } from '@/hooks/web/useI18n'
-import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
+import { DEFAULT_BASIC_STYLE, DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
 import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
 import { Group } from '@antv/g-canvas'
 
@@ -187,6 +187,19 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
         columnStyle
       }
     }
+    let columnWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      columnWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      columnWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      columnWidthRatio = 1
+    }
+    if (columnWidthRatio) {
+      options.columnWidthRatio = columnWidthRatio
+    }
+
     return options
   }
 

core/core-frontend/src/views/chart/components/js/panel/charts/bar/common.ts

@@ -31,7 +31,7 @@ export const BAR_RANGE_EDITOR_PROPERTY: EditorProperty[] = [
 export const BAR_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
   'background-overall-component': ['all'],
   'border-style': ['all'],
-  'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar'],
+  'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar', 'columnWidthRatio'],
   'label-selector': ['fontSize', 'color', 'labelFormatter'],
   'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter', 'show'],
   'x-axis-selector': [

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

@@ -26,7 +26,7 @@ import {
 } from '@/views/chart/components/js/panel/charts/bar/common'
 import type { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
-import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
+import { DEFAULT_BASIC_STYLE, DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
 import { Group } from '@antv/g-canvas'
 
 const { t } = useI18n()
@@ -171,6 +171,20 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
         barStyle
       }
     }
+
+    let barWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      barWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      barWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      barWidthRatio = 1
+    }
+    if (barWidthRatio) {
+      options.barWidthRatio = barWidthRatio
+    }
+
     return options
   }
 

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

@@ -16,6 +16,7 @@ import {
 import { cloneDeep, defaultTo } from 'lodash-es'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { Options } from '@antv/g2plot/esm'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
 
 const { t } = useI18n()
 
@@ -54,7 +55,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
     'legend-selector': null,
     'background-overall-component': ['all'],
     'border-style': ['all'],
-    'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar'],
+    'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar', 'columnWidthRatio'],
     'label-selector': ['hPosition', 'color', 'fontSize', 'showQuota', 'showProportion'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show'],
     'y-axis-selector': [
@@ -194,6 +195,20 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
         barStyle
       }
     }
+
+    let barWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      barWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      barWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      barWidthRatio = 1
+    }
+    if (barWidthRatio) {
+      options.barWidthRatio = barWidthRatio
+    }
+
     return options
   }
   protected configTooltip(chart: Chart, options: BarOptions): BarOptions {

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

@@ -21,6 +21,7 @@ import {
 } from '@/views/chart/components/js/panel/charts/bar/common'
 import { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
 
 const { t } = useI18n()
 const DEFAULT_DATA = []
@@ -322,6 +323,19 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
         barStyle
       }
     }
+    let barWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      barWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      barWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      barWidthRatio = 1
+    }
+    if (barWidthRatio) {
+      options.barWidthRatio = barWidthRatio
+    }
+
     return options
   }
 

core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts

@@ -13,6 +13,7 @@ import {
 } from '../../common/common_antv'
 import { isEmpty } from 'lodash-es'
 import { useI18n } from '@/hooks/web/useI18n'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
 const { t } = useI18n()
 
 /**
@@ -33,7 +34,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
     'border-style': ['all'],
-    'basic-style-selector': ['colors', 'alpha', 'gradient'],
+    'basic-style-selector': ['colors', 'alpha', 'gradient', 'columnWidthRatio'],
     'label-selector': ['fontSize', 'color', 'vPosition', 'labelFormatter'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
     'title-selector': [
@@ -137,6 +138,20 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
     const customAttr = parseJson(chart.customAttr)
     const { colors, gradient, alpha } = customAttr.basicStyle
     const [risingColorRgba, fallingColorRgba, totalColorRgba] = colors
+
+    let columnWidthRatio
+    const _v = customAttr.basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      columnWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      columnWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      columnWidthRatio = 1
+    }
+    if (columnWidthRatio) {
+      options.columnWidthRatio = columnWidthRatio
+    }
+
     return {
       ...options,
       total: {

core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix-common.ts

@@ -30,7 +30,8 @@ export const CHART_MIX_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
     'lineSmooth',
     'radiusColumnBar',
     'subSeriesColor',
-    'seriesColor'
+    'seriesColor',
+    'columnWidthRatio'
   ],
   'x-axis-selector': [
     'name',

core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts

@@ -35,7 +35,11 @@ import {
 } from './chart-mix-common'
 import type { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
-import { DEFAULT_LABEL, DEFAULT_LEGEND_STYLE } from '@/views/chart/components/editor/util/chart'
+import {
+  DEFAULT_BASIC_STYLE,
+  DEFAULT_LABEL,
+  DEFAULT_LEGEND_STYLE
+} from '@/views/chart/components/editor/util/chart'
 import type { Options } from '@antv/g2plot/esm'
 import { Group } from '@antv/g-canvas'
 
@@ -303,6 +307,19 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
       }
     }
 
+    let columnWidthRatio
+    const _v = s.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      columnWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      columnWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      columnWidthRatio = 1
+    }
+    if (columnWidthRatio) {
+      tempOption.geometryOptions[0].columnWidthRatio = columnWidthRatio
+    }
+
     return tempOption
   }