Vue apexcharts Y 轴标签隐藏在水平条形图中

如何解决Vue apexcharts Y 轴标签隐藏在水平条形图中

我正在使用带有 vue 的 apexcharts（vue-apexcharts 1.6.1）并制作用于 UHD 分辨率的水平条形图。 apexcharts 内部溢出了 100% 的图表宽度。

这是模板代码：

<template>
  <div>
    <apexchart height="820" type="bar" :options="options" :series="series"></apexchart>
  </div>
</template>

这里是图表选项：

options() {
  return {
    chart: {
      type: 'bar',width: "100%",height: 820,toolbar: {
        show: false
      }
    },legend: {
      show: false
    },xaxis: {
      categories: this.categoryData,axisBorder: {
        show: false
      },axisTicks: {
        show: false
      },labels: {
        show: false
      }
    },yaxis: {
      opposite: true,labels: {
        style: {
          colors: ["#BEBFCB"],fontSize: "40px"
        }
      }
    },fill: {
      colors: ["#0E5CAD","#EA5455","#0396FF","#7367F0","#D939CD"],type: "gradient",gradient: {
        shade: "light",gradientToColors: [
          "#79f1a4","#feb692","#abdcff","#ce9ffc","#f6ceec"
        ],shadeIntensity: 1,type: "diagonal1",opacityFrom: 1,opacityTo: 1,stops: [0,100]
      }
    },plotOptions: {
      bar: {
        horizontal: true,distributed: true,borderRadius: 10,barHeight: "70%",colors: {
          ranges: [
            {
              from: 0,to: 0,color: "pink"
            }
          ],backgroundBarColors: "#272A52",backgroundBarRadius: 10
        }
      }
    },dataLabels: {
      enabled: false
    },tooltip: {
      enabled: false
    },responsive: [
      {
        breakpoint: 3199,options: {
          chart: {
            height: 300
          },yaxis: {
            opposite: true,labels: {
              style: {
                colors: ["#BEBFCB"],fontsize: "14px"
              }
            }
          },plotOptions: {
            bar: {
              borderRadius: 4,colors: {
                backgroundBarRadius: 4
              }
            }
          }
        }
      }
    ]
  };
}

这是上面代码的输出： Output of above code Output of above code with dev tools

预期行为： Expected behavior design

如何调整图表以使我的网站与设计相匹配？目前标签的字体大小在超高清分辨率下为 40px。

谢谢

附言我没有在任何祖先元素中使用 flex。

解决方法

我通过为 y-axis 标签提供 maxWidth 并将我的 x 轴类别设置为 multiline 解决了这个问题。

After fix image

yaxis: {
      opposite: true,labels: {
        maxWidth: "auto",style: {
          colors: ["#BEBFCB"],fontSize: "40px"
        }
      }
    }