Merge pull request #12837 from dataease/pr@dev-v2@chart-label-add-fulldisplay

feat(图表): 在标签的设置项中,增加【全量显示】的选项,默认全量显示不勾选,以最优显示来显示标签 #9829
This commit is contained in:
jianneng-fit2cloud 2024-10-22 20:08:58 +08:00 committed by GitHub
commit e1a809aa0b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 114 additions and 27 deletions

View File

@ -1543,7 +1543,8 @@ export default {
security_code: '安全密钥',
auto_fit: '自适应缩放',
zoom_level: '缩放等级',
central_point: '中心点'
central_point: '中心点',
full_display: '全量显示'
},
dataset: {
scope_edit: '仅编辑时生效',

View File

@ -313,7 +313,7 @@ declare interface ChartBasicStyle {
* 纬度
*/
latitude: number
},
}
/**
* 缩放等级
*/
@ -922,6 +922,10 @@ declare interface ChartLabelAttr {
* 柱状图堆叠指标
*/
showStackQuota: boolean
/**
* 全部显示
*/
fullDisplay: boolean
}
/**
* 提示设置

View File

@ -448,6 +448,9 @@ const conversionPrecision = [
{ name: t('chart.reserve_one'), value: 1 },
{ name: t('chart.reserve_two'), value: 2 }
]
const noFullDisplay = computed(() => {
return !['symbolic-map', 'liquid', 'gauge', 'indicator'].includes(props.chart.type)
})
</script>
<template>
@ -459,6 +462,15 @@ const conversionPrecision = [
>
<el-row v-show="showEmpty" style="margin-bottom: 12px"> 无其他可设置的属性</el-row>
<div>
<el-form-item v-if="noFullDisplay" class="form-item" :class="'form-item-' + themes">
<el-checkbox
size="small"
:effect="themes"
v-model="state.labelForm.fullDisplay"
@change="changeLabelAttr('fullDisplay')"
:label="t('chart.full_display')"
/>
</el-form-item>
<el-form-item
v-if="showProperty('showStackQuota')"
class="form-item"

View File

@ -342,7 +342,8 @@ export const DEFAULT_LABEL: ChartLabelAttr = {
totalFontSize: 12,
totalColor: '#FFF',
totalFormatter: formatterItem,
showStackQuota: false
showStackQuota: false,
fullDisplay: false
}
export const DEFAULT_TOOLTIP: ChartTooltipAttr = {
show: true,

View File

@ -157,12 +157,10 @@ export const extremumEvt = (newChart, chart, _options, container) => {
}
let showExtremum = false
if (noChildrenFieldChart(chart) || yAxis.length > 1) {
const seriesLabelFormatter = labelAttr.seriesLabelFormatter.find(d =>
d.chartShowName
? d.chartShowName
: d.name === minItem._origin.category || d.chartShowName
? d.chartShowName
: d.name === maxItem._origin.category
const seriesLabelFormatter = labelAttr.seriesLabelFormatter.find(
d =>
(d.chartShowName ? d.chartShowName : d.name === minItem._origin.category) ||
(d.chartShowName ? d.chartShowName : d.name === maxItem._origin.category)
)
showExtremum = seriesLabelFormatter?.showExtremum
} else {

View File

@ -429,9 +429,14 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
if (customAttr.label) {
const l = customAttr.label
if (l.show) {
const layout = []
if (!labelAttr.fullDisplay) {
const tmpOptions = super.configLabel(chart, options)
layout.push(...tmpOptions.label.layout)
}
label = {
position: l.position,
layout: [{ type: 'limit-in-canvas' }],
layout,
style: {
fill: l.color,
fontSize: l.fontSize

View File

@ -312,16 +312,21 @@ export class StackArea extends Area {
label: false
}
}
const layout = []
if (!labelAttr.fullDisplay) {
const tmpOptions = super.configLabel(chart, options)
layout.push(...tmpOptions.label.layout)
}
const label: Label = {
position: labelAttr.position as any,
offsetY: -8,
layout,
style: {
fill: labelAttr.color,
fontSize: labelAttr.fontSize
},
formatter: function (param: Datum) {
const res = valueFormatter(param.value, labelAttr.labelFormatter)
return res
return valueFormatter(param.value, labelAttr.labelFormatter)
}
}
return { ...options, label }

View File

@ -144,7 +144,6 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
fields: [],
...tmpOptions.label,
offsetY: -8,
layout: [{ type: 'hide-overlap' }, { type: 'limit-in-plot' }],
formatter: (data: Datum, _point) => {
if (data.EXTREME) {
return ''

View File

@ -92,7 +92,6 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
label: {
field: '_DE_LABEL_',
style: {
textAllowOverlap: true,
textAnchor: 'center'
}
},

View File

@ -145,7 +145,6 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
label: {
field: '_DE_LABEL_',
style: {
textAllowOverlap: true,
textAnchor: 'center'
}
},

View File

@ -124,9 +124,13 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
if (customAttr.label?.show) {
// label
if (showQuota) {
const layout = []
if (!l.fullDisplay) {
layout.push(...[{ type: 'hide-overlap' }, { type: 'limit-in-plot' }])
}
label = {
position: l.position,
layout: [{ type: 'limit-in-canvas' }],
layout,
style: {
fill: l.color,
fontSize: l.fontSize

View File

@ -295,6 +295,11 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
if (customAttr.label) {
const l = customAttr.label
if (l.show) {
const layout = []
if (!l.fullDisplay) {
layout.push({ type: 'hide-overlap' })
layout.push({ type: 'limit-in-shape' })
}
label = {
offset: 0,
style: {
@ -304,7 +309,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
content: datum => {
return datum['name']
},
layout: [{ type: 'limit-in-shape' }]
layout
}
} else {
label = false

View File

@ -72,7 +72,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
xField: 'field',
yField: 'value',
seriesField: 'category',
appendPadding: getPadding(chart),
appendPadding: [10, 10, 10, 10],
point: {
size: 4,
shape: 'circle',

View File

@ -233,6 +233,10 @@ export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
protected configLabel(chart: Chart, options: SankeyOptions): SankeyOptions {
const labelAttr = parseJson(chart.customAttr).label
if (labelAttr.show) {
const layout = []
if (!labelAttr.fullDisplay) {
layout.push(...[{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }])
}
const label = {
//...tmpOptions.label,
formatter: ({ name }) => name,
@ -247,7 +251,7 @@ export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
offsetX: isLast ? -8 : 8
}
},
layout: [{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }]
layout
}
return {
...options,

View File

@ -200,6 +200,9 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
return res
}
}
if (labelAttr.fullDisplay) {
label.layout = [{ type: 'limit-in-plot' }]
}
return { ...options, label }
}

View File

@ -129,9 +129,26 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
label: false
}
}
const layout = []
const type =
labelAttr.position === 'inner'
? labelAttr.fullDisplay
? 'limit-in-plot'
: 'custom-layout'
: labelAttr.fullDisplay
? 'hide-overlap'
: 'limit-in-plot'
if (type === 'custom-layout') {
const tmpOptions = super.configLabel(chart, options)
layout.push({ type: 'limit-in-plot' })
layout.push(...tmpOptions.label.layout)
} else {
layout.push({ type })
}
const label = {
type: labelAttr.position === 'outer' ? 'spider' : labelAttr.position,
layout: [{ type: 'limit-in-plot' }],
layout,
autoRotate: false,
style: {
fill: labelAttr.color,

View File

@ -115,8 +115,14 @@ export class Rose extends G2PlotChartView<RoseOptions, G2Rose> {
}
}
const total = options.data?.reduce((pre, next) => add(pre, next.value ?? 0), 0)
const layout = []
if (!labelAttr.fullDisplay) {
const tmpOptions = super.configLabel(chart, options)
layout.push(...tmpOptions.label.layout)
}
const labelOptions: Label = {
autoRotate: true,
layout,
style: {
fill: labelAttr.color,
fontSize: labelAttr.fontSize

View File

@ -310,10 +310,14 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
const tmpOptions = super.configLabel(chart, options)
if (tmpOptions.label) {
const extColor = deepCopy(chart.extColor)
const layout = []
if (!tmpOptions.label.fullDisplay) {
layout.push(...tmpOptions.label.layout)
}
const label = {
...tmpOptions.label,
position: 'middle',
layout: [{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }],
layout,
formatter: data => {
const value = data[extColor[0]?.dataeaseName]
if (!isNaN(Number(value))) {

View File

@ -151,9 +151,24 @@ export function getLabel(chart: Chart) {
if (customAttr.label) {
const l = customAttr.label
if (l.show) {
const layout = []
if (!l.fullDisplay) {
if (chart.type === 'bar-stack') {
layout.push({ type: 'interval-hide-overlap' })
} else if (
chart.type.indexOf('-horizontal') > -1 ||
['bidirectional-bar', 'progress-bar', 'pie', 'pie-donut', 'radar'].includes(chart.type)
) {
layout.push({ type: 'hide-overlap' })
} else {
layout.push({ type: 'limit-in-plot' })
layout.push({ type: 'fixed-overlap' })
layout.push({ type: 'hide-overlap' })
}
}
label = {
position: l.position,
layout: [{ type: 'limit-in-canvas' }],
layout,
style: {
fill: l.color,
fontSize: l.fontSize
@ -839,13 +854,19 @@ export function transAxisPosition(position: string): string {
export function configL7Label(chart: Chart): false | LabelOptions {
const customAttr = parseJson(chart.customAttr)
const label = customAttr.label
const style = {
fill: label.color,
fontSize: label.fontSize,
textAllowOverlap: true,
fontWeight: 'bold'
}
if (!label.fullDisplay) {
style.textAllowOverlap = false
style.padding = [2, 2]
}
return {
visible: label.show,
style: {
fill: label.color,
fontSize: label.fontSize,
fontWeight: 'bold'
}
style
}
}