fix(图表): 修复双轴图设置辅助线不生效问题

core/core-frontend/src/models/chart/chart-senior.d.ts

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

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

@@ -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"
             />

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

@@ -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>

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

@@ -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"

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

@@ -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"

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

@@ -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,

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

@@ -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(
+    const quotaExtFields = _.filter(chart.yAxisExt, ele => ele.summary !== '' && ele.id !== '-1')
-      item =>
+    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,

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

@@ -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;