useEffect(() => {
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart
.axis('y', { title: false })
.legend('color', {
/** 让图例在图表的下方的水平保持居中 */
position: 'bottom',
layout: {
justifyContent: 'center',
},
})
.axis('x', { labelAutoRotate: false });
chart
.data(datalist)
.encode('x', (d) => dayjs(d.month).format('YYYY-MM'))
.encode('y', 'value')
.encode('color', 'name')
.scale('x', {
range: [0, 0.98],
})
.scale('y', {
nice: true,
});
chart.line().encode('shape', 'smooth');
chart
.area()
.encode('shape', 'smooth')
.scale('color', { range: ['rgba(253,121,64,1)', 'rgba(2,84,255,1)'] });//改变背景颜色
chart.render();
}, [ ]);