AntV G2Plot 基础条形图圆角设置教程

在 AntV G2Plot 中，可以通过设置 'interval' 几何元素的 'style' 属性来设置基础条形图的圆角。

具体操作如下：

1. 在 'interval' 几何元素的 'style' 属性中，设置 'radius' 属性，表示圆角的半径大小。例如，设置为 '10' 表示圆角半径为 '10' 个像素。

2. 可以进一步设置圆角的位置，通过 'radius' 属性的四个值分别表示左上角、右上角、右下角、左下角的圆角半径大小。例如，设置为 '[10, 0, 0, 10]' 表示左上角和左下角的圆角半径为 '10'，右上角和右下角的圆角半径为 '0'。

下面是一个示例代码：

import { Chart } from '@antv/g2';

const data = [
  { year: '2010', value: 10 },
  { year: '2011', value: 15 },
  { year: '2012', value: 20 },
  { year: '2013', value: 25 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);
chart.scale({
  value: {
    nice: true,
  },
});
chart.axis('year', {
  tickLine: null,
});
chart.axis('value', {
  label: null,
  title: null,
  line: null,
});
chart.tooltip({
  showMarkers: false,
});
chart
  .interval()
  .position('year*value')
  .style({
    radius: 10, // 设置圆角半径为 10
  });

chart.render();

运行上面的代码，可以看到基础条形图的圆角被设置为了 '10'。如果想要进一步设置圆角的位置，可以将 'radius' 属性设置为一个数组，例如 '[10, 0, 0, 10]'。