AntV G2 4.x版本 分组柱状图和折线图五组数据混合画法

AntV G2 4.x版本支持分组柱状图和折线图的混合画法，可以通过设置 `geom` 属性进行配置。以下是一个五组数据混合的示例代码：

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

const data = [
  { year: '2015', sales: 3500, profits: 1230, revenue: 5410, expenses: 4180, customers: 1000 },
  { year: '2016', sales: 4600, profits: 2340, revenue: 6320, expenses: 3980, customers: 1200 },
  { year: '2017', sales: 5500, profits: 3450, revenue: 7510, expenses: 4060, customers: 1500 },
  { year: '2018', sales: 6100, profits: 4200, revenue: 8140, expenses: 3940, customers: 1800 },
  { year: '2019', sales: 7200, profits: 5200, revenue: 9320, expenses: 4120, customers: 2200 },
];

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

chart.data(data);
chart.scale({ customers: { alias: '客户数' } });

chart.axis('year', { tickLine: null });
chart.axis('customers', { position: 'right', title: null });

chart.legend({
  position: 'top',
  flipPage: false,
});

chart.tooltip({
  showMarkers: false,
});

chart
  .interval()
  .position('year*sales')
  .color('#1f77b4')
  .adjust([
    {
      type: 'dodge',
      marginRatio: 0,
    },
  ]);

chart
  .line()
  .position('year*profits')
  .color('#ff7f0e')
  .adjust([
    {
      type: 'dodge',
      marginRatio: 0,
    },
  ]);

chart
  .interval()
  .position('year*revenue')
  .color('#2ca02c')
  .adjust([
    {
      type: 'dodge',
      marginRatio: 0,
    },
  ]);

chart
  .line()
  .position('year*expenses')
  .color('#d62728')
  .adjust([
    {
      type: 'dodge',
      marginRatio: 0,
    },
  ]);

chart
  .interval()
  .position('year*customers')
  .color('#9467bd')
  .adjust([
    {
      type: 'dodge',
      marginRatio: 0,
    },
  ]);

chart.render();

在上述代码中，我们通过 `chart.interval()` 方法定义了四个柱状图，并通过 `chart.line()` 方法定义了一个折线图。每个图形都设置了对应的位置、颜色和调整方式。最后通过 `chart.render()` 方法绘制图表。