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

fix(图表): 优化图表的必选字段

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;

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'

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 = {

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,

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 {

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')}`,

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')}`,

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')}`,