G2 icon indicating copy to clipboard operation
G2 copied to clipboard

feat(interval): support size channel and radius

Open pearmini opened this issue 2 years ago • 0 comments

Interval

  • 支持 size 通道和圆角。
  • 在非极坐标系下,使用 G.Rect 去渲染 Interval(为了支持圆角),之前是用 G.Path

image

G2.render({
  type: 'interval',
  data: commit,
  encode: {
    x: 'name',
    y: 'value',
    color: 'name',
    size: 80,
  },
  style: {
    radiusTopLeft: 10,
    radiusTopRight: 20,
    radiusBottomRight: 30,
    radiusBottomLeft: 40,
  },
});

image

G2.render({
  type: 'interval',
  width: 1000,
  paddingBottom: 100,
  data: {
    type: 'fetch',
    value: 'data/gdp.csv',
  },
  scale: {
    y: { formatter: '~s' },
    size: { range: [10, 60] },
  },
  encode: {
    x: 'country',
    y: 'value',
    color: 'country',
    size: 'gdp',
  },
});

pearmini avatar Sep 21 '22 08:09 pearmini