基于ngx-echarts和angular-gridster2 做的基于dashboard例子

配置相关看下面的链接

https://xieziyu.github.io/ngx-echarts/api-doc/index.html api关于ngx-echarts
https://xieziyu.github.io/ngx-echarts/#/demo/map/hongkong-pd demo关于ngx-echarts
https://github.com/tiberiuzuld/angular-gridster2 api关于angular-gridster2
https://tiberiuzuld.github.io/angular-gridster2/angular/ demo关于angular-gridster2

模板代码

<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;">

            <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>
            </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>
            </div>


            <div  class="float-right pr-10 hand" style="cursor: pointer;padding-right: 10px;" >
                <em class="fa fa-arrows" title="拖拽"></em>
            </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>

ts代码

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

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
})
export class ListComponent implements OnInit {
   public options: GridsterConfig;
   public dashboard: Array<GridsterItem>;
   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(
        private http: _HttpClient
    ) { }
    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");
    }


}

效果图

可以实现删除/拖拽/放大/缩小/上下切换图片等功能 作为dashboard图而言 感觉还不错 不过写的只是简单的demo 有些功能和样式没写的很完善 仅仅日常使用肯定没问题