diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
index 0afb6eb5f0..63125c9ad6 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
@@ -117,6 +117,19 @@ const dateOptions = [
         label: t('chart.filter_ge')
       }
     ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'null',
+        label: t('chart.filter_null')
+      },
+      {
+        value: 'not_null',
+        label: t('chart.filter_not_null')
+      }
+    ]
   }
 ]
 const valueOptions = [
@@ -167,6 +180,19 @@ const valueOptions = [
         label: t('chart.filter_between')
       }
     ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'null',
+        label: t('chart.filter_null')
+      },
+      {
+        value: 'not_null',
+        label: t('chart.filter_not_null')
+      }
+    ]
   }
 ]
 const predefineColors = COLOR_PANEL
@@ -447,7 +473,7 @@ init()
             class="line-item"
             :gutter="12"
           >
-            <el-col :span="3">
+            <el-col :span="!isNotEmptyAndNull(item) ? 15 : 3">
               <el-form-item class="form-item">
                 <el-select v-model="item.term" @change="changeThreshold">
                   <el-option-group
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
index 14a8534949..852fe13865 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
@@ -754,6 +754,16 @@ export function mappingColor(value, defaultColor, field, type, filedValueMap?, r
       } else if (t.term === 'default') {
         color = t[type]
         flag = true
+      } else if (t.term === 'null') {
+        if (value === null || value === undefined || value === '') {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'not_null') {
+        if (value !== null && value !== undefined && value !== '') {
+          color = t[type]
+          flag = true
+        }
       }
       if (flag) {
         break
@@ -801,11 +811,25 @@ export function mappingColor(value, defaultColor, field, type, filedValueMap?, r
         color = defaultColor
       }
     } else {
+      const fc = field.conditions[i]
+      if (fc.term === 'null') {
+        if (value === null && value === undefined && value === '') {
+          color = fc[type]
+          flag = true
+        }
+      } else if (fc.term === 'not_null') {
+        if (value !== null && value !== undefined && value !== '') {
+          color = fc[type]
+          flag = true
+        }
+      }
+      if (flag) {
+        break
+      }
       // time
       if (!tv || !value) {
         break
       }
-      const fc = field.conditions[i]
       tv = new Date(tv.replace(/-/g, '/') + ' GMT+8').getTime()
       const v = new Date(value.replace(/-/g, '/') + ' GMT+8').getTime()
       if (fc.term === 'eq') {