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

2020-06-03 18:58:07 +08:00
parent f8b91ed928
commit 0d898ab0bf
4 changed files with 106 additions and 18 deletions
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/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);
            }
          }
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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();
-              self.echartStore.setOption(option);//创建图表
+              if(dataArg&&dataArg.length>0){
+                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) {
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/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();
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/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){