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
