G2图表组件库，图例在图表的水平居中和改变背景颜色

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();

}, [ ]);