angular-gridster2使用

1、安装：npm install angular-gridster2 --save

2、引入

3、html代码

<div id="fullscreen" style="position:relative;padding-top:20px;background: #fff;" >
    <em class="fa fa-compress hand " style="position: absolute;right: 0px;top: 0px; font-size: 30px;" (click)="zoomItem()"   (touchstart)="zoomItem()"  title="缩小"></em>
    <em class="fa fa-arrow-circle-left hand z-index" style="position: absolute;left: 0px;top: 50%; font-size:30px; z-index:99999999;" (click)="upWard()"  (touchstart)="upWard()"  title="向上"></em>
    <em class="fa fa-arrow-circle-right hand z-index" style="position: absolute;right: 0px;top: 50%; font-size:30px; z-index:99999999;"  (click)="down()"  (touchstart)="down()"  title="向下"></em>
    <!-- <div [ngSwitch]="fullscreenIndex">
      <div   *ngSwitchCase="'demo1'" >
        <div echarts [options]="echartsOption1"  id="fullscreenEcharts" style="height: 600px;"></div>
      </div>
      <div   *ngSwitchCase="'demo2'" >
        <div echarts [options]="echartsOption2"  id="fullscreenEcharts" style="height: 600px;"></div>
      </div>
    </div> -->
  </div>
  
  <!--ignoreContentClass: 'gridster-item-content', // default content class to ignore the drag event from -->
  <gridster [options]="options" style="height:650px;"  id="gridster">
    <gridster-item [item]="item.view" *ngFor="let item of dashboard;let i =index;">
      <!-- your content here -->
      <div class="fs-md" style="padding-top:  5px;">
          <label class="item-label gridster-item-content">{{item.label}}</label>
          <div style="position:absolute;top: 0px;right:0px;display: flex;">
  
              <div class="float-right pr-10 hand gridster-item-content" style="cursor: pointer;padding-right: 10px;" (click)="zoomItem($event, item)"
                  (touchstart)="zoomItem($event, item)" mdTooltip="Remove" title="放大">
                  <em class="fa fa-expand" title="放大"></em>
                  <i nz-icon nzType="fullscreen" nzTheme="outline"></i>
              </div>   
  
              <div  class="float-right pr-10 hand gridster-item-content" style="cursor: pointer;padding-right: 10px;" (click)="removeItem($event, item)"
                      (touchstart)="removeItem($event, item)" mdTooltip="Remove">
                      <em class="anticon anticon-close" title="删除"></em>
                      <i nz-icon nzType="close" nzTheme="outline"></i>
              </div>
              
  
              <div  class="float-right pr-10 hand" style="cursor: pointer;padding-right: 10px;" >
                  <em class="fa fa-arrows" title="拖拽"></em>
                  <i nz-icon nzType="ungroup" nzTheme="outline"></i>
              </div>
          </div>
          
        <div [ngSwitch]="i+1"  class="gridster-item-content">
          <div   *ngSwitchCase="'1'">
              <div echarts [options]="echartsOption1" class="demo-chart" (chartInit)="onChartInit($event,i+1)" id="demo1" ></div>
          </div>
          <div   *ngSwitchCase="'2'" >
              <div echarts [options]="echartsOption2" class="demo-chart" (chartInit)="onChartInit($event,i+1)"  id="demo2"></div>
          </div>
          <div   *ngSwitchCase="'3'" >
            item content {{i+1}}
          </div>
          <div   *ngSwitchCase="'4'" >
            item content {{i+1}}
          </div>
          <div   *ngSwitchCase="'5'" >
            item content {{i+1}}
          </div>
          <div   *ngSwitchCase="'6'" >
            item content {{i+1}}
          </div>
          <div   *ngSwitchCase="'7'" >
            item content {{i+1}}
          </div>
          <div   *ngSwitchCase="'8'">
            item content {{i+1}}
          </div>
        </div>
       
      </div>
  
    </gridster-item>
  </gridster>

4、ts代码

import { Component, OnInit } from '@angular/core';
import {GridsterConfig,GridsterItem } from "angular-gridster2";
import {NgxEchartsModule} from "ngx-echarts";

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.less']
})
export class TableComponent implements OnInit {
  public options: GridsterConfig;
  public dashboard;
  private fullscreen:string="fullscreen";
  private fullscreenIndex:string="demo1";
  public echartsInstance1:any;
  public echartsInstance2:any;
  public echartsOption1: any;
  public echartsOption2: any;
  static itemChange(item, itemComponent) {
    console.info('itemChanged', item, itemComponent);
  }

  static itemResize(item, itemComponent) {
    console.info('itemResized', item, itemComponent);
  }   
   constructor(
        
   ) { }
   webSite: any[] = [ ];
   salesData: any[] =  [ ];
   offlineChartData: any[] = [];

   ngOnInit() {
       let self = this;
       this.echartsOption1 = {
           title: {
               text: '折线图堆叠'
           },
           tooltip: {
               trigger: 'axis'
           },

           grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           toolbox: {
               feature: {
                   saveAsImage: {}
               },
               right:'10%'
           },
           xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['周一','周二','周三','周四','周五','周六','周日']
           },
           yAxis: {
               type: 'value'
           },
           series: [
               {
                   name:'邮件营销',
                   type:'line',
                   stack: '总量',
                   data:[120, 132, 101, 134, 90, 230, 210]
               },
               {
                   name:'联盟广告',
                   type:'line',
                   stack: '总量',
                   data:[220, 182, 191, 234, 290, 330, 310]
               },
               {
                   name:'视频广告',
                   type:'line',
                   stack: '总量',
                   data:[150, 232, 201, 154, 190, 330, 410]
               },
               {
                   name:'直接访问',
                   type:'line',
                   stack: '总量',
                   data:[320, 332, 301, 334, 390, 330, 320]
               },
               {
                   name:'搜索引擎',
                   type:'line',
                   stack: '总量',
                   data:[820, 932, 901, 934, 1290, 1330, 1320]
               }
           ]
       };  
       this.echartsOption2 = {
           title: {
               text: '折线图堆叠'
           },
           tooltip: {
               trigger: 'axis'
           },

           grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           toolbox: {
               feature: {
                   saveAsImage: {}
               },
               right:'10%'
           },
           xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['周一','周二','周三','周四','周五','周六','周日']
           },
           yAxis: {
               type: 'value'
           },
           series: [
               {
                   name:'邮件营销',
                   type:'line',
                   stack: '总量',
                   data:[120, 132, 101, 134, 90, 230, 210]
               },
           ]
       };        
       /* this.http.get('/chart').subscribe((res: any) => {
           this.webSite = res.visitData.slice(0, 10);
           this.salesData = res.salesData;
           this.offlineChartData = res.offlineChartData;
       }); */
       this.options = {
           gridType: 'fit',
           compactType: 'none',/*对齐类型*/
           itemChangeCallback:function (item,itemComponent){
               //console.info('itemChanged', item, itemComponent);
               let echarts = document.getElementById(`${item.id}`);

               // const chart = new G2.Chart({
               //     container: document.getElementById(`${item.id}`),
               //     forceFit: true,
               //     height: itemComponent.height-30
               // });
               // chart.forceFit()

               if(echarts){/*在gridster2 Change的时候出发echarts的resize方法*/
                   echarts.style.width = itemComponent.width+'px';
                   echarts.style.height = itemComponent.height-30+'px';
                   
                   // /*根据不同的模块 重置相应的图*/
                   let a = {"demo1":self.echartsInstance1,"demo2":self.echartsInstance2}
                   a[item.id].resize();
               }
               console.log('itemChangeCallback', item, itemComponent);
           },
           itemResizeCallback:function (item, itemComponent){
               // const chart = new G2.Chart({
               //     container: document.getElementById(`${item.id}`),
               //     forceFit: true,
               //     height: itemComponent.height-30
               // });
               //chart.forceFit()
               let echarts = document.getElementById(`${item.id}`);
               if(echarts){/*在gridster2 resize的时候出发echarts的resize方法*/
                   echarts.style.width = itemComponent.width+'px';
                   echarts.style.height = itemComponent.height-30+'px';
               //     /*根据不同的模块 重置相应的图*/
                   let a = {"demo1":self.echartsInstance1,"demo2":self.echartsInstance2};
                   a[item.id].resize();
               }
                   //console.log('itemResize', item, itemComponent);
               console.log('itemResizeCallback', item, itemComponent);
           },
           margin: 10,
           outerMargin: true,
           minCols: 1,
           maxCols: 8,
           minRows: 1,
           maxRows: 10,
           maxItemCols: 5,
           minItemCols: 1,
           maxItemRows: 5,
           minItemRows: 1,
           defaultItemCols: 1,
           defaultItemRows: 1,
           fixedColWidth: 250,
           fixedRowHeight: 250,
           draggable: { /*是否可拖拽*/ 
               enabled: true,
               /*stop: AppComponent.eventStop*/
           },
           resizable: { /*是否可以缩放*/
               enabled: true,
               /*stop: AppComponent.eventStop*/
           },
           swap: false,
           displayGrid: 'onDrag&Resize' /*显示行和列的背景网格。选项：'永远' 缩放和拖拽时| 从不*/
       };
       this.dashboard =[
         {
           'label':'item1',
           'view': {cols: 2, rows: 1, y: 0, x: 0,id:"demo1",hasContent: true}
         },
         {'label':'item2',
           view:{cols: 2, rows: 2, y: 0, x: 2,id:"demo2"},
         },
         {'label':'item3',
           view:{cols: 1, rows: 1, y: 0, x: 4,id:"demo3"},
         },
         {'label':'item4',
           view:{cols: 1, rows: 1, y: 0, x: 5,id:"demo4"},
         },
         {'label':'item5',
           view:{cols: 1, rows: 1, y: 1, x: 0,id:"demo5"},
         },
         {'label':'item6',
           view:{cols: 1, rows: 1, y: 1, x: 1,id:"demo6"},
         },
         {'label':'item7',
           view:{cols: 2, rows: 2, y: 1, x: 5, label: 'Min rows & cols = 2',id:"demo7"},
           //view:{cols: 2, rows: 2, y: 1, x: 5, minItemRows: 2, minItemCols: 2, label: 'Min rows & cols = 2'},
         },
         {'label':'item8',
           //view:{cols: 2, rows: 2, y: 2, x: 0, maxItemRows: 2, maxItemCols: 2, label: 'Max rows & cols = 2'},
           view:{cols: 2, rows: 2, y: 2, x: 0, label: 'Max rows & cols = 2',id:"demo8"},
         },
         // {'label':'item9',
         //   view:{cols: 2, rows: 1, y: 2, x: 2, dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
         // },
         // {'label':'item10',
         //   view:{cols: 1, rows: 1, y: 2, x: 4, dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Disabled'},
         // },
         // {'label':'item11',
         //   view:{cols: 1, rows: 1, y: 0, x: 6},
         // },
       ];        
   }
   ngAfterViewInit(){
       let fullscreen = document.getElementById('fullscreen');
       fullscreen.style.display="none";
       fullscreen.style.width = (document.body.clientWidth-250)+'px';
       //fullscreen.style.height = (document.body.clientHeight-150)+'px';
       fullscreen.style.height = 650+'px';
   }  
   changedOptions() {
       if (this.options.api && this.options.api.optionsChanged) {
           this.options.api.optionsChanged();
       }
   }
   /*初始化*/
   onChartInit(e: any,i:number) {
       //console.log(i);
       if( i===1 ){
           this.echartsInstance1 = e;
       }else if( i===2 ){
           this.echartsInstance2 = e;
       }
       //console.log('on chart init:', e);
   }   
   removeItem(event?,item?) {
       this.dashboard.splice(this.dashboard.indexOf(item), 1);
   }
   
   // addItem() {
   //     this.dashboard.push({});
   // }
   zoomItem(event?,item?){
       if(item){
           /*ngSwitchCase 赋值 用来判断*/
           this.fullscreenIndex=item.view.id;
           let fullscreenEcharts = document.getElementById('fullscreenEcharts');
           /*根据屏幕宽度设置 放大后的echarts 宽高*/
           if(fullscreenEcharts){
           fullscreenEcharts.style.width = (document.body.clientWidth-275)+'px';
           fullscreenEcharts.style.height = (document.body.clientHeight-150)+'px';
           let a = {"demo1":this.echartsInstance1,"demo2":this.echartsInstance2};
           a[item.view.id].resize();
           }

       }
       let fullscreen = document.getElementById('fullscreen');
       let gridster = document.getElementById('gridster');
       if(this.fullscreen === "fullscreen"){
       fullscreen.style.display="block";
       gridster.style.display="none";
       this.fullscreen = "fullscreen_exit" ;
       }else{
       fullscreen.style.display="none";
       gridster.style.display="block";
       this.fullscreen = "fullscreen";
       }
   }
   /*向上*/
   upWard() {
       //this.fullscreenIndex;
       console.log(this.fullscreenIndex);
       let num= parseInt(this.fullscreenIndex.substr(this.fullscreenIndex.length-1,1));
       // console.log(typeof(num));
       if (num > 1){
               num =num - 1;
       }else{
           num = 8;
       }

       this.fullscreenIndex = 'demo' +num;
       //console.log(this.fullscreenIndex.substr(this.fullscreenIndex.length-1,1));
       console.log("upWard");
   }
   /*向下*/
   down() {
       console.log(this.fullscreenIndex);
       let num= parseInt(this.fullscreenIndex.substr(this.fullscreenIndex.length-1,1));
       // console.log(typeof(num));
       if (num < 8){
               num =num + 1;
       }else{
           num = 1;
       }
       this.fullscreenIndex = 'demo' +num;
       //console.log(this.fullscreenIndex.substr(this.fullscreenIndex.length-1,1));
       console.log("down");
   }
}

5、结果

6、参考

https://tiberiuzuld.github.io/angular-gridster2/api
https://blog.csdn.net/wen_binobject/article/details/80309197