center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix(图表): 最值与标签显示改为相互独立，以及最值显示优化

Browse Source
This commit is contained in:
jianneng-fit2cloud 2024-07-25 12:08:15 +08:00
parent 8b790fddc0
commit 518700923a
6 changed files with 289 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -696,6 +696,10 @@ declare interface ChartLabelAttr {
* 显隐
*/
show: boolean
/**
* 收缩下的显示标签
*/
childrenShow?: boolean
/**
* 位置
*/
@ -772,6 +776,11 @@ declare interface ChartLabelAttr {
customContent?: string
showGap?: boolean
/**
* 显示极值
*/
showExtremum?: boolean
}
/**
* 提示设置

291
core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
View File

@ -222,7 +222,9 @@ const showSeriesLabelFormatter = computed(() => {
})
const showDivider = computed(() => {
const DIVIDER_PROPS = ['labelFormatter', 'showDimension', 'showQuota', 'showProportion']
return includesAny(props.propertyInner, ...DIVIDER_PROPS) && !isBarRangeTime.value
return (
includesAny(props.propertyInner, ...DIVIDER_PROPS) && !isBarRangeTime.value && !isGroupBar.value
)
})
const isBarRangeTime = computed<boolean>(() => {
@ -249,7 +251,7 @@ const showPositionH = computed(() => {
})
const showPositionV = computed(() => {
if (showProperty('vPosition')) {
if (props.chart.type !== 'bidirectional-bar') {
if (props.chart.type !== 'bidirectional-bar' && props.chart.type !== 'bar-group') {
return true
}
return props.chart.customAttr.basicStyle.layout === 'vertical'
@ -303,6 +305,9 @@ const defaultPlaceholder = computed(() => {
onMounted(() => {
init()
})
const isGroupBar = computed(() => {
return props.chart.type === 'bar-group'
})
</script>
<template>
@ -313,47 +318,49 @@ onMounted(() => {
label-position="top"
>
<el-row v-show="showEmpty" style="margin-bottom: 12px"> 无其他可设置的属性</el-row>
<el-space>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('color')"
:label="t('chart.text')"
>
<el-color-picker
:effect="themes"
v-model="state.labelForm.color"
class="color-picker-style"
:predefine="COLOR_PANEL"
@change="changeLabelAttr('color')"
is-custom
/>
</el-form-item>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('fontSize')"
>
<template #label>&nbsp;</template>
<el-tooltip content="字号" :effect="toolTip" placement="top">
<el-select
size="small"
style="width: 108px"
<div v-if="!isGroupBar">
<el-space>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('color')"
:label="t('chart.text')"
>
<el-color-picker
:effect="themes"
v-model.number="state.labelForm.fontSize"
:placeholder="t('chart.text_fontsize')"
@change="changeLabelAttr('fontSize')"
>
<el-option
v-for="option in fontSizeList"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-tooltip>
</el-form-item>
</el-space>
v-model="state.labelForm.color"
class="color-picker-style"
:predefine="COLOR_PANEL"
@change="changeLabelAttr('color')"
is-custom
/>
</el-form-item>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('fontSize')"
>
<template #label>&nbsp;</template>
<el-tooltip content="字号" :effect="toolTip" placement="top">
<el-select
size="small"
style="width: 108px"
:effect="themes"
v-model.number="state.labelForm.fontSize"
:placeholder="t('chart.text_fontsize')"
@change="changeLabelAttr('fontSize')"
>
<el-option
v-for="option in fontSizeList"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-tooltip>
</el-form-item>
</el-space>
</div>
<div v-if="showProperty('showFields') && !batchOptStatus">
<el-form-item :label="t('chart.label')" class="form-item" :class="'form-item-' + themes">
<el-select
@ -483,7 +490,7 @@ onMounted(() => {
:class="{ 'divider-dark': themes === 'dark' }"
v-if="showDivider"
/>
<template v-if="showProperty('labelFormatter') && !isBarRangeTime">
<template v-if="showProperty('labelFormatter') && !isBarRangeTime && !isGroupBar">
<el-form-item
:label="$t('chart.value_formatter_type')"
class="form-item"
@ -955,7 +962,11 @@ onMounted(() => {
/>
</el-form-item>
</div>
<el-form-item class="form-item form-item-checkbox" :class="'form-item-' + themes">
<el-form-item
class="form-item form-item-checkbox"
:class="'form-item-' + themes"
v-if="showProperty('showExtremum')"
>
<el-checkbox
:effect="themes"
size="small"
@ -968,10 +979,200 @@ onMounted(() => {
</el-form-item>
</template>
</div>
<template v-if="isGroupBar">
<el-form-item class="form-item form-item-checkbox" :class="'form-item-' + themes">
<el-checkbox
:effect="themes"
size="small"
@change="changeLabelAttr('childrenShow')"
v-model="state.labelForm.childrenShow"
label="quota"
>
{{ t('chart.label') + t('chart.show') }}
</el-checkbox>
</el-form-item>
<div style="padding-left: 22px">
<el-space>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('color')"
:label="t('chart.text')"
>
<el-color-picker
:disabled="!state.labelForm.childrenShow"
:effect="themes"
v-model="state.labelForm.color"
class="color-picker-style"
:predefine="COLOR_PANEL"
@change="changeLabelAttr('color')"
is-custom
/>
</el-form-item>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('fontSize')"
>
<template #label>&nbsp;</template>
<el-tooltip content="字号" :effect="toolTip" placement="top">
<el-select
:disabled="!state.labelForm.childrenShow"
size="small"
style="width: 108px"
:effect="themes"
v-model.number="state.labelForm.fontSize"
:placeholder="t('chart.text_fontsize')"
@change="changeLabelAttr('fontSize')"
>
<el-option
v-for="option in fontSizeList"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-tooltip>
</el-form-item>
</el-space>
<el-form-item
v-if="showProperty('vPosition')"
class="form-item"
:class="'form-item-' + themes"
>
<template #label>
{{ t('chart.label_position') }}
<el-tooltip
class="item"
:effect="toolTip"
placement="top"
v-if="chart.type.includes('chart-mix')"
>
<template #content>
<span v-html="t('chart.chart_mix_label_only_left')"></span>
</template>
<span style="vertical-align: middle">
<el-icon style="cursor: pointer">
<Icon name="icon_info_outlined" />
</el-icon>
</span>
</el-tooltip>
</template>
<el-select
:disabled="!state.labelForm.childrenShow"
size="small"
:effect="themes"
v-model="state.labelForm.position"
:placeholder="t('chart.label_position')"
@change="changeLabelAttr('position')"
>
<el-option
v-for="option in labelPositionV"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('chart.value_formatter_type')"
class="form-item"
:class="'form-item-' + themes"
>
<el-select
:disabled="!state.labelForm.childrenShow"
size="small"
:effect="themes"
v-model="state.labelForm.labelFormatter.type"
@change="changeLabelAttr('labelFormatter.type')"
>
<el-option
v-for="type in formatterType"
:key="type.value"
:label="$t('chart.' + type.name)"
:value="type.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="state.labelForm.labelFormatter && state.labelForm.labelFormatter.type !== 'auto'"
:label="$t('chart.value_formatter_decimal_count')"
class="form-item"
:class="'form-item-' + themes"
>
<el-input-number
:disabled="!state.labelForm.childrenShow"
controls-position="right"
:effect="themes"
v-model="state.labelForm.labelFormatter.decimalCount"
:precision="0"
:min="0"
:max="10"
@change="changeLabelAttr('labelFormatter.decimalCount')"
/>
</el-form-item>
<el-row
:gutter="8"
v-if="state.labelForm.labelFormatter && state.labelForm.labelFormatter.type !== 'percent'"
>
<el-col :span="12">
<el-form-item
:label="$t('chart.value_formatter_unit')"
class="form-item"
:class="'form-item-' + themes"
>
<el-select
:disabled="!state.labelForm.childrenShow"
size="small"
:effect="themes"
v-model="state.labelForm.labelFormatter.unit"
:placeholder="$t('chart.pls_select_field')"
@change="changeLabelAttr('labelFormatter.unit')"
>
<el-option
v-for="item in unitType"
:key="item.value"
:label="$t('chart.' + item.name)"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="$t('chart.value_formatter_suffix')"
class="form-item"
:class="'form-item-' + themes"
>
<el-input
:disabled="!state.labelForm.childrenShow"
:effect="themes"
v-model="state.labelForm.labelFormatter.suffix"
clearable
:placeholder="$t('commons.input_content')"
@change="changeLabelAttr('labelFormatter.suffix')"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
size="small"
:effect="themes"
v-model="state.labelForm.labelFormatter.thousandSeparator"
@change="changeLabelAttr('labelFormatter.thousandSeparator')"
:label="t('chart.value_formatter_thousand_separator')"
:disabled="!state.labelForm.childrenShow"
/>
</el-form-item>
</div>
</template>
<el-form-item
class="form-item form-item-checkbox"
:class="'form-item-' + themes"
v-if="['bar-group'].includes(chartType)"
v-if="showProperty('showExtremum') && !showSeriesLabelFormatter"
>
<el-checkbox
:effect="themes"

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

@ -307,6 +307,7 @@ export const DEFAULT_MARK = {
}
export const DEFAULT_LABEL: ChartLabelAttr = {
show: false,
childrenShow: true,
position: 'top',
color: '#909399',
fontSize: 12,
@ -1525,7 +1526,8 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
gaugePercentLabel: true,
showSummary: false,
summaryLabel: '总计',
seriesColor: []
seriesColor: [],
layout: 'horizontal'
}
export const BASE_VIEW_CONFIG = {

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

@ -34,7 +34,7 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
propertyInner = {
...BAR_EDITOR_PROPERTY_INNER,
'basic-style-selector': [...BAR_EDITOR_PROPERTY_INNER['basic-style-selector'], 'seriesColor'],
'label-selector': ['vPosition', 'seriesLabelFormatter'],
'label-selector': ['vPosition', 'seriesLabelFormatter', 'showExtremum'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
'y-axis-selector': [...BAR_EDITOR_PROPERTY_INNER['y-axis-selector'], 'axisLabelFormatter']
}
@ -139,21 +139,15 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
if (!labelCfg) {
return data.value
}
let showLabel = true
if (labelCfg.showExtremum) {
showLabel = setExtremumPosition(data, point, chart, labelCfg, basicStyle.lineSymbolSize)
}
if (!labelCfg.show) {
return
}
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const showLabel = setExtremumPosition(
data,
point,
chart,
labelCfg,
basicStyle.lineSymbolSize
)
const has = chart.filteredData?.filter(
item => JSON.stringify(item) === JSON.stringify(data)
)
if (has.length > 0 && showLabel) {
if (showLabel) {
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const group = new G2PlotChartView.engine.Group({})
group.addShape({
type: 'text',
@ -340,6 +334,10 @@ export class StackBar extends Bar {
* 分组柱状图
*/
export class GroupBar extends StackBar {
propertyInner = {
...this['propertyInner'],
'label-selector': [...BAR_EDITOR_PROPERTY_INNER['label-selector'], 'vPosition', 'showExtremum']
}
axisConfig = {
...this['axisConfig'],
yAxis: {
@ -359,18 +357,15 @@ export class GroupBar extends StackBar {
const label = {
...baseOptions.label,
formatter: function (param: Datum, point) {
const showLabel = setExtremumPosition(
param,
point,
chart,
labelAttr,
basicStyle.lineSymbolSize
)
const has = chart.filteredData?.filter(
item => JSON.stringify(item) === JSON.stringify(param)
)
let showLabel = true
if (labelAttr.showExtremum) {
showLabel = setExtremumPosition(param, point, chart, labelAttr, basicStyle.lineSymbolSize)
}
if (!labelAttr.childrenShow) {
return null
}
const value = valueFormatter(param.value, labelAttr.labelFormatter)
return has.length > 0 && showLabel ? value : null
return showLabel ? value : null
}
}
return {

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

@ -11,7 +11,6 @@ import {
parseJson,
registerExtremumPointEvt,
setExtremumPosition,
setUpGroupSeriesColor,
setUpStackSeriesColor
} from '@/views/chart/components/js/util'
import { valueFormatter } from '@/views/chart/components/js/formatter'
@ -36,7 +35,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
'gradient',
'seriesColor'
],
'label-selector': ['seriesLabelFormatter'],
'label-selector': ['seriesLabelFormatter', 'showExtremum'],
'tooltip-selector': [
...LINE_EDITOR_PROPERTY_INNER['tooltip-selector'],
'seriesTooltipFormatter'
@ -144,21 +143,18 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
if (!labelCfg) {
return data.value
}
let showLabel = true
if (labelCfg.showExtremum) {
showLabel = setExtremumPosition(data, point, chart, labelCfg, basicStyle.lineSymbolSize)
}
if (!labelCfg.show) {
return
}
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const showLabel = setExtremumPosition(
data,
point,
chart,
labelCfg,
basicStyle.lineSymbolSize
)
const has = chart.filteredData?.filter(
item => JSON.stringify(item) === JSON.stringify(data)
)
if (has?.length > 0 && showLabel) {
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const group = new G2PlotChartView.engine.Group({})
group.addShape({
type: 'text',

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

@ -33,7 +33,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
propertyInner = {
...LINE_EDITOR_PROPERTY_INNER,
'basic-style-selector': [...LINE_EDITOR_PROPERTY_INNER['basic-style-selector'], 'seriesColor'],
'label-selector': ['seriesLabelFormatter'],
'label-selector': ['seriesLabelFormatter', 'showExtremum'],
'tooltip-selector': [
...LINE_EDITOR_PROPERTY_INNER['tooltip-selector'],
'seriesTooltipFormatter'
@ -140,21 +140,18 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
if (!labelCfg) {
return data.value
}
let showLabel = true
if (labelCfg.showExtremum) {
showLabel = setExtremumPosition(data, point, chart, labelCfg, basicStyle.lineSymbolSize)
}
if (!labelCfg.show) {
return
}
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const showLabel = setExtremumPosition(
data,
point,
chart,
labelCfg,
basicStyle.lineSymbolSize
)
const has = chart.filteredData?.filter(
item => JSON.stringify(item) === JSON.stringify(data)
)
if (has?.length > 0 && showLabel) {
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const group = new G2PlotChartView.engine.Group({})
group.addShape({
type: 'text',