angular-gridster2使用

半生雨 發表於 2021-1-4 14:13:00

<h3 id="1安装npm-install-angular-gridster2---save">1、安装：npm install angular-gridster2 --save</h3>
<h3 id="2引入">2、引入</h3>
<h3 id="3html代码">3、html代码</h3>
<pre><code><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>


<gridster ="options" style="height:650px;"id="gridster">
<gridster-item ="item.view" *ngFor="let item of dashboard;let i =index;">
   
   <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>

         <divclass="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>


         <divclass="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 ="i+1"class="gridster-item-content">
      <div *ngSwitchCase="'1'">
         <div echarts ="echartsOption1" class="demo-chart" (chartInit)="onChartInit($event,i+1)" id="demo1" ></div>
      </div>
      <div *ngSwitchCase="'2'" >
         <div echarts ="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>
</code></pre>
<h3 id="4ts代码">4、ts代码</h3>
<pre><code>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:
            },
            {
               name:'联盟广告',
               type:'line',
               stack: '总量',
               data:
            },
            {
               name:'视频广告',
               type:'line',
               stack: '总量',
               data:
            },
            {
               name:'直接访问',
               type:'line',
               stack: '总量',
               data:
            },
            {
               name:'搜索引擎',
               type:'line',
               stack: '总量',
               data:
            }
      ]
   };
   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:
            },
      ]
   };
   /* 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.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.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.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");
}
}
</code></pre>
<h3 id="5结果">5、结果</h3>
<p><img src="https://img2020.cnblogs.com/blog/1046141/202101/1046141-20210104141232304-1981157057.png"></p>
<h3 id="6参考">6、参考</h3>
<p>https://tiberiuzuld.github.io/angular-gridster2/api<br>
https://blog.csdn.net/wen_binobject/article/details/80309197</p><br><br>
来源：https://www.cnblogs.com/boreguo/p/14229492.html

頁: [1]

琼殿技术论坛's Archiver

angular-gridster2使用