antvis/G2

The issue has been closed
[v5] 面积图支持 step 等 shape #4516
visiky posted onGitHub
需求背景
用户在设置 line 为 hvh shape 的时候,发现 area 填充不能跟随一样实现 hvh 形状
<img width="345" alt="image" src="https://user-images.githubusercontent.com/15646325/209425224-50cd7709-b17d-47fa-8da3-13422523eb80.png">
代码
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart.data([
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
])
chart
.line()
.encode('x', 'year')
.encode('y', 'value')
.encode('shape', 'hvh')
chart
.area()
.encode('x', 'year')
.encode('y', 'value')
.style('fillOpacity', 0.25)
// .encode('shape', 'hvh')
chart.render();