首页 > 解决方案 > Apache ECharts:旋转标签被裁剪

问题描述

我正在尝试在我的图表中使用旋转标签。但是,标签正在被裁剪。如何在底部腾出更多空间以便标签适合?

在此处输入图像描述

  options = {
    xAxis: {
      type: "category",
      data: axis,
      axisLabel: {
        show: true,
        interval: 0,
        rotate: 45,
      },
      axisTick: {
        show: true,
        interval: 0
      }
    },
    yAxis: {
      type: "value",
      data: axis,
      min: 1,
      minInterval: 1,
      maxInterval: 1,
      max: 15,
      axisTick: {
        interval: 1
      }
    },
    series: [
      {
        type: "bar",
        stack: "minmax",
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)"
          }
        },
        data: maxs
      },
      {
        type: "bar",
        stack: "minmax",
        data: mins,
        itemStyle: { color: "#63869e" }
      },
      {
        symbolSize: 20,
        data: scatter,
        type: "scatter",
        itemStyle: { color: "black" },
      },
    ]
  };

标签: echarts

解决方案


可以使用网格选项底部添加空间:

options = {
  grid: {
    bottom: 100,
  }
}

推荐阅读