为什么Apache ECharts中y轴axisLabel左对齐会导致标签位于柱状图内部

你当前的配置已经接近最终效果，只需要补充grid配置给左侧标签预留足够展示空间即可，调整后的完整代码如下：

HTML代码：

<div id="main"></div>
<p>Test</p>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

CSS代码：

#main {
  height: 400px;
}

JS代码：

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

var options = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  // 配置grid给左侧标签预留展示空间，数值可根据实际标签长度调整
  grid: {
    left: 100
  },
  xAxis: [{
    type: "value",
  }],
  yAxis: [{
    type: "category",
    axisLabel: {
      align: 'left',
      // 调整margin控制标签和Y轴线的间距
      margin: 60
    },
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  }],
  series: [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
};

myChart.setOption(options);

如果需要进一步调整标签位置，直接修改grid.left和axisLabel.margin的数值即可适配不同长度的标签。

内容的提问来源于stack exchange，提问作者Firmansyah