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

AntV G2Plot 是一款基于 G2 的专业可视化图表库，支持绘制多种类型的图表，包括柱状图、折线图等。要绘制分组柱状图和折线图混合的图表，并且加上 slider，可以使用 G2Plot 的 GroupedColumnLine 组件。

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

import { GroupedColumnLine } 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 GroupedColumnLine('container', {
  data,
  xField: 'year',
  yField: ['sales', 'profit'],
  columnWidthRatio: 0.4,
  line: {
    style: {
      lineWidth: 2,
      stroke: '#fdae6b',
    },
  },
  slider: {
    start: 0.2,
    end: 0.8,
  },
});

plot.render();

在上面的代码中，我们定义了一个数据源，并指定了 x 轴和 y 轴的数据字段。接着，创建一个 GroupedColumnLine 实例，并指定容器，然后设置数据源和坐标轴的样式。最后，使用 line 属性设置折线图的样式，并使用 slider 属性加上滑动条。

需要注意的是，GroupedColumnLine 组件还支持多种混合图表类型，包括折线图、柱状图、面积图等，可以根据自己的需求选择适合的图表类型。同时，通过调整 slider 的配置，可以改变滑动条的样式和位置。