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

#10083
2024-06-11 17:23:27 +08:00 · 2024-06-11 17:23:27 +08:00 · 924200fbdb
commit 924200fbdb
parent ba3f70925c
6 changed files with 109 additions and 16 deletions
--- a/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java
+++ b/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")
-                    || StringUtils.containsIgnoreCase(view.getType(), "bidirectional-bar")
+            } else if (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);
--- a/core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java
+++ b/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++) {
-                        if (ii == xAxis.size() - 1) {
+                    for (int ii = 0; ii < xAxisBase.size(); ii++) {
+                        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);
            }
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/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: '值轴',
--- a/core/core-frontend/src/models/chart/editor.d.ts
+++ b/core/core-frontend/src/models/chart/editor.d.ts
@ -40,6 +40,7 @@ declare type AxisType =
  | 'xAxis'
  | 'yAxis'
  | 'xAxisExt'
+  | 'xAxisExtRight'
  | 'yAxisExt'
  | 'extBubble'
  | 'drill'
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/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">
--- 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
@ -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
-            if (xAxisExt?.length > 0) {
-              name = item.data.category
-            }
+            const name = item.data.category
+
            result.push({ ...item, name, value })
          })
        head.data.dynamicTooltipValue?.forEach(item => {