相关疑难解决方法(0)

以下是一个有角度的应用程序，其中的图表由顶点图表组成

https://codesandbox.io/s/apx-column-distributed-d3ns7?from-embed

如何删除该图表及其轴线的水平线（这样看起来更干净）

    this.chartOptions = {
      series: [
        {
          name: "distibuted",
          data: [21, 22,]
        }
      ],
      chart: {
        height: 350,
        type: "bar",
        events: {
          click: function(chart, w, e) {
            // console.log(chart, w, e)
          }
        }
      },
      colors: [
        "#008FFB",
        "#00E396",
      ],
      plotOptions: {
        bar: {
          columnWidth: "45%",
          distributed: true
        }
      },
      dataLabels: {
        enabled: false
      },
      legend: {
        show: false
      },
      xaxis: {
        categories: [
          ["John", "Doe"],
          ["Joe", "Smith"],
        ],
        labels: {
          style: {
            colors: [
              "#008FFB",
              "#00E396",
            ],
            fontSize: …

我正在使用 apexcharts 和 vue。我希望迷你图占据其父级宽度的 100%。

这就是我所做的：

<div>
  <apexchart
    :options="chartOptions"
    :series="series"
    height="150"
    style="width: 100%"
  />
</div>

我还尝试将宽度设置为组件的支柱，但其行为相同。

这是我的图表选项：

chartOptions: {
   chart: {
       type: 'area',
       sparkline: {
           enabled: true
       }
   },
   dataLabels: {
       enabled: false
   },
   stroke: {
       curve: 'straight',
       width: 3,
   },
   xaxis: {
       type: 'datetime',
   }
}

所以这里没什么特别的，它是从 apex 仪表板示例复制的，我添加的唯一内容是尝试将宽度设置为 100%。

它溢出了它的父级（绿色）和父级容器（黄色），如下所示：

而且当我调整窗口大小（不刷新）时，它不会保留其大小，它会变得比父窗口小：

如何让它填充其父级（绿色容器）的宽度并保持这种状态（响应式）？

谢谢