Merge pull request #10242 from ulleo/dev-v2

feat(图表): 新增分组柱线组合图&堆叠柱线组合图
2026-05-20 11:38:11 +08:00 · 2024-06-13 14:16:45 +08:00
parent 7d7831cef9 0e1fadb936
commit 9b60b15a30
15 changed files with 213 additions and 26 deletions
--- a/core/core-frontend/src/components/visualization/UserViewEnlarge.vue
+++ b/core/core-frontend/src/components/visualization/UserViewEnlarge.vue
@@ -64,12 +64,12 @@
          show-position="viewDialog"
        />
        <chart-component-s2
-          v-if="optType === 'details' && sourceViewType !== 'chart-mix'"
+          v-if="optType === 'details' && !sourceViewType.includes('chart-mix')"
          :view="viewInfo"
          show-position="viewDialog"
          ref="chartComponentDetails"
        />
-        <template v-else-if="optType === 'details' && sourceViewType === 'chart-mix'">
+        <template v-else-if="optType === 'details' && sourceViewType.includes('chart-mix')">
          <el-tabs class="tab-header" v-model="activeName" @tab-change="handleClick">
            <el-tab-pane :label="t('chart.drag_block_value_axis_left')" name="left"></el-tab-pane>
            <el-tab-pane :label="t('chart.drag_block_value_axis_right')" name="right"></el-tab-pane>
@@ -214,7 +214,7 @@ const dialogInit = (canvasStyle, view, item, opt) => {
 const dataDetailsOpt = () => {
  nextTick(() => {
    const viewDataInfo = dvMainStore.getViewDataDetails(viewInfo.value.id)
-    if (sourceViewType.value === 'chart-mix') {
+    if (sourceViewType.value.includes('chart-mix')) {
      chartComponentDetails.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.left)
      chartComponentDetails2.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.right)
    } else {
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -883,6 +883,8 @@ export default {
    last_layer: '当前已经是最后一级',
    radar_size: '大小',
    chart_mix: '柱线组合图',
+    chart_mix_group_column: '分组柱线组合图',
+    chart_mix_stack_column: '堆叠柱线组合图',
    axis_value: '轴值',
    axis_value_min: '最小值',
    axis_value_max: '最大值',
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
@@ -226,7 +226,13 @@ onMounted(() => {
          class="drop-style"
          :class="themes === 'dark' ? 'dark-dimension-quota' : ''"
        >
-          <el-dropdown-item @click.prevent>
+          <el-dropdown-item
+            @click.prevent
+            v-if="
+              !chart.type.includes('chart-mix') ||
+              (chart.type.includes('chart-mix') && type === 'dimension')
+            "
+          >
            <el-dropdown
              :effect="themes"
              popper-class="data-dropdown_popper_mr9"
@@ -305,7 +311,14 @@ onMounted(() => {
            </el-dropdown>
          </el-dropdown-item>

-          <el-dropdown-item @click.prevent v-if="item.deType === 1" divided>
+          <el-dropdown-item
+            @click.prevent
+            v-if="item.deType === 1"
+            :divided="
+              !chart.type.includes('chart-mix') ||
+              (chart.type.includes('chart-mix') && type === 'dimension')
+            "
+          >
            <el-dropdown
              :effect="themes"
              placement="right-start"
@@ -495,7 +508,14 @@ onMounted(() => {
              </template>
            </el-dropdown>
          </el-dropdown-item>
-          <el-dropdown-item class="menu-item-padding" divided :command="beforeClickItem('rename')">
+          <el-dropdown-item
+            class="menu-item-padding"
+            :divided="
+              !chart.type.includes('chart-mix') ||
+              (chart.type.includes('chart-mix') && type === 'dimension')
+            "
+            :command="beforeClickItem('rename')"
+          >
            <el-icon>
              <icon name="icon_edit_outlined"></icon>
            </el-icon>
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
@@ -665,7 +665,10 @@ onMounted(() => {
          <el-dropdown-item
            @click.prevent
            v-if="
-              props.type !== 'extLabel' && props.type !== 'extTooltip' && props.type !== 'extBubble'
+              props.type !== 'extLabel' &&
+              props.type !== 'extTooltip' &&
+              props.type !== 'extBubble' &&
+              !chart.type.includes('chart-mix')
            "
            :divided="chart.type !== 'table-info'"
          >
@@ -739,6 +742,7 @@ onMounted(() => {
            "
            :icon="Filter"
            :command="beforeClickItem('filter')"
+            :divided="chart.type.includes('chart-mix')"
          >
            <span>{{ t('chart.filter') }}...</span>
          </el-dropdown-item>
--- a/core/core-frontend/src/views/chart/components/editor/drag-label/DimensionLabel.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-label/DimensionLabel.vue
@@ -21,7 +21,7 @@ const props = defineProps({
        (props.view.type.includes('bar') ||
          props.view.type.includes('line') ||
          props.view.type.includes('scatter') ||
-          props.view.type === 'chart-mix' ||
+          props.view.type.includes('chart-mix') ||
          props.view.type === 'waterfall' ||
          props.view.type === 'area' ||
          props.view.type === 'area-stack')
--- a/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue
@@ -45,7 +45,7 @@ const props = defineProps({
    <span v-else-if="props.view.type && props.view.type.includes('tree')">{{
      t('chart.drag_block_treemap_size')
    }}</span>
-    <span v-else-if="props.view.type && props.view.type === 'chart-mix'">{{
+    <span v-else-if="props.view.type && props.view.type.includes('chart-mix')">{{
      t('chart.drag_block_value_axis_main')
    }}</span>
    <span v-else-if="props.view.type && props.view.type === 'liquid'">{{
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
@@ -41,7 +41,7 @@ const quotaExtFields = computed<Array<any>>(() => {
 })

 const useQuotaExt = computed<boolean>(() => {
-  return props.chart.type === 'chart-mix'
+  return props.chart.type.includes('chart-mix')
 })

 const state = reactive({
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -124,7 +124,7 @@ const onChangeXAxisForm = (val, prop) => {
 }

 const onChangeYAxisForm = (val, prop) => {
-  if (prop === 'show' && chart.value.type === 'chart-mix') {
+  if (prop === 'show' && chart.value.type.includes('chart-mix')) {
    chart.value.customStyle.yAxisExt.show = val.show
    onChangeYAxisExtForm(chart.value.customStyle.yAxisExt, 'show')
  }
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -634,7 +634,7 @@ const addAxis = (e, axis: AxisType) => {
      emitter.emit('removeAxis', { axisType: 'yAxis', axis, editType: 'remove' })
    }
  }
-  if (view.value.type === 'chart-mix') {
+  if (view.value.type.includes('chart-mix')) {
    if (axis === 'yAxis') {
      if (view.value.yAxisExt.length > 0) {
        const chartType = view.value.yAxisExt[0].chartType
@@ -1052,7 +1052,6 @@ const saveRename = ref => {
  ref.validate(valid => {
    if (valid) {
      const { renameType, index, chartShowName } = state.itemForm
-      console.log(renameType)
      let axisType, axis
      switch (renameType) {
        case 'quota':
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -1374,6 +1374,20 @@ export const CHART_TYPE_CONFIGS = [
        value: 'chart-mix',
        title: t('chart.chart_mix'),
        icon: 'chart-mix'
+      },
+      {
+        render: 'antv',
+        category: 'dual_axes',
+        value: 'chart-mix-group',
+        title: t('chart.chart_mix_group_column'),
+        icon: 'chart-mix'
+      },
+      {
+        render: 'antv',
+        category: 'dual_axes',
+        value: 'chart-mix-stack',
+        title: t('chart.chart_mix_stack_column'),
+        icon: 'chart-mix'
      }
    ]
  },
--- 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
@@ -72,6 +72,9 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
    const data1Type = 'column'
    const data2Type = 'line'

+    const isGroup = this.name === 'chart-mix-group' && chart.xAxisExt?.length > 0
+    const isStack = this.name === 'chart-mix-stack' && chart.extStack?.length > 0
+    const seriesField = isGroup ? 'category' : isStack ? 'category' : undefined
    const seriesField2 = chart.extBubble?.length > 0 ? 'category' : undefined

    const data1 = defaultTo(left[0]?.data, [])
@@ -104,7 +107,11 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
      geometryOptions: [
        {
          geometry: data1Type,
-          color: color[0]
+          color: isGroup || isStack ? color : color[0],
+
+          isGroup: isGroup,
+          isStack: isStack,
+          seriesField: seriesField
        },
        {
          geometry: data2Type,
@@ -398,11 +405,12 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
      o.legend.itemName = {
        formatter: (text: string, item: any, index: number) => {
          let name = undefined
-          if (index === 0 && text === 'value') {
+          if (item.viewId === 'left-axes-view' && text === 'value') {
            name = left[0]?.name
-          } else if (index === 1 && text === 'valueExt') {
+          } else if (item.viewId === 'right-axes-view' && text === 'valueExt') {
            name = right[0]?.name
          }
+          item.id = item.id + '__' + index //防止重复的图例出现问题，但是左右轴如果有相同的怎么办
          if (name === undefined) {
            return text
          } else {
@@ -447,3 +455,32 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
    super(name, DEFAULT_DATA)
  }
 }
+
+export class GroupColumnLineMix extends ColumnLineMix {
+  axis: AxisType[] = [...this['axis'], 'xAxisExt']
+  axisConfig = {
+    ...this['axisConfig'],
+    yAxis: {
+      name: `${t('chart.drag_block_value_axis_left')} / ${t('chart.column_quota')}`,
+      limit: 1,
+      type: 'q'
+    }
+  }
+  constructor(name = 'chart-mix-group') {
+    super(name)
+  }
+}
+export class StackColumnLineMix extends ColumnLineMix {
+  axis: AxisType[] = [...this['axis'], 'extStack']
+  axisConfig = {
+    ...this['axisConfig'],
+    yAxis: {
+      name: `${t('chart.drag_block_value_axis_left')} / ${t('chart.column_quota')}`,
+      limit: 1,
+      type: 'q'
+    }
+  }
+  constructor(name = 'chart-mix-stack') {
+    super(name)
+  }
+}
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -676,7 +676,8 @@ export function getAnalyse(chart: Chart) {
      return (
        dynamicLineFields?.includes(item.fieldId) &&
        (!!_.find(quotaFields, d => d.id === item.fieldId) ||
-          (!!_.find(quotaExtFields, d => d.id === item.fieldId) && chart.type === 'chart-mix'))
+          (!!_.find(quotaExtFields, d => d.id === item.fieldId) &&
+            chart.type.includes('chart-mix')))
      )
    })
    const lines = fixedLines.concat(dynamicLines)
--- a/core/core-frontend/src/views/chart/components/js/util.ts
+++ b/core/core-frontend/src/views/chart/components/js/util.ts
@@ -467,7 +467,7 @@ export const exportExcelDownload = (chart, callBack?) => {
    viewInfo: chart,
    viewName: excelName
  }
-  if (chart.type === 'chart-mix') {
+  if (chart.type.includes('chart-mix')) {
    const req1 = getExcelDownloadRequest(chart.data.left)
    const req2 = getExcelDownloadRequest(chart.data.right)
    request = {