public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-05-15 13:32:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(图表): 优化堆叠图为仅支持圆角

Browse Source
This commit is contained in:
jianneng-fit2cloud
2025-04-17 15:46:17 +08:00
committed by jianneng-fit2cloud
parent 88d41b947b
commit 89e390c662
4 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -149,6 +149,12 @@ const init = () => {
}
}
initTableColumnWidth()
if (
props.chart.type.includes('-stack') &&
state.basicStyleForm.radiusColumnBar === 'topRoundAngle'
) {
state.basicStyleForm.radiusColumnBar = 'roundAngle'
}
}
const debouncedInit = debounce(init, 500)
watch(
@@ -494,7 +500,12 @@ onMounted(() => {
>
<el-radio label="rightAngle" :effect="themes">{{ t('chart.rightAngle') }}</el-radio>
<el-radio label="roundAngle" :effect="themes">{{ t('chart.roundAngle') }}</el-radio>
<el-radio label="topRoundAngle" :effect="themes">{{ t('chart.topRoundAngle') }}</el-radio>
<el-radio
v-if="!props.chart.type.includes('-stack')"
label="topRoundAngle"
:effect="themes"
>{{ t('chart.topRoundAngle') }}</el-radio
>
</el-radio-group>
</el-form-item>

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

@@ -128,6 +128,12 @@ const init = () => {
state.customColor = state.basicStyleForm.colors[0]
state.colorIndex = 0
}
if (
props.chart.type.includes('-stack') &&
state.basicStyleForm.radiusColumnBar === 'topRoundAngle'
) {
state.basicStyleForm.radiusColumnBar = 'roundAngle'
}
}
const configCompat = (basicStyle: ChartBasicStyle) => {
// 悬浮改为图例和缩放按钮
@@ -228,9 +234,13 @@ onMounted(() => {
>
<el-radio label="rightAngle" :effect="themes">{{ t('chart.rightAngle') }}</el-radio>
<el-radio label="roundAngle" :effect="themes">{{ t('chart.roundAngle') }}</el-radio>
<el-radio label="topRoundAngle" :effect="themes">{{
t('chart.topRoundAngle')
}}</el-radio>
<el-radio
v-if="!props.chart.type.includes('-stack')"
label="topRoundAngle"
:effect="themes"
>
{{ t('chart.topRoundAngle') }}</el-radio
>
</el-radio-group>
</el-form-item>
<div class="alpha-setting" v-if="showProperty('columnWidthRatio')">

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

@@ -84,7 +84,8 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
return
}
const isGroup = 'bar-group' === this.name && chart.xAxisExt?.length > 0
const isStack = 'bar-group-stack' === this.name && chart.extStack?.length > 0
const isStack =
['bar-stack', 'bar-group-stack'].includes(this.name) && chart.extStack?.length > 0
const data = cloneDeep(drawOptions.chart.data?.data)
const initOptions: ColumnOptions = {
...this.baseOptions,

8
core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
View File

@@ -2405,6 +2405,14 @@ export const configRoundAngle = (chart: Chart, styleName: string, callBack?: (da
const topRadius = [0, 0, ...radius]
const bottomRadius = [...radius, 0, 0]
const finalRadius = [...radius, ...radius]
if (chart.type.includes('-stack')) {
return {
[styleName]: datum => {
if (!datum.value) return { radius: [], ...(callBack ? callBack(datum) : {}) }
return { radius: finalRadius, ...(callBack ? callBack(datum) : {}) }
}
}
}
const isTopRound = basicStyle.radiusColumnBar === 'topRoundAngle'
// 对称条形图
if (chart.type === 'bidirectional-bar') {