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

angular-gridster gridster的ng-1版本;可以用来进行元素的拖动和排版显示 立即下载

###配置相关看下面的链接
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="
angular2gridster:众所周知的Gridster的Angular实现(没有jQuery,没有外部库,只有Angular和Rx.js) angular2gridster 众所周知的Gridster的Angular实现(没有jQuery,没有外部库,只有Angular和Rx.js)。 提供了更全面的文档。 可以在和跟踪开发进度。 版本: 版本9.x可与Angular 9.x一起使用。 版本8.x可与Angular 8.x一起使用。 版本7.x可与Angular 7.x一起使用。 6.x版可与Angular 6.x一起使用。 版本5.x可与Angular 5.x一起使用。 版本4.x可与Angular 4.x一起使用。 版本1.x和0.x仅适用于Angular 4.x ,但您可以在v4.x中找到最新状态。 安装 npm install angular2gridster 安装完成后,您需要导入我们的模块: ... import { GridsterModule } from 'angular2gridster' ; @ NgModule ( { declarations : [ AppComponent ] , imports : [ ... GridsterModu 立即下载

相关推荐

img-views:angular查看大图(轮播、放大、缩小、旋转、拖拽)

指令说明 点击图片查看大图 大图旋转、轮播、鼠标滚轮放大或缩小、拖拽 使用示例   组件参数说明 cameraList:'=', //图片列表(array, [{url: '图片地址', title: '图片名称',single:true}]) //single: true不显示切换按钮,false显示切换;默认false,非必须属性 needlessSize:'=', //选填(boolean, 默认false) true:自定义图片大小;false:沿用组件默认大小 width:'=', //选填(int,单位:px,eg:200,默认100) needlessSize为false时无效 height:'=', //选填(int,单位:px,eg:200,默认100) needl

angular-gridster2:Angular gridster 2

角网格2 Angular-gridsterAngular实现 需要Angular 11.x 对于其他Angular版本,请检查其他分支。 安装 npm install angular-gridster2 --save 应该与webpack开箱即用,分别是angular-cli。 import { GridsterModule } from 'angular-gridster2' ; @ NgModule ( { imports : [ GridsterModule ] , ... } ) 浏览器支持 Angular支持什么 如何使用 < gridster [options] ="

告别AT串口线!用STM32F407的USB FS口直连EC800M进行物联网通信

本文介绍了一种创新的物联网通信方案,利用STM32F407的USB FS接口直连EC800M模块,替代传统的AT串口线连接。通过详细的硬件对比、STM32CubeMX配置和USB驱动调试步骤,展示了如何实现更高效的AT指令通信,同时降低硬件复杂度和功耗。

weixin_29189987的博客 707

[CTFSHOW]JWT

文章目录前言JWT简介CTFSHOW Web345CTFSHOW Web346前置知识开始做题CTFSHOW Web347CTFSHOW Web348CTFSHOW Web349CTFSHOW Web350前置知识利用WP如何防御 前言 有些师傅向我咨询WP,索性就发了吧,其实早就写好了,只是懒,在github仓库里囤着 JWT简介 可以看看我的Github总结给自己看的,Y4tacker CTFSHOW Web345 首先打开题目,查看源码,接下来访问/admin被跳转回主页啥也没有发生 where is

Y4tacker的博客 6045

DRM驱动架构浅析-上(DRM基础概要与U-Boot阶段驱动解析)

本文主要探讨了Rockchip平台的DRM显示驱动架构及其在U-Boot阶段的实现。

一路寒风身如絮,命海沉浮客独行 1766

直流电源滤波电路的设计与优化:从基础原理到高效应用

本文深入探讨直流电源滤波电路的设计与优化,从基础原理到高效应用全面解析。重点介绍电容滤波和电感滤波的工作原理及实战设计要点,分享复合滤波电路的进阶技巧,并提供常见问题排查指南。文章还涵盖现代滤波技术的新发展,如有源滤波和数字控制滤波的应用,帮助工程师提升电源系统的稳定性和效率。

weixin_29255731的博客 175

【OpenClaw从入门到精通】第45篇:Skill供应链安全——如何识别并避开恶意技能插件?(2026实测版)

随着OpenClaw生态爆发式增长,全球Skills总量近75万个,日均新增2.1万个,但恶意/问题插件已超600个,数十万用户受影响。本文基于奇安信威胁报告及360安全实践,拆解恶意技能的五大核心特征,提出"安装前三步法"安全审查流程,详解安全技能来源白名单与定期审计方案,并深度解析360龙虾Skill安全超市的分级认证机制。读者可掌握从技能筛选、安装审查到术后审计的全流程安全防护手段,通过实操命令与案例演示,零成本构建Skill供应链安全防线,避免遭遇私钥窃取、资产损失等安全事件。

专注于人工智能、软件开发、工控自动化、工厂数字化及智能化等领域,希望和大家共同进步! 564

C#实现每日定时执行制定程序(附完整源码)

C#实现每日定时执行制定程序(附完整源码)

希望我的博客,能帮上你解决学习中工作中所遇到的问题 867

26届数字IC秋招笔试面试全攻略-UVM验证方法学精要

本文介绍了数字IC验证中UVM方法学的核心内容,包括组件架构、Sequence机制和寄存器模型。UVM提供env、agent、driver等组件构建验证环境;Sequence机制通过item、sequence和sequencer实现激励生成与控制;寄存器模型则通过reg_block、reg等组件管理DUT寄存器。文章详细说明了各模块的功能、交互关系和代码实现,为IC验证工程师提供了完整的UVM应用指南,重点突出了验证环境的搭建方法、激励生成流程和寄存器抽象技术。这些内容是数字IC秋招笔试面试中的高频考点。

2301_79143213的博客 725

CMM软件:PC-DMIS汽车制造二次开发

PC-DMIS 是一种广泛应用于坐标测量机(CMM)的测量软件,它不仅提供了强大的测量功能,还支持用户通过二次开发来扩展其功能。二次开发可以显著提升测量效率,满足特定的测量需求,减少重复性工作,提高数据处理和分析的准确性。本节将介绍 PC-DMIS 二次开发的基本概念、开发环境的搭建以及开发中常用的工具和方法。PC-DMIS 二次开发为用户提供了强大的工具,可以显著提升测量效率、减少重复性工作并提高数据处理和分析的准确性。

kkchenjj的博客 1816

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

上一篇: js 数据去重
下一篇: js正则属性详解 外加踩过的一个的坑(lastIndex)
wen_binObject
博客等级 码龄10年 51粉丝 63原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值