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

AntV G2 是一款用于数据可视化的 JavaScript 图表库，可以实现分组柱状图和折线图的混合画法。下面是五组数据混合画法的实现步骤：

1. 创建一个 G2 图表实例。

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

const chart = new Chart({
  container: 'container',
  width: 600,
  height: 400,
  padding: [40, 60, 60, 80]
});

2. 使用 `chart.source()` 方法设置数据源，并使用 `chart.scale()` 方法设置各个数据维度的度量。

chart.source(data, {
  month: {
    range: [0, 1],
    tickCount: 6
  },
  value: {
    min: 0,
    alias: '销售额(万)',
    formatter: val => val.toFixed(0)
  },
  type: {
    formatter: val => val === 'a' ? '类别一' : '类别二'
  }
});

3. 使用 `chart.axis()` 方法设置坐标轴。

chart.axis('month', {
  label: {
    textStyle: {
      fill: '#aaa'
    }
  }
});

chart.axis('value', {
  label: {
    textStyle: {
      fill: '#aaa'
    }
  }
});

4. 使用 `chart.legend()` 方法设置图例。

chart.legend({
  position: 'top-center',
  marker: 'square',
  offsetY: -20,
  textStyle: {
    fill: '#aaa'
  }
});

5. 使用 `chart.interval()` 方法绘制柱状图，并使用 `chart.line()` 方法绘制折线图。

chart.interval().position('month*value').color('type', ['#1890FF', '#2FC25B']).adjust([{
  type: 'dodge',
  marginRatio: 1 / 32
}]);

chart.line().position('month*value').color('type', ['#1890FF', '#2FC25B']);

6. 调用 `chart.render()` 方法将图表渲染到页面上。

chart.render();

完整代码如下：

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

const data = [
  { month: '1月', type: 'a', value: 100 },
  { month: '2月', type: 'a', value: 300 },
  { month: '3月', type: 'a', value: 200 },
  { month: '4月', type: 'a', value: 400 },
  { month: '5月', type: 'a', value: 250 },
  { month: '6月', type: 'a', value: 500 },
  { month: '1月', type: 'b', value: 50 },
  { month: '2月', type: 'b', value: 150 },
  { month: '3月', type: 'b', value: 100 },
  { month: '4月', type: 'b', value: 200 },
  { month: '5月', type: 'b', value: 125 },
  { month: '6月', type: 'b', value: 250 }
];

const chart = new Chart({
  container: 'container',
  width: 600,
  height: 400,
  padding: [40, 60, 60, 80]
});

chart.source(data, {
  month: {
    range: [0, 1],
    tickCount: 6
  },
  value: {
    min: 0,
    alias: '销售额(万)',
    formatter: val => val.toFixed(0)
  },
  type: {
    formatter: val => val === 'a' ? '类别一' : '类别二'
  }
});

chart.axis('month', {
  label: {
    textStyle: {
      fill: '#aaa'
    }
  }
});

chart.axis('value', {
  label: {
    textStyle: {
      fill: '#aaa'
    }
  }
});

chart.legend({
  position: 'top-center',
  marker: 'square',
  offsetY: -20,
  textStyle: {
    fill: '#aaa'
  }
});

chart.interval().position('month*value').color('type', ['#1890FF', '#2FC25B']).adjust([{
  type: 'dodge',
  marginRatio: 1 / 32
}]);

chart.line().position('month*value').color('type', ['#1890FF', '#2FC25B']);

chart.render();