Merge pull request #12618 from dataease/pr@dev-v2@chart-fix

fix(图表): 优化图表的必选字段
2024-10-10 16:49:47 +08:00 · 2024-10-10 16:49:47 +08:00 · 5a10a3e2c6
commit 5a10a3e2c6
parent 55daff9813 576be266d0
8 changed files with 86 additions and 7 deletions
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@ -1881,6 +1881,7 @@ const deleteChartFieldItem = id => {
                      <el-row v-if="showAxis('area')" class="padding-lr drag-data">
                        <span class="data-area-label">
                          {{ t('chart.area') }}
+                          <i class="required"></i>
                        </span>
                        <div class="area-tree-select">
                          <el-tree-select
@ -1906,6 +1907,10 @@ const deleteChartFieldItem = id => {
                        <div class="form-draggable-title">
                          <span>
                            {{ chartViewInstance.axisConfig.xAxis.name }}
+                            <i
+                              v-if="!chartViewInstance.axisConfig.xAxis?.allowEmpty"
+                              class="required"
+                            ></i>
                          </span>
                          <el-tooltip
                            :effect="toolTip"
@ -1966,6 +1971,10 @@ const deleteChartFieldItem = id => {
                        <div class="form-draggable-title">
                          <span>
                            {{ chartViewInstance.axisConfig.xAxisExt.name }}
+                            <i
+                              v-if="!chartViewInstance.axisConfig.xAxisExt?.allowEmpty"
+                              class="required"
+                            ></i>
                          </span>
                          <el-tooltip
                            :effect="toolTip"
@ -2024,6 +2033,10 @@ const deleteChartFieldItem = id => {
                        <div class="form-draggable-title">
                          <span>
                            {{ chartViewInstance.axisConfig.flowMapStartName.name }}
+                            <i
+                              v-if="!chartViewInstance.axisConfig.flowMapStartName?.allowEmpty"
+                              class="required"
+                            ></i>
                          </span>
                          <el-tooltip
                            :effect="toolTip"
@ -2084,6 +2097,10 @@ const deleteChartFieldItem = id => {
                        <div class="form-draggable-title">
                          <span>
                            {{ chartViewInstance.axisConfig.flowMapEndName.name }}
+                            <i
+                              v-if="!chartViewInstance.axisConfig.flowMapEndName?.allowEmpty"
+                              class="required"
+                            ></i>
                          </span>
                          <el-tooltip
                            :effect="toolTip"
@ -2144,6 +2161,10 @@ const deleteChartFieldItem = id => {
                        <div class="form-draggable-title">
                          <span>
                            {{ chartViewInstance.axisConfig.extStack.name }}
+                            <i
+                              v-if="!chartViewInstance.axisConfig.extStack?.allowEmpty"
+                              class="required"
+                            ></i>
                          </span>
                          <el-tooltip
                            :effect="toolTip"
@ -2201,6 +2222,10 @@ const deleteChartFieldItem = id => {
                        <div class="form-draggable-title">
                          <span>
                            {{ chartViewInstance.axisConfig.extColor.name }}
+                            <i
+                              v-if="!chartViewInstance.axisConfig.extColor?.allowEmpty"
+                              class="required"
+                            ></i>
                          </span>
                          <el-tooltip
                            :effect="toolTip"
@ -2264,6 +2289,10 @@ const deleteChartFieldItem = id => {
                            <span class="data-area-label">
                              <span style="margin-right: 4px">
                                {{ chartViewInstance.axisConfig.yAxis.name }}
+                                <i
+                                  v-if="!chartViewInstance.axisConfig.yAxis?.allowEmpty"
+                                  class="required"
+                                ></i>
                              </span>
                              <el-tooltip
                                v-if="chartViewInstance.axisConfig.yAxis.tooltip"
@ -2346,6 +2375,10 @@ const deleteChartFieldItem = id => {
                          <div class="form-draggable-title">
                            <span>
                              {{ chartViewInstance.axisConfig.extBubble.name }}
+                              <i
+                                v-if="!chartViewInstance.axisConfig.extBubble?.allowEmpty"
+                                class="required"
+                              ></i>
                            </span>
                            <el-tooltip
                              :effect="toolTip"
@ -2404,6 +2437,10 @@ const deleteChartFieldItem = id => {
                          <div class="form-draggable-title">
                            <span>
                              {{ chartViewInstance.axisConfig.yAxisExt.name }}
+                              <i
+                                v-if="!chartViewInstance.axisConfig.yAxisExt?.allowEmpty"
+                                class="required"
+                              ></i>
                            </span>
                            <el-tooltip
                              :effect="toolTip"
@ -2466,6 +2503,10 @@ const deleteChartFieldItem = id => {
                          <div class="form-draggable-title">
                            <span>
                              {{ chartViewInstance.axisConfig.yAxis.name }}
+                              <i
+                                v-if="!chartViewInstance.axisConfig.yAxis?.allowEmpty"
+                                class="required"
+                              ></i>
                            </span>
                            <el-tooltip
                              :effect="toolTip"
@ -2541,6 +2582,10 @@ const deleteChartFieldItem = id => {
                          <div class="form-draggable-title">
                            <span>
                              {{ chartViewInstance.axisConfig.yAxisExt.name }}
+                              <i
+                                v-if="!chartViewInstance.axisConfig.yAxisExt?.allowEmpty"
+                                class="required"
+                              ></i>
                            </span>
                            <el-tooltip
                              :effect="toolTip"
@ -2618,6 +2663,10 @@ const deleteChartFieldItem = id => {
                          <span class="data-area-label">
                            <span style="margin-right: 4px">
                              {{ chartViewInstance.axisConfig.extBubble.name }}
+                              <i
+                                v-if="!chartViewInstance.axisConfig.extBubble?.allowEmpty"
+                                class="required"
+                              ></i>
                            </span>
                            <el-tooltip
                              v-if="chartViewInstance.axisConfig.extBubble.tooltip"
@ -4189,6 +4238,14 @@ span {
    display: flex;
    flex-direction: row;
    align-items: center;
+    :deep(.required::after) {
+      content: '*';
+      color: var(--ed-color-danger);
+      margin-left: 4px;
+      font-family: var(--de-custom_font, 'PingFang');
+      font-style: normal;
+      font-weight: 400;
+    }
  }

  .form-draggable-title {
@ -4201,6 +4258,15 @@ span {
      cursor: default;
    }

+    :deep(.required::after) {
+      content: '*';
+      color: var(--ed-color-danger);
+      margin-left: 2px;
+      font-family: var(--de-custom_font, 'PingFang');
+      font-style: normal;
+      font-weight: 400;
+    }
+
    .remove-icon {
      color: #646a73;
      cursor: pointer;
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
@ -92,6 +92,10 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
  axis: AxisType[] = [...BAR_AXIS_TYPE]
  axisConfig = {
    ...this['axisConfig'],
+    xAxis: {
+      name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
+      type: 'd'
+    },
    yAxis: {
      name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`,
      type: 'q'
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
@ -310,7 +310,8 @@ export class HorizontalStackBar extends HorizontalBar {
    extStack: {
      name: `${t('chart.stack_item')} / ${t('chart.dimension')}`,
      type: 'd',
-      limit: 1
+      limit: 1,
+      allowEmpty: true
    }
  }
  propertyInner = {
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
@ -23,6 +23,10 @@ const DEFAULT_DATA = []
 */
 export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
  axisConfig = {
+    xAxis: {
+      name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
+      type: 'd'
+    },
    yAxis: {
      name: `${t('chart.drag_block_value_start')} / ${t('chart.time_dimension_or_quota')}`,
      limit: 1,
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
@ -298,7 +298,8 @@ export class StackArea extends Area {
    extStack: {
      name: `${t('chart.stack_item')} / ${t('chart.dimension')}`,
      type: 'd',
-      limit: 1
+      limit: 1,
+      allowEmpty: true
    }
  }
  protected configLabel(chart: Chart, options: AreaOptions): AreaOptions {
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
@ -49,7 +49,8 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
    xAxisExt: {
      name: `${t('chart.chart_group')} / ${t('chart.dimension')}`,
      type: 'd',
-      limit: 1
+      limit: 1,
+      allowEmpty: true
    },
    yAxis: {
      name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`,
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
@ -20,9 +20,9 @@ const { t } = useI18n()
 const DEFAULT_DATA = []

 /**
- * 区间条形图
+ * 桑基图
 */
-export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
+export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
  axisConfig = {
    xAxis: {
      name: `${t('chart.drag_block_type_axis_start')} / ${t('chart.dimension')}`,
@ -32,7 +32,8 @@ export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
    xAxisExt: {
      name: `${t('chart.drag_block_type_axis_end')} / ${t('chart.dimension')}`,
      limit: 1,
-      type: 'd'
+      type: 'd',
+      allowEmpty: true
    },
    yAxis: {
      name: `${t('chart.chart_data')} / ${t('chart.quota')}`,
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
@ -81,7 +81,8 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
    },
    yAxis: {
      ...this['axisConfig'].yAxis,
-      limit: undefined
+      limit: undefined,
+      allowEmpty: false
    },
    extBubble: {
      name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,