本次案例为仪表板，最终成品样式如下，案例种用到仪表盘分大部分属性，每个属性都注释说明作用。成品效果如下
使用方法如下
import { Gauge, G2 } from "@ant-design/plots";
const { registerShape, Util } = G2;
// 自定义指针 Shape 部分 在下面 indicator.shape 中使用，如不需要可删除下面的 indicator.shape 和 registerShape 函数。
registerShape("point", "custom-gauge-indicator", {
draw(cfg, container) {
// 使用 customInfo 传递参数
const { indicator, defaultColor } = cfg.customInfo;
const { pointer, pin } = indicator;
const group = container.addGroup();
// 获取极坐标系下画布中心点
const center = this.parsePoint({ x: 0, y: 0 });
console.log(center);
// 设置 pin 指针的圆盘的样式
if (pin) {
// 直接使用配置里面的pin样式
group.addShape("circle", {
name: "pin-outer",
attrs: {
x: center.x,
y: center.y,
...pin.style,
},
});
}
// 绘制指针
if (pointer) {
const { startAngle, endAngle } = Util.getAngle(cfg, this.coordinate);
const radius = this.coordinate.getRadius();
const midAngle = (startAngle + endAngle) / 2;
const { x: x1, y: y1 } = Util.polarToCartesian(
center.x,
center.y,
radius / 15,
midAngle + 1 / Math.PI
);
const { x: x2, y: y2 } = Util.polarToCartesian(
center.x,
center.y,
radius / 15,
midAngle - 1 / Math.PI
);
const { x, y } = Util.polarToCartesian(
center.x,
center.y,
radius * 0.5,
midAngle
);
const { x: x0, y: y0 } = Util.polarToCartesian(
center.x,
center.y,
radius * 0.1,
midAngle + Math.PI
);
const sa = Math.PI / 3 + midAngle;
const r1 = 3.5;
const p1 = {
x: center.x + Math.cos(sa) * r1,
y: center.y + Math.sin(sa) * r1,
};
const p2 = {
x: center.x - Math.cos(sa) * r1,
y: center.y - Math.sin(sa) * r1,
};
const r2 = r1 / 4;
const p11 = {
x: x + Math.cos(sa) * r2,
y: y + Math.sin(sa) * r2,
};
const p21 = {
x: x - Math.cos(sa) * r2,
y: y - Math.sin(sa) * r2,
};
const path = [
["M", p21.x, p21.y],
// 参数信息: cx, cy, .., .., .., endPointX, endPointY
["A", r2, r2, 0, 0, 1, p11.x, p11.y],
["L", p1.x, p1.y],
["A", r1, r1, 0, 0, 1, p2.x, p2.y],
["Z"],
];
// pointer
group.addShape("path", {
name: "pointer",
attrs: {
path,
fill: "#9155FD",
...pointer.style,
},
});
}
return group;
},
});
// 配置部分
const config = {
// 设置图表的宽度和高度，如果不设置默认与容器大小一致画布，等同于设置了autoFit:true 效果
with: 90,
hight: 90,
// 设置图表在画布的位置 可设置单个数字，也可以设置 [数字,数字,数字,数字] 控制4个方向。不加这个属性默认等于 auto
// padding: "auto",
// 当前仪表盘指针位置 值范围为 0 - 1
percent: 0.33,
// 仪表盘圆弧外环的半径 值得范围为 0 - 1
radius: 0.9,
// innerRadius 仪表盘圆弧内环的半径 值范围为 0 -1。
// 外环和内环选一个配置即可，剩下可以配置圆弧宽度。
// innerRadius: 0.8,
// 调整仪表盘的开始位置 此处配置为半圆
startAngle: Math.PI,
//调整仪表盘的结束位置
endAngle: 2 * Math.PI,
// 图标渲染方式 canvas / svg 不设置默认为canvas 注意点：设置为svg后会影响到下面 gaugeStyle.lineCap 倒角的方向
// renderer: "svg",
// range 仪表盘的圆弧样式控制
range: {
// 控制仪表盘分色，此处分为3种颜色，各占3分之一
ticks: [1 / 3, 3 / 4, 1],
// 每个分区对应颜色
color: ["#9155FD", "#C3ACF9", "#f4f5fa"],
// 仪表板圆弧宽度默认单位为px
width: 9,
},
// axis 仪表盘的刻度轴的配置
axis: {
// tickLine 为null 表示不显示刻度线
tickLine: null,
// label 为null 表示不显示刻度文字
label: null,
},
//indicator 指针样式配置 null为不展示指针
indicator: {
// 自定义指针
shape: "custom-gauge-indicator",
// 配置指针样式，不包括圆盘
pointer: {
style: {
stroke: "#9155FD",
lineCap: "round",
lineWidth: 4,
},
},
// 配置指针连接的圆盘样式
pin: {
style: {
// 指针边框颜色
stroke: "#9155FD",
// 指针圆盘半径
r: 4.5,
// 指针圆盘中间填充颜色
fill: "#9155FD",
},
},
},
// 仪表盘的样式
gaugeStyle: {
// 圆弧内每段占比结束都进行倒角，包含仪表盘起始位置和结束位置都进行倒角
lineCap: "round",
// 圆弧外描边虚线
lineDash: [2, 3],
// 圆弧外描边虚线宽度
lineWidth: 0.6,
// 圆弧外描边颜色
stroke: "#c0aaf6",
},
};
// 最终使用
更多详细属性描述，请前往 仪表盘 | G2Plot (antv.vision)
文章来源
您阅读本篇文章共花了：
发表评论