如何在 xAxis 线本身和 Apache Echarts 上的条形底部边缘之间添加 space

Question

这是设计图供参考，注意space的2px。 axisLine > lineStyle 不提供填充属性。有什么建议么？ Chart design example

Answer 1

据我所知，默认情况下这是不可能的，但您可以尝试模拟此选项。类似的东西：

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

var option = {
  tooltip: {},
  xAxis: [{
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: {
      lineStyle: {
        width: 1,
        color: 'white',
        shadowColor: 'black',
        shadowOffsetY: 2
      }
    },
    axisLabel: {
      color: 'black'
    },
    axisTick: {
      lineStyle: {
        color: 'black'
      }
    }
  }],
  yAxis: [{
    type: 'value',
  }],
  series: [{
    type: 'bar',
    data: [1, 34, 12, 23, 43, 64, 45]
  }]
};

myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>

如何在 xAxis 线本身和 Apache Echarts 上的条形底部边缘之间添加 space

How to add space between xAxis line itself and the bottom edge of the bar on Apache Echarts

bar-chart

spacing

echarts

x-axis