Merge pull request #4138 from dataease/pr@dev@feat_sum

feat(视图): 柱状图、折线图支持结果隐藏空数据

frontend/src/lang/en.js

@@ -1480,9 +1480,9 @@ export default {
     total_sort_desc: 'DESC',
     total_sort_field: 'Sort Field',
     empty_data_strategy: 'Empty Data Strategy',
-    break_line: 'Disconnection',
+    break_line: 'Keep',
     set_zero: 'Set Zero',
-    ignore_data: 'Ignore Data',
+    ignore_data: 'Hide Data',
     sub_dimension_tip: 'This field is required, and cannot be included in the type axis, you should choose non-group chart if you don\'t need it, or you will get unexpected chart.',
     drill_dimension_tip: 'Only fields in the dataset can be drilled',
     table_scroll_tip: 'The detail table is only effective when the pagination mode is "Drop-down".',

frontend/src/lang/tw.js

@@ -1479,9 +1479,9 @@ export default {
     total_sort_desc: '降序',
     total_sort_field: '排序字段',
     empty_data_strategy: '空值處理',
-    break_line: '線條斷開',
-    set_zero: '置為0，線條不斷開',
-    ignore_data: '跳過空值，不展示',
+    break_line: '保持為空',
+    set_zero: '置為0',
+    ignore_data: '隱藏空值',
     sub_dimension_tip: '該字段為必填項，且不應使用類別軸中的字段，若無需該字段，請選擇基礎圖表進行展示，否則展示效果不理想',
     drill_dimension_tip: '鑽取字段僅支持數據集中的字段',
     table_scroll_tip: '明細表僅在分頁模式為"下拉"時生效。',

frontend/src/lang/zh.js

@@ -1478,9 +1478,9 @@ export default {
     total_sort_desc: '降序',
     total_sort_field: '排序字段',
     empty_data_strategy: '空值处理',
-    break_line: '线条断开',
-    set_zero: '置为0,线条不断开',
-    ignore_data: '跳过空值,不展示',
+    break_line: '保持为空',
+    set_zero: '置为0',
+    ignore_data: '隐藏空值',
     sub_dimension_tip: '该字段为必填项，且不应使用类别轴中的字段，若无需该字段，请选择基础图表进行展示，否则展示效果不理想。',
     drill_dimension_tip: '钻取字段仅支持数据集中的字段',
     table_scroll_tip: '明细表仅在分页模式为"下拉"时生效。',

frontend/src/views/chart/chart/bar/bar_antv.js

@@ -11,7 +11,8 @@ import {
   getAnalyse,
   setGradientColor
 } from '@/views/chart/chart/common/common_antv'
-import { antVCustomColor } from '@/views/chart/chart/util'
+import { antVCustomColor, handleEmptyDataStrategy } from '@/views/chart/chart/util'
+import _ from 'lodash'
 
 export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
   // theme
@@ -24,7 +25,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   const xAxis = getXAxis(chart)
   const yAxis = getYAxis(chart)
   // data
-  const data = chart.data.data
+  const data = _.cloneDeep(chart.data.data)
   // config
   const slider = getSlider(chart)
   const analyse = getAnalyse(chart)
@@ -109,6 +110,14 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
       return setGradientColor(ele, customAttr.color.gradient, 270)
     })
   }
+  // 处理空值
+  if (chart.senior) {
+    let emptyDataStrategy = JSON.parse(chart.senior)?.functionCfg?.emptyDataStrategy
+    if (!emptyDataStrategy) {
+      emptyDataStrategy = 'breakLine'
+    }
+    handleEmptyDataStrategy(emptyDataStrategy, chart, data, options)
+  }
 
   // 开始渲染
   if (plot) {
@@ -133,7 +142,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
   const xAxis = getXAxis(chart)
   const yAxis = getYAxis(chart)
   // data
-  const data = chart.data.data
+  const data = _.cloneDeep(chart.data.data)
   // config
   const slider = getSlider(chart)
   const analyse = getAnalyse(chart)
@@ -211,6 +220,14 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
       return setGradientColor(ele, customAttr.color.gradient)
     })
   }
+  // 处理空值
+  if (chart.senior) {
+    let emptyDataStrategy = JSON.parse(chart.senior)?.functionCfg?.emptyDataStrategy
+    if (!emptyDataStrategy) {
+      emptyDataStrategy = 'breakLine'
+    }
+    handleEmptyDataStrategy(emptyDataStrategy, chart, data, options)
+  }
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/line/line_antv.js

@@ -89,6 +89,7 @@ export function baseLineOptionAntV(plot, container, chart, action) {
   }
   // custom color
   options.color = antVCustomColor(chart)
+  // 处理空值
   if (chart.senior) {
     let emptyDataStrategy = JSON.parse(chart.senior)?.functionCfg?.emptyDataStrategy
     if (!emptyDataStrategy) {
@@ -119,7 +120,7 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) {
   const xAxis = getXAxis(chart)
   const yAxis = getYAxis(chart)
   // data
-  const data = chart.data.data
+  const data = _.cloneDeep(chart.data.data)
   // config
   const slider = getSlider(chart)
   const analyse = getAnalyse(chart)
@@ -197,6 +198,14 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) {
       }
     }
   }
+  // 处理空值
+  if (chart.senior) {
+    let emptyDataStrategy = JSON.parse(chart.senior)?.functionCfg?.emptyDataStrategy
+    if (!emptyDataStrategy) {
+      emptyDataStrategy = 'breakLine'
+    }
+    handleEmptyDataStrategy(emptyDataStrategy, chart, data, options)
+  }
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/components/senior/FunctionCfg.vue

@@ -68,7 +68,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-show="chart.render === 'antv' && chart.type === 'line'"
+          v-show="chart.render === 'antv' && (chart.type.includes('line') || chart.type.includes('bar') || chart.type.includes('area'))"
           :label="$t('chart.empty_data_strategy')"
           class="form-item"
         >
@@ -174,7 +174,7 @@ span{
 }
 .form-item ::v-deep .el-radio-group{
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: wrap;
   label {
     line-height: 28px;