feat(图表): 柱线组合图支持设置多条折线

#10083

core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java

@@ -139,6 +139,8 @@ public class ChartDataManage {
                     view2.getSenior().put("assistLineCfg", assistLineCfg2);
                 }
             }
+            view2.setXAxisExt(view2.getExtBubble());
+            view2.setExtBubble(new ArrayList<>());
             ChartViewDTO right = calcData(view2, chartExtRequest, allFields, viewFields);
             data.put("right", right.getData());
 
@@ -164,6 +166,7 @@ public class ChartDataManage {
                 || ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))
                 || StringUtils.equalsIgnoreCase(view.getType(), "flow-map")
                 || StringUtils.equalsIgnoreCase(view.getType(), "sankey")
+                || StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")
         ) {
             xAxis.addAll(xAxisExt);
         }
@@ -825,17 +828,18 @@ public class ChartDataManage {
                     || StringUtils.containsIgnoreCase(view.getType(), "gauge")
                     || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
                 mapChart = ChartDataBuild.transNormalChartData(xAxis, yAxis, view, data, isDrill);
-            } else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "bidirectional-bar")
-                    || StringUtils.containsIgnoreCase(view.getType(), "bidirectional-bar")
                     || StringUtils.containsIgnoreCase(view.getType(), "progress-bar")) {
-                mapChart = ChartDataBuild.transMixChartDataAntV(xAxis, yAxis, view, data, isDrill);
+                mapChart = ChartDataBuild.transMixChartDataAntV(xAxisBase, xAxis, new ArrayList<>(), yAxis, view, data, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")) {
+                mapChart = ChartDataBuild.transMixChartDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
             } else if (StringUtils.containsIgnoreCase(view.getType(), "label")) {
                 mapChart = ChartDataBuild.transLabelChartData(xAxis, yAxis, view, data, isDrill);
             } else if (StringUtils.containsIgnoreCase(view.getType(), "quadrant")) {
-                mapChart = ChartDataBuild.transMixChartDataAntV(xAxis, yAxis, view, data, isDrill);
+                mapChart = ChartDataBuild.transMixChartDataAntV(xAxisBase, xAxis, new ArrayList<>(), yAxis, view, data, isDrill);
             } else if (StringUtils.equalsIgnoreCase(view.getType(), "bar-range")) {
                 mapChart = ChartDataBuild.transBarRangeDataAntV(skipBarRange, barRangeDate, xAxisBase, xAxis, yAxis, view, data, isDrill);
-            } else if(StringUtils.equalsIgnoreCase(view.getType(), "heat-map")){
+            } else if (StringUtils.equalsIgnoreCase(view.getType(), "heat-map")) {
                 mapChart = ChartDataBuild.transHeatMapChartDataAntV(xAxisBase, xAxis, yAxis, view, data, isDrill);
             } else {
                 mapChart = ChartDataBuild.transChartDataAntV(xAxis, yAxis, view, data, isDrill);

core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java

@@ -515,7 +515,7 @@ public class ChartDataBuild {
     }
 
     // antV组合图形
-    public static Map<String, Object> transMixChartDataAntV(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
+    public static Map<String, Object> transMixChartDataAntV(List<ChartViewFieldDTO> xAxisBase, List<ChartViewFieldDTO> xAxis,List<ChartViewFieldDTO> xAxisExt,  List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
         Map<String, Object> map = new HashMap<>();
 
         List<Series> series = new ArrayList<>();
@@ -540,14 +540,23 @@ public class ChartDataBuild {
                 if (isDrill) {
                     a.append(d[xAxis.size() - 1]);
                 } else {
-                    for (int ii = 0; ii < xAxis.size(); ii++) {
+                    for (int ii = 0; ii < xAxisBase.size(); ii++) {
-                        if (ii == xAxis.size() - 1) {
+                        if (ii == xAxisBase.size() - 1) {
                             a.append(d[ii]);
                         } else {
                             a.append(d[ii]).append("\n");
                         }
                     }
                 }
+                StringBuilder b = new StringBuilder();
+                for (int ii = xAxisBase.size(); ii < xAxisBase.size() + xAxisExt.size(); ii++) {
+                    if (ii == xAxisBase.size() + xAxisExt.size() - 1) {
+                        b.append(d[ii]);
+                    } else {
+                        b.append(d[ii]).append("\n");
+                    }
+                }
+
                 axisChartDataDTO.setName(a.toString());
                 axisChartDataDTO.setField(a.toString());
 
@@ -572,7 +581,9 @@ public class ChartDataBuild {
                 } catch (Exception e) {
                     axisChartDataDTO.setValue(new BigDecimal(0));
                 }
-                axisChartDataDTO.setCategory(StringUtils.defaultIfBlank(yAxis.get(j).getChartShowName(), yAxis.get(j).getName()));
+                axisChartDataDTO.setCategory(
+                        StringUtils.defaultIfBlank(b.toString(),
+                        StringUtils.defaultIfBlank(yAxis.get(j).getChartShowName(), yAxis.get(j).getName())));
                 buildDynamicValue(view, axisChartDataDTO, d, size, extSize);
                 series.get(j).getData().add(axisChartDataDTO);
             }

core/core-frontend/src/locales/zh-CN.ts

@@ -843,6 +843,8 @@ export default {
     chart_data: '数据',
     chart_style: '样式',
     drag_block_type_axis: '类别轴',
+    drag_block_type_axis_left: '左子类别',
+    drag_block_type_axis_right: '右子类别',
     drag_block_type_axis_start: '源',
     drag_block_type_axis_end: '目的',
     drag_block_value_axis: '值轴',

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

@@ -40,6 +40,7 @@ declare type AxisType =
   | 'xAxis'
   | 'yAxis'
   | 'xAxisExt'
+  | 'xAxisExtRight'
   | 'yAxisExt'
   | 'extBubble'
   | 'drill'

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

@@ -371,6 +371,8 @@ const dimensionItemRemove = item => {
     view.value.yAxis.splice(item.index, 1)
   } else if (item.removeType === 'quotaExt') {
     view.value.yAxisExt.splice(item.index, 1)
+  } else if (item.removeType === 'xAxisExtRight') {
+    view.value.extBubble.splice(item.index, 1)
   }
 }
 
@@ -462,6 +464,13 @@ const onExtCustomSort = item => {
   customSort()
 }
 
+const onExtCustomRightSort = item => {
+  recordSnapshotInfo('render')
+  state.customSortField = view.value.extBubble[item.index]
+  customSortAxis.value = 'extBubble'
+  customSort()
+}
+
 const onMove = e => {
   recordSnapshotInfo('calcData')
   state.moveId = e.draggedContext.element.id
@@ -1023,6 +1032,7 @@ const saveRename = ref => {
   ref.validate(valid => {
     if (valid) {
       const { renameType, index, chartShowName } = state.itemForm
+      console.log(renameType)
       let axisType, axis
       switch (renameType) {
         case 'quota':
@@ -1041,6 +1051,9 @@ const saveRename = ref => {
         case 'dimensionExt':
           view.value.xAxisExt[index].chartShowName = chartShowName
           break
+        case 'xAxisExtRight':
+          view.value.extBubble[index].chartShowName = chartShowName
+          break
         case 'dimensionStack':
           view.value.extStack[index].chartShowName = chartShowName
           break
@@ -1863,6 +1876,62 @@ const deleteChartFieldItem = id => {
                           <drag-placeholder :drag-list="view.yAxis" />
                         </div>
                       </el-row>
+                      <!-- xAxisExtRight -->
+                      <el-row class="padding-lr drag-data" v-if="showAxis('xAxisExtRight')">
+                        <div class="form-draggable-title">
+                          <span>
+                            {{ chartViewInstance.axisConfig.extBubble.name }}
+                          </span>
+                          <el-tooltip
+                            :effect="toolTip"
+                            placement="top"
+                            :content="t('common.delete')"
+                          >
+                            <el-icon
+                              class="remove-icon"
+                              :class="{ 'remove-icon--dark': themes === 'dark' }"
+                              size="14px"
+                              @click="removeItems('extBubble')"
+                            >
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                            </el-icon>
+                          </el-tooltip>
+                        </div>
+                        <div
+                          @drop="$event => drop($event, 'extBubble')"
+                          @dragenter="dragEnter"
+                          @dragover="$event => dragOver($event)"
+                        >
+                          <draggable
+                            :list="view.extBubble"
+                            :move="onMove"
+                            item-key="id"
+                            group="drag"
+                            animation="300"
+                            class="drag-block-style"
+                            :class="{ dark: themes === 'dark' }"
+                            @add="addExtBubble"
+                            @change="e => onAxisChange(e, 'extBubble')"
+                          >
+                            <template #item="{ element, index }">
+                              <dimension-item
+                                :dimension-data="state.dimension"
+                                :quota-data="state.quota"
+                                :chart="view"
+                                :item="element"
+                                :index="index"
+                                :themes="props.themes"
+                                type="xAxisExtRight"
+                                @onDimensionItemChange="dimensionItemChange"
+                                @onDimensionItemRemove="dimensionItemRemove"
+                                @onNameEdit="showRename"
+                                @onCustomSort="onExtCustomRightSort"
+                              />
+                            </template>
+                          </draggable>
+                          <drag-placeholder :drag-list="view.extBubble" />
+                        </div>
+                      </el-row>
                       <!--yAxisExt-->
                       <el-row class="padding-lr drag-data" v-if="showAxis('yAxisExt')">
                         <div class="form-draggable-title">

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

@@ -39,7 +39,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
       'seriesTooltipFormatter'
     ]
   }
-  axis: AxisType[] = [...CHART_MIX_AXIS_TYPE, 'yAxisExt']
+  axis: AxisType[] = [...CHART_MIX_AXIS_TYPE, 'xAxisExtRight', 'yAxisExt']
   axisConfig = {
     ...this['axisConfig'],
     yAxis: {
@@ -47,6 +47,12 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
       limit: 1,
       type: 'q'
     },
+    extBubble: {
+      //用这个字段存放右轴分类
+      name: `${t('chart.drag_block_type_axis_right')} / ${t('chart.dimension')}`,
+      limit: 1,
+      type: 'd'
+    },
     yAxisExt: {
       name: `${t('chart.drag_block_value_axis_right')} / ${t('chart.line_quota')}`,
       limit: 1,
@@ -66,6 +72,8 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
     const data1Type = 'column'
     const data2Type = 'line'
 
+    const seriesField2 = chart.extBubble?.length > 0 ? 'category' : undefined
+
     const data1 = defaultTo(left[0]?.data, [])
     const data2 = map(defaultTo(right[0]?.data, []), d => {
       return {
@@ -100,7 +108,8 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
         },
         {
           geometry: data2Type,
-          color: color[1]
+          color: seriesField2 ? color : color[1],
+          seriesField: seriesField2
         }
       ],
       interactions: [
@@ -335,7 +344,6 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
         tooltip: false
       }
     }
-    const xAxisExt = chart.xAxisExt
     const formatterMap = tooltipAttr.seriesTooltipFormatter
       ?.filter(i => i.show)
       .reduce((pre, next) => {
@@ -360,10 +368,8 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
           .forEach(item => {
             const formatter = formatterMap[item.data.quotaList[0].id]
             const value = valueFormatter(parseFloat(item.value as string), formatter.formatterCfg)
-            let name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
+            const name = item.data.category
-            if (xAxisExt?.length > 0) {
+
-              name = item.data.category
-            }
             result.push({ ...item, name, value })
           })
         head.data.dynamicTooltipValue?.forEach(item => {