为什么 yAxis axisLabel 左对齐导致 position label 在 Apache ECharts 中的栏内

Question

The expetacion result is like this post: How to set labels align left in Horizontal Bar using chart.js? but it's implemented in Apache ECharts

Any idea?

 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var options = { color: ["#3398DB"], tooltip: { trigger: "axis", axisPointer: { type: "shadow" } }, grid: {}, xAxis: [{ type: "value", }], yAxis: [{ type: "category", axisLabel: { align: 'left', margin: 40 }, 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);

 #main { height: 400px; }

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

Answer 1

You can set margin for axisLabel, to make the labels visible. Updated your code snippet