NEZ-305 feat:chart 没有数据时显示xy坐标轴及网格

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

@@ -467,7 +467,7 @@
         this.$nextTick(() => {
           if (this.dataList.length > 0 ) {
             this.dataList.forEach((item,index) => {
-              
+
               this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现
               this.setChartSize(item.span, index);//设置该图表宽度
               if(!item.isLoaded ){
@@ -609,7 +609,7 @@
               }
             }else {
               if (!isSearch && this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id][0]) {
-                
+
                 this.$refs['editChart'+item.id][0].showLoad(item);
               }
               this.setChartSize(item, realIndex); // 设置该图表宽度
@@ -984,6 +984,10 @@
               smooth: 0.2,  //曲线变平滑
               showSymbol: false,
               data: [],
+              lineStyle: {
+                width: 1,
+                opacity: 0.9
+              },
               type: chartInfo.type,
             },
             //visible: true,
@@ -1320,7 +1324,7 @@
           this.chartDataCacheGroup.set(duplicateChartId,duplicateChartData);
           this.$nextTick(() => {
             if (this.$refs['editChart'+duplicateChartId][0]) {
-              
+
               this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现
             }
 
@@ -1404,7 +1408,7 @@
             if(chartType!=='url'){
               that.getChartDataForSearch(item,index);
             } else {
-              
+
               that.$refs['editChart'+item.id][0].showLoad(item);
             }
           }

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

@@ -42,7 +42,7 @@
         </div>
 
         <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
-
+        <div style="position: absolute;top:50%;left:50%;" v-show="noData">No data</div>
         <div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
           <div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
             <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
@@ -78,7 +78,7 @@
             </div>
           </div>
           <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
-
+          <div style="position: absolute;top:50%;left:50%;" v-show="noData">No data</div>
           <div class="legend-container legend-container-screen"  :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
             <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
               <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
@@ -101,6 +101,7 @@
   import chartDataFormat from './chartDataFormat'
   import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
   import timePicker from '../common/timePicker'
+  import chartConfig from "../page/dashboard/overview/chartConfig";
   export default {
     name: 'lineChartBlock',
     components: {
@@ -133,6 +134,7 @@
     data() {
       return {
         data: {}, // 该图表信息,chartItem
+        noData:false,
         seriesItem: [], // 保存信息
         seriesItemScreen:[],
         images: '',
@@ -616,14 +618,27 @@
               show: true,
             },
             splitLine:{
-              show:true
+              show:true,
+              lineStyle: {
+                color: "#d9d9d9",
+                opacity: 0.8,
+                width: 1
+              }
+            },
+            axisTick: {
+              show: false
             },
             //boundaryGap:['20%', '0'],
           },
           yAxis: {
             type: 'value',
             splitLine:{
-              show:true
+              show:true,
+              lineStyle: {
+                color: "#d9d9d9",
+                opacity: 0.8,
+                width: 1
+              }
             },
             //去掉y轴--start
             axisLine:{
@@ -669,8 +684,17 @@
               }else {
                 self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
               }
-              self.echartStore.clear();
+              if(dataArg&&dataArg.length>0){
-              self.echartStore.setOption(option);//创建图表
+                self.echartStore.clear();
+                self.echartStore.setOption(option);//创建图表
+                self.noData=false;
+              }else{
+                self.noData=true;
+                option=chartConfig.getOption('noData')
+                self.echartStore.clear();
+                self.echartStore.setOption(option);//创建图表
+              }
+
               self.$refs['localLoading'+self.chartIndex].endLoading();
               self.firstShow = true; // 展示操作按键
             }, 100);
@@ -766,7 +790,15 @@
                 //console.log("11____00",sumHeight,divHeight,legendDiv)
               self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
               self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
-              self.echartModalStore.setOption(option);//显示全屏界面
+              if(dataArg&&dataArg.length>0){
+                self.echartModalStore.setOption(option);//显示全屏界面
+                self.noData=false;
+              }else{
+                self.noData=true;
+                option=chartConfig.getOption('noData')
+                self.echartModalStore.setOption(option);//显示全屏界面
+              }
+
             }, 100)
 
             this.echartModalStore.on('magictypechanged', function (params) {

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

@@ -309,6 +309,10 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                         showSymbol:false,
                         smooth: 0.2,  //曲线变平滑
                         data: [],
+                        lineStyle: {
+                          width: 1,
+                          opacity: 0.9
+                        },
                         type: 'line',
                       }
                       seriesItem.data = result.values.map((item) => {
@@ -337,14 +341,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                     this.$refs['promql-'+promqlIndex][0].setError(response.data.error)
                   }
                 })
-                if(series.length>0){
+
                   this.$refs.exploreChart.setLegend(legend);
                   this.$refs.exploreChart.setRandomColors(series.length)
                   this.$refs.exploreChart.setSeries(series)
                   this.defaultChartVisible = true;
-                }else{
+
-                  // this.defaultChartVisible = false;
-                }
               }
 
               this.$refs.exploreChart.endLoading();

nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue

@@ -89,13 +89,23 @@
           show: true,
         },
         splitLine:{
-          show:false
+          show:true,
+          lineStyle: {
+            color: "#d9d9d9",
+            opacity: 0.8,
+            width: 1
+          }
         }
       },
       yAxis: {
         type: 'value',
         splitLine:{
-          show:true
+          show:true,
+          lineStyle: {
+            color: "#d9d9d9",
+            opacity: 0.8,
+            width: 1
+          }
         },
         axisLabel: {
           // formatter:null,
@@ -312,12 +322,52 @@
       useUTC: false,//使用本地时间
       series: [],
     };
+    const noDataOption={
+      grid: {
+        top: 30,
+        left: 0,
+        right: 30,
+        containLabel: true,
+        bottom:8,//156
+      },
+      xAxis: {
+        type: 'category',
+        data: createTempTimes(),
+        splitLine:{
+          show:true
+        },
+        axisTick: {
+          show: false
+        },
+      },
+      yAxis: {
+        type: 'category',
+        data: [1, 3, 5, 7, 9, 11, 13],
+        splitLine:{
+          show:true
+        },
+        axisTick: {
+          show: false
+        },
+      },
+      series: null,
+    };
+    function createTempTimes(){
+      let times=[];
+      for(let i=0;i<10;i++){
+        let time=new Date();
+        time.setMinutes(new Date().getMinutes()-(10-i)*5);
+        times.push(bus.timeFormate(time,'hh:mm'))
+      }
+      return times;
+    }
     const chartTypes={
       line:{name:'line',option:commonOption},
       overviewLine: {name: 'line', option: overviewLine},
       map:{name:'map',option:mapOptions},
       pie: {name: 'assetType', option: assetTypePie},
-      bar: {name: 'alertMessage', option: alertMessageBar}
+      bar: {name: 'alertMessage', option: alertMessageBar},
+      noData:{name:'noData',option:noDataOption},
     };
     export default {
       getOption:function(type){