diff --git a/mindinsight/ui/src/mixins/threshold.vue b/mindinsight/ui/src/mixins/threshold.vue
index 863098c9..85c6817b 100644
--- a/mindinsight/ui/src/mixins/threshold.vue
+++ b/mindinsight/ui/src/mixins/threshold.vue
@@ -25,8 +25,8 @@ export default {
       thresholdErrorMsg: '',
       thresholdRelational: '',
       thresholdValue: [
-        {filterCondition: this.$t('scalar.lessThan'), value: ''},
-        {filterCondition: this.$t('scalar.lessThan'), value: ''},
+        { filterCondition: this.$t('scalar.lessThan'), value: '' },
+        { filterCondition: this.$t('scalar.lessThan'), value: '' },
       ],
       filterOptions: [
         {
@@ -53,7 +53,7 @@ export default {
       if (localStorage.getItem('thresholdCache')) {
         try {
           this.thresholdLocal = JSON.parse(
-              localStorage.getItem('thresholdCache'),
+            localStorage.getItem('thresholdCache')
           );
           this.clearCache();
         } catch (e) {
@@ -80,8 +80,8 @@ export default {
         ) {
           delete this.thresholdLocal[this.decodeTrainingJobId];
           localStorage.setItem(
-              'thresholdCache',
-              JSON.stringify(this.thresholdLocal),
+            'thresholdCache',
+            JSON.stringify(this.thresholdLocal)
           );
         }
       }
@@ -94,7 +94,7 @@ export default {
 
     setOnePoint(sampleObject) {
       const that = this;
-      sampleObject.charObj.on('datazoom', function(params) {
+      sampleObject.charObj.on('datazoom', function (params) {
         const xAxisObject = params.batch[0];
         const yAxisObject = params.batch[1];
         const charData = sampleObject.charData.charOption.series[0].data;
@@ -153,7 +153,7 @@ export default {
 
     setRestore(sampleObject) {
       const that = this;
-      sampleObject.charObj.on('restore', function(params) {
+      sampleObject.charObj.on('restore', function (params) {
         const charData = sampleObject.charData.charOption.series[0].data;
         const tempCharOption = sampleObject.charData.charOption;
 
@@ -193,9 +193,9 @@ export default {
         this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
       ) {
         const tempStorgeArr = JSON.parse(
-            JSON.stringify(
-                this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName],
-            ),
+          JSON.stringify(
+            this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
+          )
         );
         let pieceStr = '';
         pieceStr = this.formatePieceStr(tempStorgeArr);
@@ -228,7 +228,7 @@ export default {
         this.thresholdLocal[this.decodeTrainingJobId][sampleItem.tagName]
       ) {
         delete this.thresholdLocal[this.decodeTrainingJobId][
-            sampleItem.tagName
+          sampleItem.tagName
         ];
       }
       this.currentTagName = sampleItem.tagName;
@@ -415,8 +415,8 @@ export default {
       // Two filter condition
       if (chartPiecesTemp.length === 2) {
         const relationalArr = [];
-        relationalArr[0] = chartPiecesTemp[0].lt || chartPiecesTemp[1].lt;
-        relationalArr[1] = chartPiecesTemp[0].gt || chartPiecesTemp[1].gt;
+        relationalArr[0] = chartPiecesTemp[0].lt || chartPiecesTemp[1].lt || 0;
+        relationalArr[1] = chartPiecesTemp[0].gt || chartPiecesTemp[1].gt || 0;
         if (
           relationalArr[0] >= sampleObject.zoomData[1] ||
           relationalArr[1] <= sampleObject.zoomData[0]
@@ -459,6 +459,9 @@ export default {
           data: markLineData,
         };
 
+        sampleObject.charObj.setOption(tempCharOption, false);
+      } else {
+        tempCharOption.series[0].lineStyle['color'] = sampleObject.colors;
         sampleObject.charObj.setOption(tempCharOption, false);
       }
     },
@@ -577,7 +580,7 @@ export default {
           this.originDataArr.forEach((sampleObject) => {
             if (this.multiSelectedTagNames[sampleObject.tagName]) {
               this.thresholdLocal[this.decodeTrainingJobId][
-                  sampleObject.tagName
+                sampleObject.tagName
               ] = chartPieces;
               sampleObject.pieceStr = pieceStr;
 
@@ -588,14 +591,14 @@ export default {
           });
         } else {
           this.thresholdLocal[this.decodeTrainingJobId][
-              this.currentTagName
+            this.currentTagName
           ] = chartPieces;
           this.currentSample.pieceStr = pieceStr;
           this.setVisualMap(this.currentSample, chartPieces);
         }
         localStorage.setItem(
-            'thresholdCache',
-            JSON.stringify(this.thresholdLocal),
+          'thresholdCache',
+          JSON.stringify(this.thresholdLocal)
         );
 
         this.thresholdDialogVisible = false;
@@ -660,11 +663,11 @@ export default {
               this.thresholdLocal &&
               this.thresholdLocal[this.decodeTrainingJobId] &&
               this.thresholdLocal[this.decodeTrainingJobId][
-                  sampleObject.tagName
+                sampleObject.tagName
               ]
             ) {
               delete this.thresholdLocal[this.decodeTrainingJobId][
-                  sampleObject.tagName
+                sampleObject.tagName
               ];
               sampleObject.pieceStr = '';
               const tempCharOption = sampleObject.charData.charOption;
@@ -691,7 +694,7 @@ export default {
           this.thresholdLocal[this.decodeTrainingJobId][this.currentTagName]
         ) {
           delete this.thresholdLocal[this.decodeTrainingJobId][
-              this.currentTagName
+            this.currentTagName
           ];
           this.currentSample.pieceStr = '';
           const tempCharOption = this.currentSample.charData.charOption;
@@ -703,7 +706,7 @@ export default {
             tempCharOption.visualMap = null;
             tempCharOption.series[0].markLine = null;
             tempCharOption.series[0].lineStyle[
-                'color'
+              'color'
             ] = this.currentSample.colors;
           }
           this.currentSample.charObj.setOption(tempCharOption, false);
@@ -711,8 +714,8 @@ export default {
       }
       this.clearCache();
       localStorage.setItem(
-          'thresholdCache',
-          JSON.stringify(this.thresholdLocal),
+        'thresholdCache',
+        JSON.stringify(this.thresholdLocal)
       );
       this.delThresholdVisible = false;
     },
diff --git a/mindinsight/ui/src/views/train-manage/scalar.vue b/mindinsight/ui/src/views/train-manage/scalar.vue
index 47df05a7..e17e1d29 100644
--- a/mindinsight/ui/src/views/train-manage/scalar.vue
+++ b/mindinsight/ui/src/views/train-manage/scalar.vue
@@ -528,7 +528,6 @@ export default {
               if (resData.metadatas.length) {
                 relativeTimeBench = resData.metadatas[0].wall_time;
               }
-
               // Initializing chart data
               resData.metadatas.forEach((metaData) => {
                 if (metaData.value === null && !hasInvalidData) {
@@ -546,7 +545,9 @@ export default {
                   metaData.wall_time - relativeTimeBench,
                   metaData.value,
                 ]);
-                const logValue = metaData.value >= 0 ? metaData.value : '';
+                // Values less than 0 have no logarithm
+                // Set empty string and echart does not render
+                const logValue = metaData.value > 0 ? metaData.value : '';
                 tempObject.logData.stepData.push([metaData.step, logValue]);
                 tempObject.logData.absData.push([metaData.wall_time, logValue]);
                 tempObject.logData.relativeData.push([