java判断点在第几象限_手把手教你如何使用象限图组件

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值一致，即可实现两个区域的联动，一般常用于将象限图上的标签“删除”。(想要了解更多拖拽组件的信息，可查看：devui.design/components/…)