antv g2plot 2.4.7版本堆叠柱线图表-显示多折线折线图脱离canvas

要显示多个折线图并避免它们脱离画布，您可以使用 `theme` 属性来调整 G2Plot 的主题样式。下面是一个示例代码，演示如何创建一个堆叠柱线图表，并显示多个折线图。

import React, { Component } from 'react';
import { StackedColumnLine } from '@antv/g2plot';

class StackedColumnLineChart extends Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
  }

  componentDidMount() {
    const data = [
      { year: '1991', value: 3, type: 'sales' },
      { year: '1992', value: 4, type: 'sales' },
      { year: '1993', value: 3.5, type: 'sales' },
      { year: '1994', value: 5, type: 'sales' },
      { year: '1995', value: 4.9, type: 'sales' },
      { year: '1996', value: 6, type: 'sales' },
      { year: '1997', value: 7, type: 'sales' },
      { year: '1998', value: 9, type: 'sales' },
      { year: '1999', value: 13, type: 'sales' },
      { year: '1991', value: 1, type: 'profits' },
      { year: '1992', value: 3, type: 'profits' },
      { year: '1993', value: 1.5, type: 'profits' },
      { year: '1994', value: 2, type: 'profits' },
      { year: '1995', value: 1.9, type: 'profits' },
      { year: '1996', value: 4, type: 'profits' },
      { year: '1997', value: 5, type: 'profits' },
      { year: '1998', value: 8, type: 'profits' },
      { year: '1999', value: 10, type: 'profits' },
    ];

    const lineTheme = {
      geometries: {
        line: {
          style: {
            lineWidth: 2,
          },
        },
      },
    };

    const chart = new StackedColumnLine(this.chartRef.current, {
      data,
      xField: 'year',
      yField: 'value',
      xAxis: {
        label: {
          autoRotate: false,
        },
      },
      yAxis: {
        label: {
          formatter: (value) => `${value}k`,
        },
      },
      seriesField: 'type',
      legend: {
        position: 'top',
      },
      theme: {
        styleSheet: {
          ...lineTheme,
        },
      },
    });

    chart.render();
  }

  componentWillUnmount() {
    if (this.chart) {
      this.chart.destroy();
    }
  }

  render() {
    return <div ref={this.chartRef}></div>;
  }
}

export default StackedColumnLineChart;

在上面的代码中，我们定义了一个 `lineTheme` 对象，用于调整折线图的样式。然后，我们在创建图表实例时，将 `lineTheme` 对象添加到主题中。这样，我们就可以根据需要调整折线图的线宽和样式，从而避免它们脱离画布。

另外，我们还可以通过设置 `xAxis.label.autoRotate` 属性来禁用 X 轴标签的自动旋转，以确保标签不重叠。同时，我们通过设置 `yAxis.label.formatter` 属性来自定义 Y 轴标签的格式，以便更好地显示数据。