javascript - echarts在折线图和y轴标签之间添加填充

Question

我使用echarts plugin在某些网页上构建折线图。它工作得很好，但我在里面找不到documentation如何在折线图和y轴标签之间添加填充并将y轴标签移动到y轴分割线之间的中心？

当前行echarts插件实例 View :

预期行echarts插件实例 View :

上面的屏幕截图意味着我在心里将图形从内部标签移开，这样它们就不会相交，并沿着游戏的 y 轴将标签移动到分割线之间的正下方

我需要更改插件中的哪些设置才能获得与屏幕截图中相同的结果和预期结果？

Answer 1

您可以通过不同的方式来实现这一目标，但大多数方式的支持成本很高并且实现起来很困难。这是一种安全且简单的方法，但您需要注意 xAxis 的点比系列数据多一点，以显示差距。

var myChart = echarts.init(document.getElementById('main'));
var option = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '10%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  yAxis: {
    type: 'value',
    position: 'right',
    axisLabel: {
      inside: true,
      margin: 50,
      fontSize: 18
    }
  },
  series: [{
    type: 'line',
    areaStyle: {
      color: 'rgba(104, 216, 214, 0.4)'
    },
    lineStyle: {
      width: 2,
      color: 'rgba(104, 216, 214, 1)'
    },
    data: [120, 132, 101, 134, 90, 230, 210]
  }, ]
};

myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492c2a21283b3d3a097d67716779" rel="noreferrer noopener nofollow">[email protected]</a>/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>