AntV G2Plot 2.4.7版本分组柱状图和折线图混合画法,并且还能够加上slider

AntV G2Plot 2.4.7 版本中，GroupedColumnLine 组件已经改名为 GroupedColumn 和 GroupedLine 组件。要绘制分组柱状图和折线图混合的图表，并且加上 slider，可以使用 GroupedColumn 和 GroupedLine 组件。

首先，需要定义数据源，并指定数据字段的类型（例如 x 轴、y 轴等）。接着，可以使用 GroupedColumn 和 GroupedLine 组件来绘制混合的图表。在 GroupedColumn 和 GroupedLine 中，可以分别指定柱状图和折线图的样式、颜色等属性，如下所示：

import { GroupedColumn, GroupedLine } from '@antv/g2plot';

const data = [
  { year: '2010', sales: 450, profit: 200 },
  { year: '2011', sales: 560, profit: 230 },
  { year: '2012', sales: 620, profit: 250 },
  { year: '2013', sales: 750, profit: 300 },
  { year: '2014', sales: 800, profit: 350 },
];

const plot = new GroupedColumn('container', {
  data,
  xField: 'year',
  yField: ['sales'],
  groupField: 'type',
  columnWidthRatio: 0.4,
});

plot.render();

const plotLine = new GroupedLine('container', {
  data,
  xField: 'year',
  yField: 'profit',
  groupField: 'type',
  lineSize: 2,
  color: '#fdae6b',
});

plotLine.render();

在上面的代码中，我们分别创建了 GroupedColumn 和 GroupedLine 实例，分别用于绘制柱状图和折线图。需要注意的是，GroupedColumn 和 GroupedLine 组件需要在同一个容器中，否则会覆盖前面的图表。

同时，通过调整 slider 的配置，可以改变滑动条的样式和位置，如下所示：

import { GroupedColumn, GroupedLine, Slider } from '@antv/g2plot';

const data = [
  { year: '2010', sales: 450, profit: 200 },
  { year: '2011', sales: 560, profit: 230 },
  { year: '2012', sales: 620, profit: 250 },
  { year: '2013', sales: 750, profit: 300 },
  { year: '2014', sales: 800, profit: 350 },
];

const plot = new GroupedColumn('container', {
  data,
  xField: 'year',
  yField: ['sales'],
  groupField: 'type',
  columnWidthRatio: 0.4,
});

plot.render();

const plotLine = new GroupedLine('container', {
  data,
  xField: 'year',
  yField: 'profit',
  groupField: 'type',
  lineSize: 2,
  color: '#fdae6b',
});

plotLine.render();

const slider = new Slider('container', {
  width: 'auto',
  height: 26,
  start: 0.2,
  end: 0.8,
  xAxis: {
    type: 'time',
    mask: 'YYYY',
    range: [0, 1],
    tickCount: 6,
  },
});

slider.render();

在上面的代码中，我们创建了一个 Slider 实例，并指定容器、滑动条的宽度、高度和初始位置。接着，通过 xAxis 属性设置 x 轴的类型、格式、范围和刻度数。最后，调用 render 方法绘制滑动条。

需要注意的是，Slider 组件需要在 GroupedColumn 和 GroupedLine 组件后面，否则会被覆盖。同时，Slider 组件只支持时间类型的 x 轴，如果要使用其他类型的 x 轴，需要自己实现。