feat: echarts/table类型图表

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

@@ -25,6 +25,7 @@
     right: 0;
     cursor: se-resize;
     box-sizing: border-box;
+    user-select: none;
   }
   .vue-resizable-handle:after {
     border-right: 2px solid #555;
@@ -1248,12 +1249,6 @@
           }
         });
       },
-      /*
-      // 刷新数据
-      refreshData() {
-        this.getData(this.filter);
-      },
-       */
       handleElementInViewport(ele,scrollTop,item,index,isSearch) {
         /*
         网页被卷去的高：document.body.scrollTop

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

@@ -1,12 +1,10 @@
-<style lang="scss" scoped>
+<style lang="scss">
-@import './chart-table.scss';
+@import './line-chart-block.scss';
-</style>
-<style>
-  .max-width-90{
-    max-width: 90px;
-  }
 </style>
 <template>
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box resize-box-table" ref="resizeBox">
       <div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
@@ -41,7 +39,6 @@
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
           </el-dropdown>
-
         </div>
         <div class="mt-10 table-container" v-cloak  v-show="firstShow">
           <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="290" :data="seriesItem" border  tooltip-effect="light" v-cloak v-scrollBar:el-table>
@@ -64,16 +61,10 @@
           <div slot="title">
             <span class="nz-dialog-title">{{data.title}}</span>
             <div class="float-right panel-calendar dialog-tool">
-                <!--
-                <el-date-picker prefix-icon=" " size="mini" class="nz-dashboard-picker" ref="calendar" format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange" :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')" :start-placeholder="$t('dashboard.panel.startTime')" :end-placeholder="$t('dashboard.panel.endTime')" align="right">
-                </el-date-picker>-->
               <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
-                <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
             </div>
           </div>
           <el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border  tooltip-effect="light" v-scrollBar:el-table>
-<!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
-<!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
             <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" ></el-table-column>
             <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="420">
               <template slot-scope="scope">
@@ -88,16 +79,10 @@
           </el-table>
           <Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-            <!--
-                <div v-show="showLoadingScreen" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
-                  <div class="el-loading-spinner">
-                    <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
-                    <p class="el-loading-text loading-font">loading</p>
-                  </div>
-                </div>
-                -->
         </el-dialog>
-      <span class="vue-resizable-handle" @mousedown="dragResize"></span>
+        <span class="vue-resizable-handle" @mousedown="startResize"></span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -151,7 +136,6 @@ export default {
       seriesItem: [], // 保存信息
       seriesItemScreen:[],//全屏数据
       images: '',
-            //toolbox: false,
       loading:Object,
       items: {
         metric_name: [], // 每条数据列名称
@@ -160,9 +144,6 @@ export default {
       },
       panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
       firstLoad: false, // 是否第一次加载
-            //showLoading:true,
-            //showLoadingScreen:false,
-            //showTable:true,
       chartType: 'table', // 图表类型
       screenModal: false,
       // 查询数据使用
@@ -175,24 +156,8 @@ export default {
       caretShow:false,
       dragTitleShow:false,
       dropdownMenuShow:false,
-            minHeight:200,
-            chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
-            titleHeight:38,//title-height:28,magrin-bottom:10
-            pageHeight:40,
       divFirstShow:false,
-            //tableLoading: false,
       columns: [
-            //   {
-            //     title: 'metric',
-            //     key: 'metric',
-            //     width: 200,
-            //     sortable: true,
-            // }, {
-            //     title: 'Label', //tag
-            //     key: 'name',
-            //     minWidth: 200,
-            //     sortable: true,
-            // }
         {
           title:'Element',
           key:'element',
@@ -212,86 +177,6 @@ export default {
       }],
       searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
       oldSearchTime: [],
-            /*pickerOptions: {
-                shortcuts: [{
-                    text: this.$t("dashboard.panel.recOne"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setHours(start.getHours() - 1);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.recFour"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setHours(start.getHours() - 4);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.recOneDay"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(start.getDate() - 1);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.yesterday"),
-                    onClick(picker) {
-                        const start = new Date();
-                        const end = new Date();
-                        start.setDate(start.getDate() - 1);
-                        start.setHours(0);
-                        start.setMinutes(0);
-                        start.setSeconds(0);
-                        end.setDate(end.getDate() - 1);
-                        end.setHours(23);
-                        end.setMinutes(59);
-                        end.setSeconds(59);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.recSevenDay"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(start.getDate() - 7);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.recOneMonth"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(start.getDate() - 30);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.curMonth"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(1);
-                        start.setHours(0);
-                        start.setMinutes(0);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: this.$t("dashboard.panel.lastMonth"),
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setDate(1);
-                        start.setMonth(start.getMonth() - 1);
-                        end.setDate(0);
-                        start.setStart();
-                        end.setEnd();
-                        picker.$emit('pick', [start, end]);
-                    }
-                }]
-            },*/
     };
   },
   created() {
@@ -312,6 +197,10 @@ export default {
     filterShowData(source,pageObj){
       return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
     },
+    startResize(e) {
+      let vm = this;
+      this.$chartResizeTool.start(vm, this.data, e);
+    },
     screenPageNo(val) {
       this.screenPageObj.pageNo = val;
       this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
@@ -320,204 +209,37 @@ export default {
       this.screenPageObj.pageSize = val;
       this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
     },
-      dragResize:function(e){
-        var diffWidth =20; //界面的宽度空白的地方的宽度
-        var chartBoxPadding = 22;
-        var targetDiv= document.getElementById('chartTableDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
-        var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
-        var maxWidth = targetDivContainer.offsetWidth-diffWidth;
-        var minWidth = maxWidth/12;
-        var stepWidth = maxWidth/12;
-        var stepHeight = 10;
-
-        //得到点击时该容器的宽高：
-        var targetDivHeight=targetDiv.offsetHeight;
-        var targetDivWidth=targetDiv.offsetWidth;
-        var startY=e.clientY;
-        var startX=e.clientX;
-        var _this=this;
-
-        document.onmousemove=function(e){
-          e.preventDefault();
-          //得到鼠标拖动的宽高距离：取绝对值
-          var distY=Math.abs(e.clientY-startY);
-          var distX=Math.abs(e.clientX-startX);
-
-          //往上方拖动：
-          if( e.clientY < startY){
-            targetDiv.style.height=targetDivHeight-distY+'px';
-            //heightTmp = targetDivHeight-distY;
-          }
-          if( e.clientX < startX){
-            targetDiv.style.width=targetDivWidth-distX+'px';
-            //widthTmp = targetDivWidth-distX;
-          }
-          //往下方拖动：
-          if (e.clientY > startY) {
-            targetDiv.style.height=(targetDivHeight+distY)+'px';
-            //heightTmp = targetDivHeight+distY;
-          }
-          if (e.clientX > startX) {
-            targetDiv.style.width=(targetDivWidth+distX)+'px';
-            //widthTmp = targetDivWidth+distX;
-          }
-
-          if(parseInt(targetDiv.style.height)<=_this.minHeight){
-            targetDiv.style.height=_this.minHeight+'px';
-            //heightTmp = _this.minHeight;
-          }
-
-          if(parseInt(targetDiv.style.width)>=maxWidth){
-            targetDiv.style.width=maxWidth+'px';
-            //widthTmp = maxWidth;
-          }
-          if(parseInt(targetDiv.style.width)<=minWidth){
-            targetDiv.style.width=minWidth+'px';
-            //widthTmp = minWidth;
-          }
-          //调整表格大小
-            let containerHeight = parseInt(targetDiv.style.height);
-            let containerWidth = parseInt(targetDiv.style.width);
-            const chartBox = document.getElementsByClassName('chartBox');
-            chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
-            //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-            //表格的高度
-            const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
-            tableBox.style.height = `${containerHeight-_this.titleHeight-_this.pageHeight}px`;//-75-32+25
-        }
-
-        document.onmouseup=function(){
-          let targetDivHeightNew = parseInt(targetDiv.style.height);
-          //let targetDivHeightNew = heightTmp
-          let targetDivWidthNew = parseInt(targetDiv.style.width);
-          //let targetDivWidthNew = widthTmp;
-
-          let diffHeight =  Math.abs(targetDivHeight-targetDivHeightNew);
-          if(targetDivHeight>targetDivHeightNew){
-            let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
-            //alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
-            targetDiv.style.height = (targetDivHeight-finalDiffHeight)+'px';
-          }
-          if(targetDivHeight<targetDivHeightNew){
-            let finalDiffHeight = Math.ceil(diffHeight/stepHeight)*stepHeight;
-            targetDiv.style.height = (targetDivHeight+finalDiffHeight)+'px';
-          }
-
-          var span = _this.data.span;
-          if(targetDivWidth>targetDivWidthNew){
-            span =  Math.floor((targetDivWidthNew*12)/maxWidth);
-            let finalWidth = Math.floor((targetDivWidthNew*12)/maxWidth)*stepWidth;
-            if((finalWidth)<minWidth){
-              targetDiv.style.width=minWidth+'px';
-              span = 1;
-            }else {
-              targetDiv.style.width = finalWidth+'px';
-            }
-          }
-          if(targetDivWidth<targetDivWidthNew){
-            span =  Math.ceil((targetDivWidthNew*12)/maxWidth);
-            let spanUnit = Math.ceil((targetDivWidthNew*12)/maxWidth);
-            let finalWidth = spanUnit*stepWidth;
-            if(finalWidth>maxWidth || spanUnit===12){
-              targetDiv.style.width=maxWidth+'px';
-              span = 12;
-            }else {
-              targetDiv.style.width = finalWidth+'px';
-            }
-          }
-          //调整表格大小
-          let containerHeight = parseInt(targetDiv.style.height);
-          let containerWidth = parseInt(targetDiv.style.width);
-
-          const chartBox = document.getElementsByClassName('chartBox');
-          chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
-          //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-          //表格的高度
-          const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
-          tableBox.style.height = `${containerHeight-_this.titleHeight-_this.pageHeight}px`;
-
-          const modifyParams = {
-            id:_this.data.id,
-            span:span,
-            height:(containerHeight+_this.chartSpaceHeight),
-            prev:parseInt(_this.data.prev),
-            next:parseInt(_this.data.next),
-          }
-          targetDiv.style.height = (Math.round((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
-          _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
-            if (response.code === 200) {
-              //更新当前图表数据
-              _this.data.span= span;
-              _this.data.height= containerHeight+_this.chartSpaceHeight;
-              _this.$emit('on-drag-chart', _this.data);
-            }else {
-              if(response.msg){
-                _this.$message.error(response.msg);
-              }else if(response.error){
-                _this.$message.error(response.error);
-              }else {
-                _this.$message.error(response);
-              }
-            }
-          });
-          document.onmousemove=null;
-          document.onmouseup = null;
-        }
-      },
     startLoading(area){
       if(area==='screen'){
-            //this.showLoadingScreen = true;
         this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
       }else {
-            //this.showLoading = true;
         this.$refs['localLoading'+this.chartIndex].startLoading();
       }
-/*
-          //this.loading = this.$loading({
-          this.loading = Loading.service({
-            lock:true,
-            text:'loading',
-            background:'rgba(0,0,0,0)',
-            customClass:'loading-font',
-            //fullscreen: false,
-            target:document.getElementById('chartTableDiv')
-          })
-*/
     },
     endLoading(area){
       if(area==='screen'){
-            //this.showLoadingScreen = false;
         this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
       }else {
-            //this.showLoading = false;
         this.$refs['localLoading'+this.chartIndex].endLoading();
       }
     },
-        clearData(){
+    resize(chartItem) {
+      let height = Math.round(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
+      if(height < this.$chartResizeTool.minHeight){
+        height = this.$chartResizeTool.minHeight;
+      }
+      const tableBox = document.getElementById('tableContainer'+this.chartIndex);
+      tableBox.style.height = `${height-this.$refs.Pagination.$el.offsetHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight-this.$chartResizeTool.chartTableBlankHeight}px`;
+      tableBox.querySelector(".el-table__body-wrapper")._ps_.update();
     },
     showLoad(chartItem) {
       //设置高度 chart-table
       this.$nextTick(() => {
-            const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
+        this.resize(chartItem);
-            let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
-            if(height<this.minHeight){
-              height = this.minHeight;
-            }
-            chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-            const tableBox = document.getElementById('tableContainer'+this.chartIndex);
-            //tableBox.style.height = `${height-75-32}px`;
-            tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
       });
       this.startLoading();
       this.divFirstShow = true;
-          //this.tableLoading = true;
     },
-        // 展示图表编辑区
-      /*
-        showTool() {
-            this.toolbox = !this.toolbox;
-        },
-        */
     // 重新请求数据 刷新操作-local
     refreshChart() {
       this.dropdownMenuShow=false;
@@ -537,23 +259,16 @@ export default {
     },
     //全屏时间条件查询
     dateChange(time) {
-            //this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-            //this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-            //this.showTable = false;
       this.searchTime = [...time];
       this.seriesItemScreen = [];
       for(let i=0;i<8;i++){
         this.seriesItemScreen.push({//表格数据
-                // label: '',//label
-                // metric: '',//metric列
           element:'',
           time: '',//采集时间
           value: '',//数值
         });
       }
       this.startLoading('screen');
-            //this.tableLoading = true;
-            //this.firstShow = false;
       this.$emit('on-search-data', this.data.id, this.searchTime);
     },
     clickos() {
@@ -588,19 +303,13 @@ export default {
     showAllScreen() {
       this.dropdownMenuShow=false;
       // 初始化同步时间
-            //this.searchTime = this.oldSearchTime;
-          //alert(JSON.stringify(this.oldSearchTime));
       this.searchTime = [];
-            //this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
-            //this.searchTime[1] = this.oldSearchTime[1];
       this.$set(this.searchTime, 0, this.oldSearchTime[0]);
       this.$set(this.searchTime, 1, this.oldSearchTime[1]);
       this.$refs.calendarPanel.setCustomTime(this.searchTime);
 
       this.seriesItemScreen = this.seriesItem;
       this.screenModal = true;
-            //this.startLoading('screen');
-            //this.endLoading('screen');
     },
     // 设置数据, filter区分
     setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
@@ -624,25 +333,15 @@ export default {
         this.endLoading('screen');
       } else{
         //设置高度 chart-table
-              this.$nextTick(() => {
-                const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
-                let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
-                if(height<this.minHeight){
-                  height = this.minHeight;
-                }
-                chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-                const tableBox = document.getElementById('tableContainer'+this.chartIndex);
-                tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
-              });
         this.divFirstShow = true;
-
+        this.$nextTick(() => {
+          this.resize(chartItem);
+        });
         this.firstShow = true; // 展示操作按键
 
         this.panelIdInner = panelId;
         this.data = chartItem;
         this.unit = chartDataFormat.getUnit(this.data.unit);
-              // this.seriesItem = seriesItem;
-              // this.seriesItemScreen = seriesItem;
         this.storedTableData =seriesItem;
         this.storedScreanTableData=seriesItem;
         this.storedTableData=Object.assign([],this.storedTableData.reverse());
@@ -657,10 +356,7 @@ export default {
           this.oldSearchTime[0] = this.searchTime[0];
           this.oldSearchTime[1] = this.searchTime[1];
         }
-
         this.endLoading();
-              //this.showTable = true;
-              //this.tableLoading = false;
       }
     },
     dealLegendAlias:function(legend,expression){
@@ -679,7 +375,6 @@ export default {
       }else{
         return expression;
       }
-
     },
     // 获取格式
     getNumStr(num) {

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

@@ -150,6 +150,7 @@
 .resize-box {
   border: 1px solid #d8dce1;
   position: absolute;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   top: 0;
@@ -163,7 +164,22 @@
 .resize-shadow-active {
   background-color: #888;
 }
-.line-chart-block {
+.resize-box {
+  .pagination {
+    padding-top: 0;
+  }
+  .chart-table {
+    width: 100%;
+    .table-container {
+      padding: 0 6px;
+      box-sizing: border-box;
+      .nz-table {
+        margin-top: 6px;
+        box-sizing: border-box;
+      }
+    }
+  }
+  .line-chart-block, .chart-table {
     height: 100%;
     position: relative;
     background-color: white;
@@ -214,11 +230,6 @@
       padding-left:8px;
       padding-right:8px;
     }
-  /*.edit:after{
-    display: block;
-    content: "";
-    clear: both;
-  }*/
     .button-panel-height{
       height:26px;
     }
@@ -256,6 +267,7 @@
       font-weight: 600;
     }
   }
+}
 .dialog-tool {
   margin-right: 40px;
 }

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

@@ -4,7 +4,7 @@
 <template>
   <div class="nz-chart-resize">
     <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box" ref="resizeBox">
+    <div class="resize-box resize-box-echarts" ref="resizeBox">
       <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
         <loading  :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
@@ -180,9 +180,6 @@
         showLegend:true,
         searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
         oldSearchTime:[],
-        minHeight:200,
-        chartSpaceHeight:2,//top-border: 1,bottom-border: 1,padding-bottome:3
-        titleHeight:28,
         screenTitleHeight:58
       };
     },
@@ -366,7 +363,7 @@
           _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
             if (response.code === 200) {
               //更新当前图表数据
-              _this.data.span= span;
+              _this.data.span= span;re
               _this.data.height= containerHeight+_this.chartSpaceHeight;
               _this.$emit('on-drag-chart', _this.data);
             }else {
@@ -820,15 +817,15 @@
             setTimeout(function () {
               let divHeight = self.$refs.legendArea.offsetHeight;
               if(!chartInfo.height){
-                self.echartStore.resize({height:(400-divHeight-self.titleHeight-self.chartSpaceHeight)});
+                self.echartStore.resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
               }else {
-                self.echartStore.resize({height:(chartInfo.height-divHeight-self.titleHeight-self.chartSpaceHeight)});
+                self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
               }
               self.echartStore.clear();
               self.echartStore.setOption(option);//创建图表
               self.$refs['localLoading'+self.chartIndex].endLoading();
               self.firstShow = true; // 展示操作按键
-            }, 100)
+            }, 100);
 
             window.addEventListener('resize', function () {
               self.echartStore.resize();
@@ -1042,11 +1039,6 @@
           */
         }else{
           this.legend = legend;
-          //设置高度 chart-table
-          this.$nextTick(() => {
-            let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-            chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
-          });
           this.$refs['localLoading'+this.chartIndex].startLoading();
           this.divFirstShow = true;
           this.firstShow = true; // 展示操作按键
@@ -1062,11 +1054,14 @@
             this.oldSearchTime[0] = this.searchTime[0];
             this.oldSearchTime[1] = this.searchTime[1];
           }
-          //this.$refs['localLoading'+this.chartIndex].endLoading();
           this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
         }
 
       },
+      resize(chartItem) {
+        let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+        chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
+      },
       clearChart(){
         if(this.echartStore){
           this.echartStore.clear();
@@ -1359,11 +1354,11 @@
         //设置高度
         this.$nextTick(() => {
           const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-          let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
+          let height = Math.round(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
-          if(height<this.minHeight){
+          if(height<this.$chartResizeTool.minHeight){
-            height = this.minHeight;
+            height = this.$chartResizeTool.minHeight;
           }
-          chartBox.style.height = `${height-this.chartSpaceHeight}px`;
+          chartBox.style.height = `${height-this.$chartResizeTool.chartBlankHeight}px`;
         });
         this.clearData();
         this.firstShow = false;

nezha-fronted/src/tools.js

@@ -363,6 +363,7 @@ export function unixTimeParseToString(unixTime,fmt='yyyy-MM-dd hh:mm:ss'){
 export const chartResizeTool = {
   minHeight: 200, //图表最小高度
   chartBlankHeight: 2, //图表空白占位高度
+  chartTableBlankHeight: 6, //表格型图表额外空白占位高度
   chartBlankWidth: 20, //图表空白占位宽度
   containerBlankWidth: 25, //容器空白占位宽度（#listContainer的padding）
   titleHeight: 28, //标题dom高度
@@ -375,9 +376,10 @@ export const chartResizeTool = {
     if (height < this.minHeight) {
       height = this.minHeight;
     }
-    return height-this.chartSpaceHeight;
+    return height-this.chartBlankHeight;
   },
-  start(vm, data, event) {
+  start(vm, originalData, event) {
+    let data = JSON.parse(JSON.stringify(originalData)); //将初始对象复制，后续操作使用复制对象
     let shadow; //缩放时底部阴影dom
     let box; //图表内容dom
     try {
@@ -392,15 +394,17 @@ export const chartResizeTool = {
     }
     let chartBlankWidth = this.chartBlankWidth;
     let chartBlankHeight = this.chartBlankHeight;
+    let titleHeight = this.titleHeight;
     let stepWidth = this.stepWidth(document.getElementById('listContainer').offsetWidth);
     let stepHeight = this.stepHeight;
 
-    let containerAvailableWidth = document.getElementById('listContainer').offsetWidth-this.containerBlankWidth;
     let mouseOriginalX = event.clientX; //鼠标初始坐标
     let mouseOriginalY = event.clientY;
-    let originalHeight = data.height; //图表初始宽高
+    let originalWidth = stepWidth*data.span; //图表、阴影初始宽高
-    let originalWidth = stepWidth*data.span;
+    let shadowNewWidth = originalWidth;
-    //console.info("mouseOrigX %s, mouseOrigY %s, chartOrigX %s, chartOrigY %s", mouseOriginalX, mouseOriginalY, originalHeight, originalWidth)
+    let originalHeight = data.height;
+    let shadowNewHeight = originalHeight;
+
     //1.激活背景阴影
     shadow.classList.add("resize-shadow-active");
     //2.鼠标移动时调整resize-box的宽高，同时监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
@@ -413,25 +417,69 @@ export const chartResizeTool = {
       let mouseX = e.clientX;
       let mouseY = e.clientY;
       //调整resize-box的宽高
-      box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
       box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
+      box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
       //监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
-      let remainderWidth = (box.offsetWidth+chartBlankWidth)%stepWidth; //宽的余数
+      let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数
-      let remainderHeight = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
+      let remainderHeight = (box.offsetHeight+chartBlankHeight-shadowNewHeight)%stepHeight; //高的余数
-
+      boxStepHandler(remainderWidth, remainderHeight);
     }
     function mouseupListener(e) {
-      let remainderWidth = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
+      //将resize-box的宽高设为resize-shadow的宽高
-      let remainderHeight = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
+      box.style.width = `${shadow.offsetWidth}px`;
-      data.height = box.offsetHeight+chartBlankHeight;
+      box.style.height = `${shadow.offsetHeight}px`;
-      data.span = (box.offsetWidth+chartBlankWidth)/(containerAvailableWidth/12);
+      data.height = box.offsetHeight;
+      data.span = (box.offsetWidth+chartBlankWidth)/stepWidth;
+      //请求后台，保存变更
+      if (data.height != originalData.height || data.span != originalData.span) {
+        originalData.height = data.height;
+        originalData.span = data.span;
+        vm.$put("panel/" + vm.panelIdInner + "/charts/modify", originalData);
+      }
       //关闭背景阴影
       shadow.classList.remove("resize-shadow-active");
+
       document.removeEventListener("mousemove", moveListener);
       document.removeEventListener("mouseup", mouseupListener);
     }
-    function boxStepHandler(type, op) {
+    function boxStepHandler(width, height) { //宽高变化量，大于0放大小于0缩小等于0不变; return: boolean 是否重绘
+      let widthChange = false;
+      let heightChange = false;
+      if (width > stepWidth/2) { //放大shadow宽
+        widthChange = true;
+        shadow.style.width = `${shadow.offsetWidth+stepWidth}px`;
+      } else if (width <= 0-(stepWidth/2)) { //缩小shadow宽
+        widthChange = true;
+        shadow.style.width = `${shadow.offsetWidth-stepWidth}px`;
+      }
+      if (widthChange) {
+        shadowNewWidth = shadow.offsetWidth;
+      }
+      if (height > stepHeight/2) { //放大shadow宽
+        heightChange = true;
+        shadow.style.height = `${shadow.offsetHeight+stepHeight}px`;
+      } else if (height <= 0-(stepHeight/2)) { //缩小shadow宽
+        heightChange = true;
+        shadow.style.height = `${shadow.offsetHeight-stepHeight}px`;
+      }
+      if (heightChange) {
+        shadowNewHeight = shadow.offsetHeight;
+      }
 
+      if (widthChange || heightChange) {
+        //chart重绘
+        if (box.classList.contains("resize-box-echarts")) { //echarts类型
+          vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight});
+        } else if (box.classList.contains("resize-box-table")) { //table类型
+          vm.$nextTick(() => {
+            vm.resize({height: shadow.offsetHeight});
+          });
+        }
+        //chart外层宽高调整
+        let outerBox = document.getElementById(`chart-${data.id}`);
+        outerBox.style.height = `${shadow.offsetHeight}px`;
+        outerBox.style.width = `${shadow.offsetWidth+chartBlankWidth}px`;
+      }
     }
   }
 }