javascript - 顶点图表拉伸(stretch)全尺寸

Question

顶点图表存在无法拉伸(stretch)完整尺寸的问题。如何使图形仅适合其父容器。

这是对间隙问题的检查，您可以看到内部图表元素与其相应父元素的间距不正确:

这是当前代码:

import Chart from "react-apexcharts";

const SimpleChart = () => {
    const data = {
        series: [{
          name: 'series1',
          data: [31, 40, 28, 51, 42, 109, 100]
        }],
        options: {
          chart: {
            type: 'area',
            toolbar: { show: false },
          },
          dataLabels: {
            enabled: false
          },
          legend: {
            show: false
          },
          stroke: {
            curve: 'smooth'
          },
          grid: { show: false },
          xaxis: {
            labels: { show: false },
            axisBorder: { show: false },
            axisTicks: { show: false },
            type: 'datetime',
            categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
          },
          yaxis: { 
            labels: { show: false },
          },
          tooltip: {
            enabled: false
          },
        },
    };

    return (
        <Chart
            options={data.options}
            series={data.series}
            width="150"
            type="area"
        />
    )
}

export default SimpleChart```

Answer 1

启用迷你图选项

chart: {
  sparkline: {
    enabled: true
  }
},