WaferMap chart.
WaferMap 图表组件,支持 define map 、 wafer 和 heat map 三种模式
pnpm add @xchart/wafer-map
# or
yarn add @xchart/wafer-map
// 1. prepare dataset
const points = [
{
id: '1',
x: 1,
y: 1,
bin: 1,
},
];
// 2. new wafermap
const map = new NormalMap({
container: container.value!,
data: points,
type: isHeatMap.value ? IWaferMapType.HEATMAP : IWaferMapType.NORMAL,
config: {
style: {
fill: fillColor,
strokeWidth: stroke_width,
stroke: stroke_color,
dieSize: {
width: default_dieSize.w,
height: default_dieSize.h,
},
},
showColorMap: isHeatMap.value && !props.binCode,
},
});
// 3. rerender it when needed
map.rerender({
data: newPoints,
});
import { DefinitionMap } from '@xchart/wafer-map'
DefinitionMap({ container, type , config = {} }: IWaferMap)
属性 |
描述 |
类型 |
是否必填 |
默认值 |
container |
图表容器 |
HTMLElement |
✅ |
- |
type |
图表宽度 |
IWaferMapType |
✅ |
IWaferMapType.Normal |
config |
图表配置 |
IWaferConfig |
- |
- |
值 |
描述 |
NORMAL |
wafer |
HEATMAP |
热力图 wafer |
DIFINITION |
定义图 wafer |
属性 |
描述 |
默认值 |
是否可选 |
width |
图表宽度 |
100% |
✔️ |
height |
图表高度 |
100% |
✔️ |
rotate |
旋转角度 |
0 |
✔️ |
coordinate |
coordinate 位置 |
"top-left" |
✔️ |
flip |
水平、垂直是否镜像反转 |
[false,false] |
✔️ |
dieRows |
die rows |
100 |
✔️ |
dieCols |
die columns |
100 |
✔️ |
dieOriginX |
die origin x |
0 |
✔️ |
dieOriginY |
die origin y |
0 |
✔️ |
reticle |
die reticle |
false |
✔️ |
reticleX |
die reticle x |
2 |
✔️ |
reticleY |
die reticle y |
2 |
✔️ |
reticleOriginX |
die reticle origin x |
0 |
✔️ |
reticleOriginY |
die reticle origin y |
0 |
✔️ |
notch |
notch |
"down" |
✔️ |
style.circleFill |
circle fill |
|
✔️ |
style.fill |
die fill |
|
✔️ |
style.stroke |
die stroke |
|
✔️ |
style.strokeWidth |
die stroke width |
|
✔️ |
style.dieSize.width |
die size width |
|
✔️ |
style.dieSize.height |
die size height |
|
✔️ |
import { NormalMap } from '@xchart/wafer-map'
NormalMap({ container, type , config = {} }: IWaferMap)
属性 |
描述 |
类型 |
是否必填 |
默认值 |
container |
图表容器 |
HTMLElement |
✅ |
- |
data |
图表宽度 |
IDieWithBin | IDieWithHeat
|
✅ |
- |
type |
图表宽度 |
IWaferMapType |
✅ |
IWaferMapType.Normal |
config |
图表配置 |
IWaferConfig |
- |
- |
值 |
描述 |
NORMAL |
wafer |
HEATMAP |
热力图 wafer |
DIFINITION |
定义图 wafer |
interface IDieWithBin {
x: number;
y: number;
hard_bin: number | string;
soft_bin: number | string;
}
interface IDieWithHeat {
x: number;
y: number;
average: number;
max: number;
median: number;
min: number;
}
interface IWaferConfigNormal extends IWaferConfig {
/**
* 是否显示Notch
*/
showNotch?: boolean;
/**
* 是否要显示热力图
*/
showColorMap?: boolean;
/**
* 热力图的key
*/
heatMapKey?: keyof HeatMapKeyTypes;
}
interface HeatMapKeyTypes {
average: number;
max: number;
median: number;
min: number;
}
属性 |
描述 |
默认值 |
是否可选 |
width |
图表宽度 |
100% |
✔️ |
height |
图表高度 |
100% |
✔️ |
rotate |
旋转角度 |
0 |
✔️ |
coordinate |
coordinate 位置 |
"top-left" |
✔️ |
flip |
水平、垂直是否镜像反转 |
[false,false] |
✔️ |
dieRows |
die rows |
100 |
✔️ |
dieCols |
die columns |
100 |
✔️ |
dieOriginX |
die origin x |
0 |
✔️ |
dieOriginY |
die origin y |
0 |
✔️ |
reticle |
die reticle |
false |
✔️ |
reticleX |
die reticle x |
2 |
✔️ |
reticleY |
die reticle y |
2 |
✔️ |
reticleOriginX |
die reticle origin x |
0 |
✔️ |
reticleOriginY |
die reticle origin y |
0 |
✔️ |
notch |
notch |
"down" |
✔️ |
style.circleFill |
circle fill |
|
✔️ |
style.fill |
die fill |
|
✔️ |
style.stroke |
die stroke |
|
✔️ |
style.strokeWidth |
die stroke width |
|
✔️ |
style.dieSize.width |
die size width |
|
✔️ |
style.dieSize.height |
die size height |
|
✔️ |
方法名 |
描述 |
参数说明 |
rotate(angle) |
以给定角度旋转元素。 |
angle 旋转角度 number |
flip(direction) |
水平或垂直翻转元素。 h: 水平 v: 垂直 |
direction string |
translate(x, y) |
沿着 x 和 y 轴平移元素一定距离。 |
x: number, y: number |
reset() |
将所有变换重置为默认值。 |
- |
方法名 |
描述 |
参数说明 |
brushed |
开启选区数据 |
- |
clearBrush |
清空选区数据 |
- |