基于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"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值