diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts
index 071d1470af..8d65b4bec5 100644
--- a/core/core-frontend/src/models/chart/chart.d.ts
+++ b/core/core-frontend/src/models/chart/chart.d.ts
@@ -134,6 +134,9 @@ declare interface SeriesFormatter extends Axis {
* 显示极值
*/
showExtremum?: boolean
+
+ optionLabel?: string
+ optionShowName?: string
}
declare interface Axis extends ChartViewField {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
index ba2fdc43e1..1748929e71 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
@@ -4,7 +4,7 @@ import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL, DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
import { ElIcon, ElSpace } from 'element-plus-secondary'
import { formatterType, unitType } from '../../../js/formatter'
-import { defaultsDeep, cloneDeep, intersection, union, defaultTo } from 'lodash-es'
+import { defaultsDeep, cloneDeep, intersection, union, defaultTo, map } from 'lodash-es'
import { includesAny } from '../../util/StringUtils'
import { fieldType } from '@/utils/attr'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -51,18 +51,44 @@ const changeDataset = () => {
}
const { batchOptStatus } = storeToRefs(dvMainStore)
watch(
- () => props.chart.customAttr.label,
+ [() => props.chart.customAttr.label, () => props.chart.customAttr.label.show],
() => {
init()
},
- { deep: true }
+ { deep: false }
)
const yAxis = computed(() => {
- return union(defaultTo(props.chart.yAxis, []), defaultTo(props.chart.yAxisExt, []))
+ if (props.chart.type.includes('chart-mix')) {
+ return union(
+ defaultTo(
+ map(props.chart.yAxis, y => {
+ return { ...y, axisType: 'yAxis', seriesId: y.id + '-yAxis' }
+ }),
+ []
+ ),
+ defaultTo(
+ map(props.chart.yAxisExt, y => {
+ return { ...y, axisType: 'yAxisExt', seriesId: y.id + '-yAxisExt' }
+ }),
+ []
+ )
+ )
+ } else {
+ return defaultTo(
+ map(props.chart.yAxis, y => {
+ return { ...y, axisType: 'yAxis', seriesId: y.id + '-yAxis' }
+ }),
+ []
+ )
+ }
+})
+
+const yAxisIds = computed(() => {
+ return map(yAxis.value, y => y.seriesId)
})
watch(
- [() => yAxis.value, () => props.chart.type],
+ [() => yAxisIds.value, () => props.chart.type],
() => {
initSeriesLabel()
},
@@ -94,14 +120,34 @@ const initSeriesLabel = () => {
let initFlag = false
const themeColor = dvMainStore.canvasStyleData.dashboard.themeColor
const axisMap = yAxis.value.reduce((pre, next) => {
+ const optionLabel: string = `${next.chartShowName ?? next.name}${
+ next.summary !== '' ? '(' + t('chart.' + next.summary) + ')' : ''
+ }${
+ props.chart.type.includes('chart-mix')
+ ? next.axisType === 'yAxis'
+ ? '(左轴)'
+ : '(右轴)'
+ : ''
+ }` as string
+ const optionShowName: string = `${next.chartShowName ?? next.name}${
+ next.summary !== '' ? '(' + t('chart.' + next.summary) + ')' : ''
+ }${
+ props.chart.type.includes('chart-mix')
+ ? next.axisType === 'yAxis'
+ ? '(左轴)'
+ : '(右轴)'
+ : ''
+ }` as string
let tmp = {
...next,
+ optionLabel: optionLabel,
+ optionShowName: optionShowName,
show: true,
color: themeColor === 'dark' ? '#fff' : '#000',
fontSize: COMPUTED_DEFAULT_LABEL.value.fontSize,
showExtremum: false
} as SeriesFormatter
- if (seriesAxisMap[next.id]) {
+ if (seriesAxisMap[next.seriesId]) {
tmp = {
...tmp,
formatterCfg: seriesAxisMap[next.id].formatterCfg,
@@ -114,18 +160,19 @@ const initSeriesLabel = () => {
initFlag = true
}
formatter.push(tmp)
- pre[next.id] = tmp
+ next.seriesId = next.seriesId ?? next.id
+ pre[next.seriesId] = tmp
return pre
}, {})
// 初始化一下序列数组,用于主题适配
if (initFlag) {
changeLabelAttr('seriesLabelFormatter', false)
}
- if (!curSeriesFormatter.value || !axisMap[curSeriesFormatter.value.id]) {
- curSeriesFormatter.value = axisMap[formatter[0].id]
+ if (!curSeriesFormatter.value || !axisMap[curSeriesFormatter.value.seriesId]) {
+ curSeriesFormatter.value = axisMap[formatter[0].seriesId]
return
}
- curSeriesFormatter.value = axisMap[curSeriesFormatter.value.id]
+ curSeriesFormatter.value = axisMap[curSeriesFormatter.value.seriesId]
}
const labelPositionR = [
@@ -785,36 +832,29 @@ const isGroupBar = computed(() => {
:teleported="false"
:disabled="!formatterEditable"
ref="formatterSelector"
- value-key="id"
+ value-key="seriesId"
class="series-select"
size="small"
>
-
+
-
-
-
-
- {{ item.chartShowName ?? item.name }}
- {{ item.summary !== '' ? '(' + t('chart.' + item.summary) + ')' : '' }}
-
+
+
+
+
+
+ {{ item.optionShowName }}
+
+
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
index c1d3ac63aa..ec92c65fc6 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
@@ -181,47 +181,61 @@ export class ColumnLineMix extends G2PlotChartView {
}
const labelAttr = parseJson(chart.customAttr).label
- const formatterMap = labelAttr.seriesLabelFormatter?.reduce((pre, next) => {
- pre[next.id] = next
- return pre
- }, {})
- tempLabel.style.fill = DEFAULT_LABEL.color
- const label = {
- fields: [],
- ...tempLabel,
- offsetY: -8,
- formatter: (data: Datum) => {
- if (!labelAttr.seriesLabelFormatter?.length) {
- return data.value
- }
- const labelCfg = formatterMap?.[data.quotaList[0].id] as SeriesFormatter
- if (!labelCfg) {
- return data.value
- }
- if (!labelCfg.show) {
- return
- }
- const value = valueFormatter(data.value, labelCfg.formatterCfg)
- const group = new G2PlotChartView.engine.Group({})
- group.addShape({
- type: 'text',
- attrs: {
- x: 0,
- y: 0,
- text: value,
- textAlign: 'start',
- textBaseline: 'top',
- fontSize: labelCfg.fontSize,
- fill: labelCfg.color
- }
- })
- return group
+ const axisFormatterMap = {}
+ labelAttr.seriesLabelFormatter?.forEach(attr => {
+ if (!axisFormatterMap[attr.axisType]) {
+ axisFormatterMap[attr.axisType] = []
}
- }
- if (tmpOption.geometryOptions) {
- tmpOption.geometryOptions[0].label = label
- tmpOption.geometryOptions[1].label = label
- }
+ axisFormatterMap[attr.axisType].push(attr)
+ })
+ const axisTypes = ['yAxis', 'yAxisExt']
+ axisTypes.forEach(axisType => {
+ const formatterMap = axisFormatterMap[axisType]?.reduce((pre, next) => {
+ pre[next.id] = next
+ return pre
+ }, {})
+ tempLabel.style.fill = DEFAULT_LABEL.color
+ const label = {
+ fields: [],
+ ...tempLabel,
+ offsetY: -8,
+ formatter: (data: Datum) => {
+ if (!labelAttr.seriesLabelFormatter?.length) {
+ return data.value
+ }
+ const labelCfg = formatterMap?.[data.quotaList[0].id] as SeriesFormatter
+ if (!labelCfg) {
+ return data.value
+ }
+ if (!labelCfg.show) {
+ return
+ }
+ const value = valueFormatter(data.value, labelCfg.formatterCfg)
+ const group = new G2PlotChartView.engine.Group({})
+ group.addShape({
+ type: 'text',
+ attrs: {
+ x: 0,
+ y: 0,
+ text: value,
+ textAlign: 'start',
+ textBaseline: 'top',
+ fontSize: labelCfg.fontSize,
+ fill: labelCfg.color
+ }
+ })
+ return group
+ }
+ }
+ if (tmpOption.geometryOptions) {
+ if (axisType === 'yAxis') {
+ tmpOption.geometryOptions[0].label = label
+ } else if (axisType === 'yAxisExt') {
+ tmpOption.geometryOptions[1].label = label
+ }
+ }
+ })
+
return tmpOption
}