forked from github/dataease
Merge pull request #12837 from dataease/pr@dev-v2@chart-label-add-fulldisplay
feat(图表): 在标签的设置项中,增加【全量显示】的选项,默认全量显示不勾选,以最优显示来显示标签 #9829
This commit is contained in:
commit
e1a809aa0b
@ -1543,7 +1543,8 @@ export default {
|
||||
security_code: '安全密钥',
|
||||
auto_fit: '自适应缩放',
|
||||
zoom_level: '缩放等级',
|
||||
central_point: '中心点'
|
||||
central_point: '中心点',
|
||||
full_display: '全量显示'
|
||||
},
|
||||
dataset: {
|
||||
scope_edit: '仅编辑时生效',
|
||||
|
@ -313,7 +313,7 @@ declare interface ChartBasicStyle {
|
||||
* 纬度
|
||||
*/
|
||||
latitude: number
|
||||
},
|
||||
}
|
||||
/**
|
||||
* 缩放等级
|
||||
*/
|
||||
@ -922,6 +922,10 @@ declare interface ChartLabelAttr {
|
||||
* 柱状图堆叠指标
|
||||
*/
|
||||
showStackQuota: boolean
|
||||
/**
|
||||
* 全部显示
|
||||
*/
|
||||
fullDisplay: boolean
|
||||
}
|
||||
/**
|
||||
* 提示设置
|
||||
|
@ -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"
|
||||
|
@ -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,
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
|
@ -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 }
|
||||
|
@ -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 ''
|
||||
|
@ -92,7 +92,6 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
||||
label: {
|
||||
field: '_DE_LABEL_',
|
||||
style: {
|
||||
textAllowOverlap: true,
|
||||
textAnchor: 'center'
|
||||
}
|
||||
},
|
||||
|
@ -145,7 +145,6 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
||||
label: {
|
||||
field: '_DE_LABEL_',
|
||||
style: {
|
||||
textAllowOverlap: true,
|
||||
textAnchor: 'center'
|
||||
}
|
||||
},
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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',
|
||||
|
@ -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,
|
||||
|
@ -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 }
|
||||
}
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
|
@ -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))) {
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user