AntV G2 分组柱状图和折线图混合画法

AntV G2 提供了分组柱状图和折线图混合的画法，可以通过以下步骤实现：

1. 安装 G2：在项目中安装 G2 的依赖包。

2. 创建容器：在 HTML 文件中创建一个容器，例如：

   <div id="container"></div>

3. 初始化 G2 图表：使用 G2 的 API 创建一个图表实例，并将其挂载到容器上，例如：

   const chart = new G2.Chart({
     container: 'container',
     width: 600,
     height: 400
   });

4. 加载数据：使用 data 方法加载数据，例如：

   chart.data(data);

5. 设置坐标轴和图例：使用 axis 和 legend 方法设置坐标轴和图例，例如：

   chart.axis('x', {
     title: {
       text: '日期'
     }
   });
   chart.axis('y', {
     title: {
       text: '数量'
     }
   });
   chart.legend('category', {
     position: 'top'
   });

6. 绘制柱状图和折线图：使用 interval 和 line 方法分别绘制柱状图和折线图，并使用 position 方法设置数据的映射关系，例如：

   chart.interval().position('x*y').color('category');
   chart.line().position('x*y2').color('category');

这里假设数据中有一个字段 category，用于区分不同的数据系列；x 和 y 分别表示柱状图和折线图的横纵坐标，y2 表示折线图的另一个纵坐标。

7. 渲染图表：使用 render 方法渲染图表，例如：

   chart.render();

完整的代码示例：

<div id="container"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/antv/3.5.14/g2.min.js"></script>
<script>
  const data = [
    { date: '2021-01-01', value1: 100, value2: 200, category: 'A' },
    { date: '2021-01-02', value1: 120, value2: 210, category: 'A' },
    { date: '2021-01-03', value1: 140, value2: 220, category: 'A' },
    { date: '2021-01-01', value1: 80, value2: 190, category: 'B' },
    { date: '2021-01-02', value1: 90, value2: 200, category: 'B' },
    { date: '2021-01-03', value1: 110, value2: 210, category: 'B' },
  ];

  const chart = new G2.Chart({
    container: 'container',
    width: 600,
    height: 400
  });

  chart.data(data);

  chart.axis('x', {
    title: {
      text: '日期'
    }
  });
  chart.axis('y', {
    title: {
      text: '数量'
    }
  });
  chart.legend('category', {
    position: 'top'
  });

  chart.interval().position('date*value1').color('category');
  chart.line().position('date*value2').color('category');

  chart.render();
</script>