feat：添加chart option选项

nezha-fronted/src/components/charts/chart-list.vue

@@ -659,23 +659,6 @@
             }
 
             this.dataList = [...this.dataTotalList];
-            // this.dataList.push({ // 拓扑图
-            //   id: -10,
-            //   panelId: 0,
-            //   title: this.$t("alert.config.chart.alertNumTrend"),
-            //   span: 8,
-            //   height: 800,
-            //   type: "topology",
-            //   prev: -11,
-            //   next: -1,
-            //   unit: 1,
-            //   buildIn: 1,
-            //   elements: [{
-            //     id: '',
-            //     expression: `nz_alert_nums{id="${3333}"}`,
-            //     type: ''
-            //   }]
-            // });
             this.$nextTick(() => {
               if (this.dataList.length > 0 ) {
                 this.dataList.forEach((item,index) => {
@@ -854,6 +837,10 @@
               const axiosArr = chartItem.elements.map((ele) => {
                 const filterItem = ele;
                 let query = encodeURIComponent(filterItem.expression);
+                if(chartInfo.type==='line'||chartInfo.type==='bar'||chartInfo.type==='stackArea'){//如果是这三个 默认给connected
+                  chartInfo.param.nullType=chartInfo.param.nullType||'connected';
+                  query+='&nullType='+chartInfo.param.nullType;
+                }
                 return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
               });
               // 一个图表的所有element单独获取数据
@@ -1249,6 +1236,10 @@
           let step = bus.getStep(startTime, endTime);
           this.$nextTick(() => {
             let query = chartInfo.elements[0].expression;
+            if(chartInfo.type==='line'||chartInfo.type==='bar'||chartInfo.type==='stackArea'){
+              chartInfo.param.nullType=chartInfo.param.nullType||'connected';
+              query+='&nullType='+chartInfo.param.nullType;
+            }
             this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step=5m').then(response => {
               if (response.status === 'success') {
                 if (response.data.result) {
@@ -1683,6 +1674,7 @@
     mounted() {
       this.tempDomInit();
     },
+
   };
 
 </script>

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -1229,15 +1229,27 @@
             axiosArr = this.data.elements.map((ele) => {
               const filterItem = ele;
               let query = encodeURIComponent(filterItem.expression);
+              if(this.chartInfo.type==='line'||this.chartInfo.type==='bar'||this.chartInfo.type==='stackArea'){//如果是这三个 默认给connected
+                this.chartInfo.param.nullType=this.chartInfo.param.nullType||'connected';
+                query+='&nullType='+this.chartInfo.param.nullType;
+              }
               return  this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
             });
           } else if (type === 'dashboard') { // 概览模式,指标概览中使用
             // 概览模式,需要区分单独一个和多个
             if (this.stableFilter.chartCount === 'multiple') {
               let query = encodeURIComponent(this.data.title);
+              if(this.chartInfo.type==='line'||this.chartInfo.type==='bar'||this.chartInfo.type==='stackArea'){//如果是这三个 默认给connected
+                this.chartInfo.param.nullType=this.chartInfo.param.nullType||'connected';
+                query+='&nullType='+this.chartInfo.param.nullType;
+              }
               axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
             } else {
               let query = encodeURIComponent(this.data.elements[0].expression);
+              if(this.chartInfo.type==='line'||this.chartInfo.type==='bar'||this.chartInfo.type==='stackArea'){//如果是这三个 默认给connected
+                this.chartInfo.param.nullType=this.chartInfo.param.nullType||'connected';
+                query+='&nullType='+this.chartInfo.param.nullType;
+              }
               axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
             }
           }
@@ -1677,7 +1689,7 @@
           unit,
           oldDot
         }
-      }
+      },
     },
     mounted() {
       this.firstLoad = false;

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -152,7 +152,13 @@
           <el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="editChart.param.url"></el-input>
         </el-form-item>
 
-        <el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold"  class="half-form-item">
+        <el-form-item  v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='"Null Type"' prop="nullType"  class="half-form-item">
+          <el-select class="right-box-row-with-btn"  popper-class="chart-box-dropdown-small" v-model="editChart.param.nullType" placeholder="" size="mini" @change="$forceUpdate()">
+            <el-option v-for="item in nullTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold"  class="half-form-item" style="width: 415px">
           <el-input size="mini" type="input" v-model="editChart.param.threshold"></el-input>
         </el-form-item>
 
@@ -374,6 +380,16 @@
         elementTarget: [], // 本地保存数据
         alertParams:{},
         spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        nullTypeList:[{
+          label:'connected',
+          value:'connected'
+        },{
+          label:'null',
+          value:'null'
+        },{
+          label:'zero',
+          value:'zero'
+        }],
         // 是否为编辑已有信息
         isedit: false,
         //productId: 0,//不需要这个参数，可以删除
@@ -717,6 +733,7 @@
             }
             if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
               params.param.threshold=this.editChart.param.threshold;
+              params.param.nullType=this.editChart.param.nullType;
             } else {
               delete params.param.threshold;
             }
@@ -993,6 +1010,9 @@
           }else{
             this.editChart.param.threshold='';
           }
+          if((this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea')&&data.param){
+            this.editChart.param.nullType=data.param.nullType;
+          }
           this.setIsOtherChart();
           //this.getSuggestMetric();//获得指标列表
           // 指标
@@ -1029,7 +1049,8 @@
         param.url='';
         param.threshold='';
         param.valueMapping={type:'text',mapping:[{value:'',text:''}]};
-        param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'}
+        param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'};
+        param.nullType='connected';
         this.$set(this.editChart, "param", param);
         this.elements = [1];
         this.elementTarget = [];
@@ -1090,7 +1111,7 @@
         }else {
           this.setIsOtherChart();
           if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
-            this.editChart.param={threshold:'',legendValue:{min:'off',max:'off',avg:'off',last:'off',total:'off'}}
+            this.editChart.param={nullType:this.editChart.param.nullType,threshold:'',legendValue:{min:'off',max:'off',avg:'off',last:'off',total:'off'}}
           }
           /*if(this.$refs.chartTag){
             this.$refs.chartTag.forEach((item, index) => {
@@ -1163,9 +1184,11 @@
               }
               if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
                 params.param.threshold=this.editChart.param.threshold;
+                params.param.nullType=this.editChart.param.nullType;
                 params.param.legendValue=this.editChart.param.legendValue;
               } else {
                 delete params.param.threshold;
+                delete params.param.nullType;
               }
               //生成指标数组
               const elements = [];
@@ -1254,6 +1277,9 @@
         immediate: true,
         handler(n) {
           this.editChart = JSON.parse(JSON.stringify(n));
+          if(!n.param.nullType){
+            this.editChart.param.nullType='connected';
+          }
           if (n.type === 'url') {
             this.setIsUrl();
           } else if(n.type === 'alertList'){