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:
ulleo 2024-04-16 10:29:51 +08:00
parent 7d9b41316d
commit ddd760ba61
8 changed files with 140 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/core-frontend/src/models/chart/chart-senior.d.ts vendored
View File

@ -107,6 +107,8 @@ declare interface AssistLine {
* 动态值聚合方式
*/
summary: string
axisType: 'left' | 'right'
}
/**

5
core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
View File

@ -49,6 +49,10 @@ const props = defineProps({
type: Array,
required: true
},
quotaExtData: {
type: Array,
required: true
},
fieldsData: {
type: Array,
required: true
@ -230,6 +234,7 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
:chart="props.chart"
:themes="themes"
:quota-data="props.quotaData"
:quota-ext-data="props.quotaExtData"
:property-inner="propertyInnerAll['assist-line']"
@onAssistLineChange="onAssistLineChange"
/>

28
core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
View File

@ -19,6 +19,10 @@ const props = defineProps({
type: Array,
required: true
},
quotaExtData: {
type: Array,
required: true
},
themes: {
type: String as PropType<EditorTheme>,
default: 'dark'
@ -32,6 +36,14 @@ const quotaFields = computed<Array<any>>(() => {
return props.quotaData.filter(ele => ele.summary !== '' && ele.id !== '-1')
})
const quotaExtFields = computed<Array<any>>(() => {
return props.quotaExtData.filter(ele => ele.summary !== '' && ele.id !== '-1')
})
const useQuotaExt = computed<boolean>(() => {
return props.chart.type === 'chart-mix'
})
const state = reactive({
assistLineCfg: {
enable: false,
@ -42,6 +54,11 @@ const state = reactive({
quotaFields: []
})
const axisType = [
{ type: 'left', name: t('chart.drag_block_value_axis_left') },
{ type: 'right', name: t('chart.drag_block_value_axis_right') }
]
watch(
() => props.chart.senior.assistLineCfg,
() => {
@ -100,7 +117,14 @@ const changeLine = () => {
}
function existField(line) {
return !!find(quotaFields.value, d => d.id === line.id)
if (useQuotaExt.value) {
return (
!!find(quotaFields.value, d => d.id === line.id) ||
!!find(quotaExtFields.value, d => d.id === line.id)
)
} else {
return !!find(quotaFields.value, d => d.id === line.id)
}
}
const init = () => {
@ -194,6 +218,8 @@ onMounted(() => {
<assist-line-edit
:line="state.assistLineCfg.assistLine"
:quota-fields="quotaFields"
:quota-ext-fields="quotaExtFields"
:use-quota-ext="useQuotaExt"
@onAssistLineChange="lineChange"
/>
<template #footer>

68
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/AssistLineEdit.vue
View File

@ -3,7 +3,7 @@ import { computed, onMounted, reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { fieldType } from '@/utils/attr'
import _ from 'lodash'
import { find } from 'lodash-es'
const { t } = useI18n()
@ -15,9 +15,22 @@ const props = defineProps({
quotaFields: {
type: Array,
required: true
},
quotaExtFields: {
type: Array,
required: true
},
useQuotaExt: {
type: Boolean,
default: false
}
})
const axisTypes = [
{ type: 'left', name: t('chart.drag_block_value_axis_left') },
{ type: 'right', name: t('chart.drag_block_value_axis_right') }
]
const state = reactive({
lineArr: [],
lineObj: {
@ -26,6 +39,7 @@ const state = reactive({
fieldId: '',
summary: 'avg',
axis: 'y', // 主轴
axisType: 'left',
value: '0',
lineType: 'solid',
color: '#ff0000',
@ -62,7 +76,7 @@ const init = () => {
state.lineArr = JSON.parse(JSON.stringify(props.line))
state.lineArr.forEach(line => {
if (_.find(props.quotaFields, d => d.id === line.fieldId) == undefined) {
if (find(props.quotaFields, d => d.id === line.fieldId) == undefined) {
line.fieldId = undefined
}
})
@ -84,13 +98,29 @@ const removeLine = index => {
changeAssistLine()
}
const changeAxisType = item => {
if (props.useQuotaExt && item.axisType === 'right') {
item.fieldId = props.quotaExtFields ? props.quotaExtFields[0]?.id : null
item.curField = getQuotaExtField(item.fieldId)
} else {
item.fieldId = props.quotaFields ? props.quotaFields[0]?.id : null
item.curField = getQuotaField(item.fieldId)
}
changeAssistLine()
}
const changeAssistLine = () => {
emit('onAssistLineChange', state.lineArr)
}
const changeAssistLineField = item => {
item.curField = getQuotaField(item.fieldId)
if (props.useQuotaExt && item.axisType === 'right') {
item.curField = getQuotaExtField(item.fieldId)
} else {
item.curField = getQuotaField(item.fieldId)
}
changeAssistLine()
}
const getQuotaField = id => {
if (!id) {
return {}
@ -105,6 +135,20 @@ const getQuotaField = id => {
}
}
const getQuotaExtField = id => {
if (!id) {
return {}
}
const fields = props.quotaExtFields.filter(ele => {
return ele.id === id
})
if (fields.length === 0) {
return {}
} else {
return fields[0]
}
}
onMounted(() => {
init()
})
@ -124,6 +168,16 @@ onMounted(() => {
@change="changeAssistLine"
/>
</el-col>
<el-col v-if="useQuotaExt" :span="3">
<el-select v-model="item.axisType" class="select-item" @change="changeAxisType(item)">
<el-option
v-for="opt in axisTypes"
:key="opt.type"
:label="opt.name"
:value="opt.type"
/>
</el-select>
</el-col>
<el-col :span="3">
<el-select v-model="item.field" class="select-item" @change="changeAssistLine">
<el-option
@ -152,7 +206,9 @@ onMounted(() => {
@change="changeAssistLineField(item)"
>
<el-option
v-for="quota in quotaFields"
v-for="quota in useQuotaExt && item.axisType === 'right'
? quotaExtFields
: quotaFields"
:key="quota.id"
:label="quota.name"
:value="quota.id"
@ -183,7 +239,7 @@ onMounted(() => {
<el-option key="min" value="min" :label="t('chart.min')" />
</el-select>
</el-col>
<el-col :span="3">
<el-col :span="useQuotaExt ? 2 : 3">
<el-tooltip effect="dark" content="字号" placement="top">
<el-select
v-model="item.fontSize"
@ -200,7 +256,7 @@ onMounted(() => {
</el-select>
</el-tooltip>
</el-col>
<el-col :span="4">
<el-col :span="useQuotaExt ? 2 : 4">
<el-select v-model="item.lineType" class="select-item" @change="changeAssistLine">
<el-option
v-for="opt in state.lineOptions"

1
core/core-frontend/src/views/chart/components/editor/index.vue
View File

@ -1927,6 +1927,7 @@ const onRefreshChange = val => {
<senior
:chart="view"
:quota-data="view.yAxis"
:quota-ext-data="view.yAxisExt"
:fields-data="allFields"
:themes="themes"
:properties="chartViewInstance.properties"

14
core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
View File

@ -3,9 +3,9 @@ import {
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { DualAxes, DualAxesOptions } from '@antv/g2plot/esm/plots/dual-axes'
import { getLabel, getPadding, getYAxis, getYAxisExt } from '../../common/common_antv'
import { getAnalyse, getLabel, getPadding, getYAxis, getYAxisExt } from '../../common/common_antv'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { cloneDeep, isEmpty, defaultTo, map } from 'lodash-es'
import { cloneDeep, isEmpty, defaultTo, map, filter } from 'lodash-es'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import {
CHART_MIX_AXIS_TYPE,
@ -113,6 +113,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
]
}
const options = this.setupOptions(chart, initOptions)
// 开始渲染
const newChart = new DualAxes(container, options)
@ -361,6 +362,15 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
return o
}
protected configAnalyse(chart: Chart, options: DualAxesOptions): DualAxesOptions {
const list = getAnalyse(chart)
const annotations = {
value: filter(list, l => l.axisType === 'left'),
valueExt: filter(list, l => l.axisType === 'right')
}
return { ...options, annotations }
}
protected setupOptions(chart: Chart, options: DualAxesOptions): DualAxesOptions {
return flow(
this.configTheme,

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

@ -1,6 +1,7 @@
import { hexColorToRGBA, parseJson } from '../../util'
import {
DEFAULT_XAXIS_STYLE,
DEFAULT_YAXIS_EXT_STYLE,
DEFAULT_YAXIS_STYLE
} from '@/views/chart/components/editor/util/chart'
import { valueFormatter } from '@/views/chart/components/js/formatter'
@ -645,7 +646,7 @@ export function getAnalyse(chart: Chart) {
const assistLineArr = senior.assistLineCfg.assistLine
if (assistLineArr?.length > 0) {
const customStyle = parseJson(chart.customStyle)
let yAxisPosition, axisFormatterCfg
let yAxisPosition, axisFormatterCfg, yAxisExtPosition, axisExtFormatterCfg
if (customStyle.yAxis) {
const a = JSON.parse(JSON.stringify(customStyle.yAxis))
yAxisPosition = a.position
@ -653,24 +654,37 @@ export function getAnalyse(chart: Chart) {
? a.axisLabelFormatter
: DEFAULT_YAXIS_STYLE.axisLabelFormatter
}
if (customStyle.yAxisExt) {
const a = JSON.parse(JSON.stringify(customStyle.yAxisExt))
yAxisExtPosition = a.position
axisExtFormatterCfg = a.axisLabelFormatter
? a.axisLabelFormatter
: DEFAULT_YAXIS_EXT_STYLE.axisLabelFormatter
}
const fixedLines = assistLineArr.filter(ele => ele.field === '0')
const dynamicLineFields = assistLineArr
.filter(ele => ele.field === '1')
.map(item => item.fieldId)
const quotaFields = _.filter(chart.yAxis, ele => ele.summary !== '' && ele.id !== '-1')
const dynamicLines = chart.data.dynamicAssistLines?.filter(
item =>
const quotaExtFields = _.filter(chart.yAxisExt, ele => ele.summary !== '' && ele.id !== '-1')
const dynamicLines = chart.data.dynamicAssistLines?.filter(item => {
return (
dynamicLineFields?.includes(item.fieldId) &&
!!_.find(quotaFields, d => d.id === item.fieldId)
)
(!!_.find(quotaFields, d => d.id === item.fieldId) ||
(!!_.find(quotaExtFields, d => d.id === item.fieldId) && chart.type === 'chart-mix'))
)
})
const lines = fixedLines.concat(dynamicLines)
lines.forEach(ele => {
const value = parseFloat(ele.value)
const content = ele.name + ' : ' + valueFormatter(value, axisFormatterCfg)
const content =
ele.name +
' : ' +
valueFormatter(value, ele.axisType === 'left' ? axisFormatterCfg : axisExtFormatterCfg)
assistLine.push({
type: 'line',
axisType: ele.axisType,
start: ['start', value],
end: ['end', value],
style: {
@ -680,10 +694,17 @@ export function getAnalyse(chart: Chart) {
})
assistLine.push({
type: 'text',
position: [yAxisPosition === 'left' ? 'start' : 'end', value],
axisType: ele.axisType,
position: [
(ele.axisType === 'left' ? yAxisPosition : yAxisExtPosition) === 'left' ? 'start' : 'end',
value
],
content: content,
offsetY: -2,
offsetX: yAxisPosition === 'left' ? 2 : -10 * (content.length - 2),
offsetX:
(ele.axisType === 'left' ? yAxisPosition : yAxisExtPosition) === 'left'
? 2
: -10 * (content.length - 2),
style: {
textBaseline: 'bottom',
fill: ele.color,

1
sdk/api/api-base/src/main/java/io/dataease/api/chart/dto/ChartSeniorAssistDTO.java
View File

@ -15,6 +15,7 @@ public class ChartSeniorAssistDTO {
private Long fieldId;
private String summary;
private String axis;
private String axisType;
private String value;
private String lineType;
private String color;