diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
index b59431927f..0b6a050ca6 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -533,7 +533,7 @@ public class DataSetTableService {
                 .checked(Boolean.TRUE).build();
         List<DatasetTableField> fields = dataSetTableFieldsService.list(datasetTableField);
         if (CollectionUtils.isNotEmpty(extFields)) {
-            fields.addAll(extFields);
+            fields = extFields;
         }
         if (CollectionUtils.isEmpty(fields)) {
             map.put("fields", fields);
@@ -749,7 +749,7 @@ public class DataSetTableService {
             conditionEntities.add(entity2);
             request.setConditions(conditionEntities);
             List<DataSetTaskLogDTO> dataSetTaskLogDTOS = dataSetTableTaskLogService.listTaskLog(request, "excel");
-            if(CollectionUtils.isNotEmpty(dataSetTaskLogDTOS)){
+            if (CollectionUtils.isNotEmpty(dataSetTaskLogDTOS)) {
                 dataSetTaskLogDTOS.get(0).getStatus().equalsIgnoreCase(JobStatus.Underway.name());
                 sycnStatus = dataSetTaskLogDTOS.get(0).getStatus();
             }
@@ -943,14 +943,15 @@ public class DataSetTableService {
         List<SqlVariableDetails> sqlVariableDetails = new ArrayList<>();
         datasetTables.forEach(datasetTable -> {
             if (StringUtils.isNotEmpty(datasetTable.getSqlVariableDetails())) {
-                sqlVariableDetails.addAll(new Gson().fromJson(datasetTable.getSqlVariableDetails(), new TypeToken<List<SqlVariableDetails>>() {}.getType()));
+                sqlVariableDetails.addAll(new Gson().fromJson(datasetTable.getSqlVariableDetails(), new TypeToken<List<SqlVariableDetails>>() {
+                }.getType()));
             }
 
         });
         return sqlVariableDetails;
     }
 
-    public String handleVariableDefaultValue(String sql, String sqlVariableDetails){
+    public String handleVariableDefaultValue(String sql, String sqlVariableDetails) {
         if (StringUtils.isEmpty(sql)) {
             DataEaseException.throwException(Translator.get("i18n_sql_not_empty"));
         }
@@ -958,7 +959,8 @@ public class DataSetTableService {
         Matcher matcher = pattern.matcher(sql);
         while (matcher.find()) {
             SqlVariableDetails defaultsSqlVariableDetail = null;
-            List<SqlVariableDetails> defaultsSqlVariableDetails = new Gson().fromJson(sqlVariableDetails, new TypeToken<List<SqlVariableDetails>>() {}.getType());
+            List<SqlVariableDetails> defaultsSqlVariableDetails = new Gson().fromJson(sqlVariableDetails, new TypeToken<List<SqlVariableDetails>>() {
+            }.getType());
             for (SqlVariableDetails sqlVariableDetail : defaultsSqlVariableDetails) {
                 if (matcher.group().substring(2, matcher.group().length() - 1).equalsIgnoreCase(sqlVariableDetail.getVariableName())) {
                     defaultsSqlVariableDetail = sqlVariableDetail;
@@ -969,11 +971,11 @@ public class DataSetTableService {
                 sql = sql.replace(matcher.group(), defaultsSqlVariableDetail.getDefaultValue());
             }
         }
-       try {
-           sql = removeVariables(sql);
-       }catch (Exception e){
-           e.printStackTrace();
-       }
+        try {
+            sql = removeVariables(sql);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
         return sql;
     }
 
@@ -985,7 +987,7 @@ public class DataSetTableService {
             hasVariables = true;
             sql = sql.replace(matcher.group(), SubstitutedParams);
         }
-        if(!hasVariables){
+        if (!hasVariables) {
             return sql;
         }
         CCJSqlParserUtil.parse(sql, parser -> parser.withSquareBracketQuotation(true));
@@ -993,15 +995,15 @@ public class DataSetTableService {
         Select select = (Select) statement;
         PlainSelect plainSelect = ((PlainSelect) select.getSelectBody());
         Expression expr = plainSelect.getWhere();
-        if(expr == null){
+        if (expr == null) {
             return sql;
         }
         StringBuilder stringBuilder = new StringBuilder();
-        BinaryExpression binaryExpression = (BinaryExpression)expr;
+        BinaryExpression binaryExpression = (BinaryExpression) expr;
 
-        if(!(binaryExpression.getLeftExpression() instanceof BinaryExpression)  && !(binaryExpression.getRightExpression() instanceof BinaryExpression) && hasVarible(binaryExpression.toString())){
+        if (!(binaryExpression.getLeftExpression() instanceof BinaryExpression) && !(binaryExpression.getRightExpression() instanceof BinaryExpression) && hasVarible(binaryExpression.toString())) {
             stringBuilder.append(SubstitutedSql);
-        }else {
+        } else {
             expr.accept(getExpressionDeParser(stringBuilder));
         }
         plainSelect.setWhere(CCJSqlParserUtil.parseCondExpression(stringBuilder.toString()));
@@ -2626,6 +2628,7 @@ public class DataSetTableService {
         };
         return expressionDeParser;
     }
+
     static private boolean hasVarible(String sql) {
         return sql.contains(SubstitutedParams);
     }
diff --git a/frontend/src/views/chart/chart/bar/bar.js b/frontend/src/views/chart/chart/bar/bar.js
index 044e53ed06..bfa55c727e 100644
--- a/frontend/src/views/chart/chart/bar/bar.js
+++ b/frontend/src/views/chart/chart/bar/bar.js
@@ -1,5 +1,6 @@
 import { hexColorToRGBA } from '../util.js'
 import { componentStyle, seniorCfg } from '../common/common'
+import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function baseBarOption(chart_option, chart) {
   // 处理shape attr
@@ -15,6 +16,10 @@ export function baseBarOption(chart_option, chart) {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
@@ -77,6 +82,10 @@ export function horizontalBarOption(chart_option, chart) {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index e7052bd5ad..4b68fdd3b6 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -102,7 +102,8 @@ export const DEFAULT_TOOLTIP = {
     fontSize: '10',
     color: '#909399'
   },
-  formatter: ''
+  formatter: '',
+  backgroundColor: '#ffffff'
 }
 export const DEFAULT_TOTAL = {
   row: {
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index 20e3321636..79c92db299 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -11,7 +11,7 @@ export function getPadding(chart) {
 // color,label,tooltip,axis,legend,background
 export function getTheme(chart) {
   const colors = []
-  let bgColor, labelFontsize, labelColor, tooltipColor, tooltipFontsize, legendColor, legendFontsize
+  let bgColor, labelFontsize, labelColor, tooltipColor, tooltipFontsize, tooltipBackgroundColor, legendColor, legendFontsize
   let customAttr = {}
   if (chart.customAttr) {
     customAttr = JSON.parse(chart.customAttr)
@@ -33,6 +33,7 @@ export function getTheme(chart) {
       const t = JSON.parse(JSON.stringify(customAttr.tooltip))
       tooltipColor = t.textStyle.color
       tooltipFontsize = t.textStyle.fontSize
+      tooltipBackgroundColor = t.backgroundColor
     }
   }
 
@@ -84,7 +85,8 @@ export function getTheme(chart) {
         domStyles: {
           'g2-tooltip': {
             color: tooltipColor,
-            fontSize: tooltipFontsize + 'px'
+            fontSize: tooltipFontsize + 'px',
+            background: tooltipBackgroundColor
           }
         }
       },
diff --git a/frontend/src/views/chart/chart/funnel/funnel.js b/frontend/src/views/chart/chart/funnel/funnel.js
index d38e2f3f30..12119c751c 100644
--- a/frontend/src/views/chart/chart/funnel/funnel.js
+++ b/frontend/src/views/chart/chart/funnel/funnel.js
@@ -1,5 +1,6 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { componentStyle } from '../common/common'
+import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function baseFunnelOption(chart_option, chart) {
   // 处理shape attr
@@ -15,6 +16,10 @@ export function baseFunnelOption(chart_option, chart) {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
diff --git a/frontend/src/views/chart/chart/line/line.js b/frontend/src/views/chart/chart/line/line.js
index 12fc3c4124..1ddb5138a6 100644
--- a/frontend/src/views/chart/chart/line/line.js
+++ b/frontend/src/views/chart/chart/line/line.js
@@ -1,5 +1,6 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { componentStyle, seniorCfg } from '../common/common'
+import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function baseLineOption(chart_option, chart) {
   // 处理shape attr
@@ -15,6 +16,10 @@ export function baseLineOption(chart_option, chart) {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index ab06ba01e6..4338bb9d13 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -1,5 +1,6 @@
 // import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { componentStyle } from '../common/common'
+import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function baseMapOption(chart_option, chart) {
   // 处理shape attr
@@ -21,6 +22,10 @@ export function baseMapOption(chart_option, chart) {
         return text.replace(new RegExp('{a}', 'g'), a).replace(new RegExp('{b}', 'g'), b).replace(new RegExp('{c}', 'g'), c)
       }
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
diff --git a/frontend/src/views/chart/chart/mix/mix.js b/frontend/src/views/chart/chart/mix/mix.js
index cb6f1fa506..d35a0ac698 100644
--- a/frontend/src/views/chart/chart/mix/mix.js
+++ b/frontend/src/views/chart/chart/mix/mix.js
@@ -1,5 +1,6 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { componentStyle, seniorCfg } from '../common/common'
+import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function baseMixOption(chart_option, chart) {
   // 处理shape attr
@@ -16,6 +17,10 @@ export function baseMixOption(chart_option, chart) {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
diff --git a/frontend/src/views/chart/chart/pie/pie.js b/frontend/src/views/chart/chart/pie/pie.js
index b4e85b9ffb..8edd8fa447 100644
--- a/frontend/src/views/chart/chart/pie/pie.js
+++ b/frontend/src/views/chart/chart/pie/pie.js
@@ -1,5 +1,6 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { componentStyle } from '../common/common'
+import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function basePieOption(chart_option, chart) {
   // 处理shape attr
@@ -15,6 +16,10 @@ export function basePieOption(chart_option, chart) {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
@@ -63,6 +68,10 @@ export function rosePieOption(chart_option, chart) {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
diff --git a/frontend/src/views/chart/chart/radar/radar.js b/frontend/src/views/chart/chart/radar/radar.js
index 691cdde0c2..25e54398af 100644
--- a/frontend/src/views/chart/chart/radar/radar.js
+++ b/frontend/src/views/chart/chart/radar/radar.js
@@ -1,5 +1,6 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { componentStyle } from '../common/common'
+import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function baseRadarOption(chart_option, chart) {
   // 处理shape attr
@@ -20,6 +21,10 @@ export function baseRadarOption(chart_option, chart) {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
diff --git a/frontend/src/views/chart/chart/scatter/scatter.js b/frontend/src/views/chart/chart/scatter/scatter.js
index 2e08f7c817..6e1121bacd 100644
--- a/frontend/src/views/chart/chart/scatter/scatter.js
+++ b/frontend/src/views/chart/chart/scatter/scatter.js
@@ -1,5 +1,6 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { componentStyle, seniorCfg } from '../common/common'
+import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 let bubbleArray = []
 let terminalType = 'pc'
@@ -19,6 +20,10 @@ export function baseScatterOption(chart_option, chart, terminal = 'pc') {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
diff --git a/frontend/src/views/chart/chart/treemap/treemap.js b/frontend/src/views/chart/chart/treemap/treemap.js
index 956806a8a6..b8fc8f2f4d 100644
--- a/frontend/src/views/chart/chart/treemap/treemap.js
+++ b/frontend/src/views/chart/chart/treemap/treemap.js
@@ -1,5 +1,6 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { componentStyle } from '../common/common'
+import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function baseTreemapOption(chart_option, chart) {
   // 处理shape attr
@@ -15,6 +16,10 @@ export function baseTreemapOption(chart_option, chart) {
       const reg = new RegExp('\n', 'g')
       tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
       chart_option.tooltip = tooltip
+
+      const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
+      chart_option.tooltip.backgroundColor = bgColor
+      chart_option.tooltip.borderColor = bgColor
     }
   }
   // 处理data
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index 7153c67d04..62ac688103 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -20,6 +20,9 @@
           <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
             <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
           </el-form-item>
+          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.background')" class="form-item">
+            <el-color-picker v-model="tooltipForm.backgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
+          </el-form-item>
           <el-form-item v-show="showProperty('formatter')" class="form-item">
             <span slot="label">
               <span class="span-box">
@@ -101,6 +104,8 @@ export default {
         }
         if (customAttr.tooltip) {
           this.tooltipForm = customAttr.tooltip
+
+          this.tooltipForm.backgroundColor = this.tooltipForm.backgroundColor ? this.tooltipForm.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
         }
       }
     },
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
index ffc51aab38..c768a93e94 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
@@ -14,6 +14,9 @@
           <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
             <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
           </el-form-item>
+          <el-form-item v-show="showProperty('textStyle')" :label="$t('chart.background')" class="form-item">
+            <el-color-picker v-model="tooltipForm.backgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
+          </el-form-item>
         </div>
       </el-form>
     </el-col>
@@ -73,6 +76,8 @@ export default {
         }
         if (customAttr.tooltip) {
           this.tooltipForm = customAttr.tooltip
+
+          this.tooltipForm.backgroundColor = this.tooltipForm.backgroundColor ? this.tooltipForm.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
         }
       }
     },