github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 11:32:57 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
#11540
#11815
#13548
This commit is contained in:
ulleo 2024-12-05 15:48:55 +08:00
parent f2f2abf6be
commit 610d26c2bd
15 changed files with 210 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/core-frontend/src/locales/en.ts
View File

@ -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',

1
core/core-frontend/src/locales/tw.ts
View File

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

1
core/core-frontend/src/locales/zh-CN.ts
View File

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

4
core/core-frontend/src/models/chart/chart-attr.d.ts vendored
View File

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

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

@ -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">

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

@ -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">

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

@ -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',

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

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

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

@ -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': [

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

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

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

@ -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 {

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

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

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

@ -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: {

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

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

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

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