移动组件到指定坐标_手把手教你使用业界首创的象限图组件
象限图经常用于规划事件的优先级,用于分析处理数据与期望的偏离程度等。目前各大主流的Angular组件库中均未发现类似象限图的组件,而DevUI组件库则基于DevCloud业务的诉求,设计并开发出一款灵活配置,功能齐全的象限图组件。
功能介绍
数据随心掌控:
1.组件通过与拖拽的联动,坐标跟随线的定位,可以轻松实现标签的移动,便于使用者进行数据的变更,掌控事项的发展;
2.组件提供了详情展示功能,悬停到对应标签即可获取标签的坐标信息以及标签详情信息。当然,悬停展示的详情数据可由用户自行定制,充分切合各类展示场景;
3.组件本身不侵入修改标签的数据,通过返回用户所需信息,由用户自己决定应该显示的内容及位置,实现用户对于数据的可掌控性。
三种模式,任意切换:
组件内置了功能区域,提供标签的放大,缩小及象限图全屏的功能。
最小化:能够直观的查看标签的分布情况,便于做事项的管理与协调;
中间态:方便的查看具体标签的所在位置,以实现快速拖拽移动等功能;
最大化:标签下方增加进度条展示,清晰直观的了解每一个标签项的进展情况。
此外,三个模式的样式模板均暴露给使用者,您可以自由定制您想要展示的样式。
除了三种模式之外,组件还提供了全屏功能,象限图区域将铺满整个屏幕,非常适合用于会议演示以及工作汇报等场景。
样式专属定制:
组件本身默认提供了“少女系马卡龙”配色,清爽活泼,默认使用“事务优先级排列”场景,用户无需设置多余内容即可开箱使用。当然,对于组件本身提供的默认配置不够满意的话,组件还提供了自由度很高的样式自定义方式,可以完全修改象限区域颜色及标题,坐标系信息,标签的展示样式等,配置简单,自由灵活。下图为定制的象限图展示:
配置介绍
基本用法
由于象限图本身有默认的基础配置,如果您想开箱即用,不需定制化处理,则只需传入labelData数据,并通过dropEvent事件动态处理labelData,使象限图上的内容展示实时变更。
[labelData]="labelData"
(dropEvent)="dropEvent($event)"
>
复制代码下面我们详细介绍一下labelData中每个数据的配置项:
export interface ILabelDataConfigs {
x: number; // X轴坐标值
y: number; // Y轴坐标值
title: string; // 标签的名称
content?: string; // 鼠标悬浮在标签上时的提示内容
progress?: number; // 标签对应事项的进度
[propName: string]: any; // 其他数据
}
其中,值得注意的是,标签的坐标值是根据其中心点的位置进行设置,title为标签的标题,当title过长时,将以超出部分显示省略号的方式在标签容器中显示;content 为悬停时下方的详情信息,将在下个版本支持传入template;progress则是标签下方的进度显示,传入数字为0-100,表示当前事项的进展;此外,用户还可传入其他参数,方便自定义处理。此外,还提供了smallLabelTemplate,normalLabelTemplate,largeLabelTemplate参数,使用户可以定制三种模式的不同标签样式。
象限图配置:
想要配置一个自定义的象限图?只需要简单的两步:
1.通过view属性设置象限图所占区域,view值可动态变化,象限图也会做出相应的改变。值得注意的是,目前只支持传入number,单位为px,当您需要根据容器自适应时,需要实时计算一下容器的实际宽高,并传入view中。具体配置项如下:
export interface IViewConfigs {
height: number; // 象限图高度
width: number; // 象限图宽度
}
2.通过quadrantConfigs 参数设置四个象限的标题,颜色等,该参数传入长度为4的数组,Array[0],Array[1],Array[2],Array[3]分别代表第一,二,三,四象限。此外,如果您只想使用坐标功能,还可通过showQuadrants 参数关闭象限的显示。每个象限可配置的内容如下:
export interface IQuadrantConfigs {
backgroundColor?: any; // 背景色
color?: any; // 字体颜色
title?: string; // 象限标题
top?: number; // 标题与象限区域顶部的距离
left?: number; // 标题与象限区域左侧的距离
}
坐标系设置:
组件中的坐标系设置是根据数学上坐标系的设置与使用做了相应的匹配,更加贴合用户的使用习惯。例如,设置坐标系的原点,坐标轴的最大最小值,坐标轴的标题等;更多设置可参考下方的配置:
export interface IAxisConfigs {
tickWidth?: number; // 刻度的宽(高)度,默认为10
spaceBetweenLabelsAxis?: number; // 刻度值和坐标轴之间的距离,默认为20
xAxisLabel?: string; // X轴名称,默认值为'紧急度'
yAxisLabel?: string; // Y轴名称,默认值为'重要度'
axisMargin?: number; // 右侧留出的空白区域
xWeight?: number; // X轴权重,默认值为1
yWeight?: number; // Y轴权重,默认值为1
xAxisRange?: IRangeConfigs; // X轴的坐标值范围和间距设置,默认值为{min:0,max:100,step:10}
yAxisRange?: IRangeConfigs; // Y轴的坐标值范围和间距设置,默认值为{min:0,max:100,step:10}
originPosition?: { left: number; bottom: number; }; // 原点的位置设置,默认值为{left:30,bottom:30}
}
其中,坐标值范围与间距的配置为:
export interface IRangeConfigs {
min: number; // 坐标轴起始值
max: number; // 坐标轴终止值
step: number; // 坐标轴刻度值的间隔
}
拖拽配置:
象限图组件支持与拖拽组件的联动,通过设置dropScope属性,可匹配标签的可拖拽位置;只要象限图与其他可拖拽区域的dropscope值一致,即可实现两个区域的联动,一般常用于将象限图上的标签“删除”。
[dropScope]="'devui-quadrant-diagram'"
(dropEvent)="onDrop($event, list)"
>
...
[labelData]="labelData"
[quadrantConfigs]="quadrantConfigs"
[axisConfigs]="axisConfigs"
[view]="view"
[dropScope]="'devui-quadrant-diagram'"
(dropEvent)="dropEvent($event)"
>
上述代码中,一个可放置拖拽元素的div与d-quadrant-diagram 的dropScope 一致,那么两个区域即可实现标签的交互。
总结
象限图组件的衍生是DevUI组件库对业界主流组件库的缺失内容的补充,大家如果发现有类似的产品或组件也可以进行分享和交流。目前该组件还属于演进状态,大家使用上有疑问或者有优化建议,可以加入官方交流群( DevUI小助手微信号:devui_official)进行探讨~↓点击
移动组件到指定坐标_手把手教你使用业界首创的象限图组件相关推荐
- 移动组件到指定坐标_《我的世界》传送石碑组件 史蒂夫表示跑路的日子终于结束了...
你是否还在靠自己的双腿奔跑?你是否还在为猪猪无法自动拐弯而困扰?你是否因为迷路而无法回家?而这一切都可以通过JoeCreates所制作的传送石碑组件解决.在设立传送石碑之后就可以体验到瞬间传送的快捷与 ...
- 不能bostype没有元数据异常_手把手教你用Python画个箱形图,找出“脏数据”
导读:数据质量分析是数据挖掘中数据准备过程的重要一环,是数据预处理的前提,也是数据挖掘分析结论有效性和准确性的基础.没有可信的数据,数据挖掘构建的模型将是空中楼阁. 数据质量分析的主要任务是检查原始数 ...
- echarts 折线图 设置y轴最小刻度_手把手教你玩转echarts(二)折线图
茫茫人海中与你相遇 相信未来的你不会很差 作者:婷酱Yaaa 来源:https://juejin.im/post/5f0292d35188252e5a5dbed0 前言 哈喽,everybody,我又 ...
- java判断点在第几象限_手把手教你如何使用象限图组件
1.通过view属性设置象限图所占区域,view值可动态变化,象限图也会做出相应的改变.值得注意的是,目前只支持传入number,单位为px,当您需要根据容器自适应时,需要实时计算一下容器的实际宽高, ...
- 软件_手把手教vscode配置c++,python开发环境
原创:软件_手把手教vscode配置c++,python开发环境 之前主用Python作为项目开发语言,将项目迁移到arm边缘盒子上后发现arm的cpu不给力,软件速度低于预期,所以计划将部分程序改为 ...
- python画折线图-手把手教你Python yLab的绘制折线图的画法
Python的可视化工具有很多,数不胜数,各有优劣.本文就对其中的pylab进行介绍.之所以介绍这一款,是因为它和Matlab的强烈相似度,如果你使用过Matlab,那么相信pylab你也会很快上手. ...
- pls-00302: 必须声明 组件_手把手教你开发vue组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
- vue实现竖式步骤条_手把手教你实现一个 Vue 进度条组件!
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- 怎么用python自制计算公式_手把手教你用python制作简易计算器,能够记录你使用的情况...
话不多说,首先先看效果图,它能够记录你在使用过程中的历史,方便你查看是否有错: 接下来就仔细分析一下是如何制作的: 简易计算器 第一步:导入资源库 在过程中使用到了tkinter这个资源库,win+R ...
最新文章
- Nature Protocols:整合宏基因组、代谢组和表型分析的的计算框架
- python应用实战系列-一文教你深入解读word2vec
- 黑科技教你一招如何解除 生活中烦人的验证码问题
- python教程:列表推导式对比For循环执行效率
- java8 hashmap 死循环_踩坑了,JDK8中HashMap依然会死循环!
- onuninitialized和ajax,12.3 Prototype对Ajax的支持
- javascript经典实例_JavaScript 经典实例收集整理
- 数据库查询语句(高端)
- VS2015+OpenGL配置方法
- 开源的工业软件-面向生产控制环节
- 快速下载网页全部图片的方法
- Kindle Paperwhite3入手20天感受
- Axial Attention 和 Criss-Cross Attention及其代码实现
- 免费学术资源(转自施一公博客)
- sqli-labs(18-22)
- 终止正在运行的ORACLE作业
- VMware中设置处理器数量的问题
- Roberts边缘检测算子
- jQuery炫酷3d背景视觉差特效
- ROS下dobot(magician)机械臂的python demo