dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(图表): 横向柱状图的横轴维度显示字符数控制 #13161 #12639

Browse Source
This commit is contained in:
jianneng-fit2cloud 2024-11-26 10:14:06 +08:00
parent 94e6a698dc
commit 86d92266ac
13 changed files with 145 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1849,7 +1849,8 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
central_point: 'center point',
full_display: 'full display',
show_hover_style: 'show mouse hover style',
merge_cells: 'merge cells'
merge_cells: 'merge cells',
length_limit: 'length limit'
},
dataset: {
scope_edit: 'only effective when editing',

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

@ -1809,7 +1809,8 @@ export default {
central_point: '中心點',
full_display: '全量顯示',
show_hover_style: '顯示滑鼠懸浮樣式',
merge_cells: '合併儲存格'
merge_cells: '合併儲存格',
length_limit: '長度限制'
},
dataset: {
scope_edit: '僅編輯時生效',

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

@ -1811,7 +1811,8 @@ export default {
central_point: '中心点',
full_display: '全量显示',
show_hover_style: '显示鼠标悬浮样式',
merge_cells: '合并单元格'
merge_cells: '合并单元格',
length_limit: '长度限制'
},
dataset: {
scope_edit: '仅编辑时生效',

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

@ -193,6 +193,10 @@ declare interface AxisLabel {
* 格式化设置
*/
formatter: string
/**
* 长度限制
*/
lengthLimit: number
}
/**
* 轴线条设置

17
core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
View File

@ -429,6 +429,23 @@ onMounted(() => {
/>
</el-form-item>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
:label="t('chart.length_limit')"
v-if="isBidirectionalBar"
>
<el-input-number
:disabled="!state.axisForm.axisLabel.show"
style="width: 100%"
:effect="props.themes"
v-model="state.axisForm.axisLabel.lengthLimit"
:min="1"
size="small"
controls-position="right"
@change="changeAxisStyle('axisLabel.lengthLimit')"
/>
</el-form-item>
<template v-if="showProperty('axisLabelFormatter') && !isBarRangeTime">
<el-form-item
class="form-item"

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

@ -404,6 +404,22 @@ onMounted(() => {
@change="changeAxisStyle('axisLabel.rotate')"
/>
</el-form-item>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
:label="t('chart.length_limit')"
>
<el-input-number
:disabled="!state.axisForm.axisLabel.show"
style="width: 100%"
:effect="props.themes"
v-model="state.axisForm.axisLabel.lengthLimit"
:min="1"
size="small"
controls-position="right"
@change="changeAxisStyle('axisLabel.lengthLimit')"
/>
</el-form-item>
<template v-if="showProperty('axisLabelFormatter')">
<el-form-item

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

@ -573,7 +573,8 @@ export const DEFAULT_XAXIS_STYLE: ChartAxisStyle = {
color: '#333333',
fontSize: 12,
rotate: 0,
formatter: '{value}'
formatter: '{value}',
lengthLimit: 10
},
axisLine: {
show: true,
@ -617,7 +618,8 @@ export const DEFAULT_YAXIS_STYLE: ChartAxisStyle = {
color: '#333333',
fontSize: 12,
rotate: 0,
formatter: '{value}'
formatter: '{value}',
lengthLimit: 10
},
axisLine: {
show: false,

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

@ -4,6 +4,7 @@ import {
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { cloneDeep, defaultTo, isEmpty, map } from 'lodash-es'
import {
configAxisLabelLengthLimit,
configPlotTooltipEvent,
getPadding,
getTooltipContainer,
@ -175,6 +176,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
}
})
configPlotTooltipEvent(chart, newChart)
configAxisLabelLengthLimit(chart, newChart)
return newChart
}

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

@ -4,6 +4,7 @@ import {
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
import {
configAxisLabelLengthLimit,
configPlotTooltipEvent,
getPadding,
getTooltipContainer,
@ -100,6 +101,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
newChart.on('interval:click', action)
configPlotTooltipEvent(chart, newChart)
configAxisLabelLengthLimit(chart, newChart)
return newChart
}

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

@ -1,6 +1,7 @@
import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
import { flow, hexColorToRGBA, parseJson } from '../../../util'
import {
configAxisLabelLengthLimit,
configPlotTooltipEvent,
getTooltipContainer,
setGradientColor,
@ -140,6 +141,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
newChart.on('interval:click', action)
configPlotTooltipEvent(chart, newChart)
configAxisLabelLengthLimit(chart, newChart)
return newChart
}
protected configBasicStyle(chart: Chart, options: BarOptions): BarOptions {

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

@ -4,6 +4,7 @@ import {
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
import {
configAxisLabelLengthLimit,
configPlotTooltipEvent,
getPadding,
getTooltipContainer,
@ -168,6 +169,7 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
newChart.on('interval:click', action)
configPlotTooltipEvent(chart, newChart)
configAxisLabelLengthLimit(chart, newChart)
return newChart
}

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

@ -3,6 +3,7 @@ import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
import { flow, hexColorToRGBA, parseJson } from '../../../util'
import { valueFormatter } from '../../../formatter'
import {
configAxisLabelLengthLimit,
configPlotTooltipEvent,
getPadding,
getTooltipContainer,
@ -100,6 +101,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
const newChart = new G2Waterfall(container, options)
newChart.on('interval:click', action)
configPlotTooltipEvent(chart, newChart)
configAxisLabelLengthLimit(chart, newChart)
return newChart
}

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

@ -435,6 +435,11 @@ export function getXAxis(chart: Chart) {
fill: a.axisLabel.color,
fontSize: a.axisLabel.fontSize,
textAlign: textAlign
},
formatter: value => {
return chart.type === 'bidirectional-bar' && value.length > a.axisLabel.lengthLimit
? value.substring(0, a.axisLabel.lengthLimit) + '...'
: value
}
}
: null
@ -533,6 +538,11 @@ export function getYAxis(chart: Chart) {
fontSize: yAxis.axisLabel.fontSize,
textBaseline,
textAlign
},
formatter: value => {
return value.length > yAxis.axisLabel.lengthLimit
? value.substring(0, yAxis.axisLabel.lengthLimit) + '...'
: value
}
}
: null
@ -1382,3 +1392,81 @@ export function getConditions(chart: Chart) {
}
return annotations
}
const AXIS_LABEL_TOOLTIP_STYLE = {
transition:
'left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s',
backgroundColor: 'rgb(255, 255, 255)',
boxShadow: 'rgb(174, 174, 174) 0px 0px 10px',
borderRadius: '3px',
padding: '8px 12px',
opacity: '0.95',
position: 'absolute',
visibility: 'visible'
}
const AXIS_LABEL_TOOLTIP_TPL =
'<div class="g2-axis-label-tooltip">' + '<div class="g2-tooltip-title">{title}</div>' + '</div>'
export function configAxisLabelLengthLimit(chart, plot) {
const { customStyle } = parseJson(chart)
const { lengthLimit, fontSize, color, show } = customStyle.yAxis.axisLabel
if (!lengthLimit || !show || !customStyle.yAxis.show || chart.type === 'bidirectional-bar') {
return
}
plot.on('axis-label:mouseenter', e => {
const field = e.target.cfg.delegateObject.component.cfg.field
// 先只处理竖轴
if (field !== 'field' && field !== 'title') {
return
}
const realContent = e.target.attrs.text
if (realContent.length < lengthLimit || !(realContent?.slice(-3) === '...')) {
return
}
const { x, y } = e
const parentNode = e.event.target.parentNode
let labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')?.[0]
if (!labelTooltipDom) {
const title = e.target.cfg.delegateObject.item.name
const domStr = substitute(AXIS_LABEL_TOOLTIP_TPL, { title })
labelTooltipDom = createDom(domStr)
_.assign(labelTooltipDom.style, AXIS_LABEL_TOOLTIP_STYLE)
parentNode.appendChild(labelTooltipDom)
} else {
labelTooltipDom.getElementsByClassName('g2-tooltip-title')[0].innerHTML =
e.target.cfg.delegateObject.item.name
labelTooltipDom.style.visibility = 'visible'
}
const { height, width } = parentNode.getBoundingClientRect()
const { offsetHeight, offsetWidth } = labelTooltipDom
if (offsetHeight > height || offsetWidth > width) {
labelTooltipDom.style.left = labelTooltipDom.style.top = `0px`
return
}
const initPosition = { left: x + 10, top: y + 15 }
if (initPosition.left + offsetWidth > width) {
initPosition.left = width - offsetWidth - 10
}
if (initPosition.top + offsetHeight > height) {
initPosition.top -= offsetHeight + 15
}
labelTooltipDom.style.left = `${initPosition.left}px`
labelTooltipDom.style.top = `${initPosition.top}px`
labelTooltipDom.style.color = color
labelTooltipDom.style.fontSize = `${fontSize}px`
})
plot.on('axis-label:mouseleave', e => {
const field = e.target.cfg.delegateObject.component.cfg.field
// 先只处理竖轴
if (field !== 'field' && field !== 'title') {
return
}
const realContent = e.target.attrs.text
if (realContent.length < lengthLimit || !(realContent?.slice(-3) === '...')) {
return
}
const parentNode = e.event.target.parentNode
const labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')?.[0]
if (labelTooltipDom) {
labelTooltipDom.style.visibility = 'hidden'
}
})
}