1.引入
import { chart，registerShape } from '@antv/g2';
2.向Shape工厂注册某个geom的一个shape
registerShape(geomName, shapeName,{
getPoints(cfg){},// 自定义具体标记点
draw(cfg, container){}// 自定义最终绘制
});
- geomName 几何标记名(图形的类别）, 如 point（点）, line（线） 等
- shapeName 自定义的图形的名称
- getPoints 自定义形状绘制时需要的节点，比如柱状图需要 4 个节点
- x, y 是柱子最高点的坐标，y0 是横坐标轴的 y 坐标，size 是柱子默认宽度
- draw 执行图形绘制逻辑、调用绘图引擎
三步操作
- 通过 getPoints() 方法返回自定义图形（矩行）的几个关键点（四个顶点）。此时 cfg 中会传入，x, y, y0, size。
- 我们在 draw() 方法中拿到 cfg.points 数据和数据映射后的图形属性数据（比如 cfg.color），然后再通过绘图库提供的多边形图形，将三个点依次头尾相连，生成每个自定义图形（三角形）。
- 通过 addShap 来绘制图形，addShape 的参数参考：绘图文档
示例
一： 自定义柱状图
registerShape("interval", "border-radius", {
// 定义关键点
getPoints(cfg) {
console.log(cfg);
const x = cfg.x;
const y = cfg.y;
const y0 = cfg.y0;
const width = cfg.size;
return [
{ x: x - width / 2, y: y0 }, // 左下
{ x: x - width / 2, y: y },// 左上
{ x: x + width / 2, y: y0 },// 右下
{ x: x + width / 2, y: y }// 右上
];
}, // 2.绘制
draw(cfg, container) {
console.log(cfg.points);
// 将0-1空间的坐标转换为画布坐标，经过该函数的转化，坐标点的顺序会被改变，
// 转换后的顺序是0:左上 1:左下 2:右下 3:右上
const points = this.parsePoints(cfg.points); // 生成图形shape组合的group对象
console.log(points);
const group = container.addGroup();
// 生成矩形
group.addShape("rect", {
attrs: {
x: points[1].x, // 矩形起始点为左下角
y: points[1].y, // 矩形起始点为左下角
width: points[2].x - points[1].x, // 矩形的宽度
height: points[0].y - points[1].y, // 矩形的高度
fill: "red"
}
});
// 生成矩形顶部的椭圆
group.addShape("ellipse", {
attrs: {
x: points[1].x + (points[2].x - points[1].x) / 2, // 椭圆的圆心在矩形的顶部中心，也就是该条数据的(x,y)
y: points[1].y, // 椭圆的圆心在矩形的顶部中心，也就是该条数据的(x,y)
rx: (points[2].x - points[1].x) / 2, // 椭圆的x轴半径--自定义
ry: (points[2].x - points[1].x) / 4, // 椭圆的y轴半径--自定义
fill: "yellow"
}
});
return group;
}
});
第二步，使用
const data = [
{ genre: 'Sports', sold: 20 },
{ genre: 'Strategy', sold: 30 },
{ genre: 'Action', sold: 40 },
{ genre: 'Shooter', sold: 50 },
{ genre: 'Other', sold: 60 }
] // 创建chart对象
this.chart = new Chart({
container: 'testVehicle',
width: 300,
height: 130,
padding: [10, 0, 20, 20]
})
// 载入数据源
this.chart.data(data)
// 图形配置
this.chart
.interval()
.position('genre*sold')
.shape('border-radius')
.color('genre * sold', BAR3D_CHART_COLOR_ARR)
this.chart.render()
