echarts在折线图和y轴标签之间添加padding

Question

我使用echarts plugin to build line chart at a some web pages. It works good but I can't find out inside documentation如何在折线图和y轴标签之间添加填充并将y轴标签移动到y轴分割线之间的中心？

当前行echarts插件实例查看：

预期行echarts插件实例查看：

上面的截图意味着我在心理上将图表从内部标签移开，这样它们就不会相交，并将标签沿着下面游戏的 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/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Answer 2

var myChart = echarts.init(document.getElementById('main'));
    var seriesData = Array.from({length: 100}, () => Math.floor(Math.random() * 5000));
    var option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '10%',
        bottom: '15%',
      },
      xAxis: [{
        id: 'xAxis1',
        type: 'category',
        boundaryGap: false,
        data: Array.from({length: seriesData.length}, () => Math.floor(Math.random() * 100)),
        axisLine: {
          lineStyle: {
            shadowOffsetX: 60,
          },
        },
      }],
      yAxis: [{
        type: 'value',
        axisLine: { onZero: false },
        position: 'right',
        show: true,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0)',
          },
        },
        splitLine: {
          lineStyle: {
            shadowOffsetX: 60,
            shadowColor: '#ccc'
          }
        },
        axisLabel: {
          interval: 0,
          inside: true,
          margin: -45,
          fontSize: 16,
          padding: [-50, 0, 0, 0],
          color: 'black',
          showMinLabel: false,
          showMaxLabel: false,
        },
      },{
          type: 'value',
          position: 'right',
          show: true,
          offset: 59,
        }
      ],
  dataZoom: [{
    type: 'inside'
  }, {
    type: 'slider',
    show: true,
    bottom: 0
  }],
  series: [{
    id: 'series1',
    type: 'line',
    yAxisIndex: [0,1],
    lineStyle: {
      width: 1,
    },
    label: {},
    data: seriesData,
  }],
};

myChart.setOption(option);

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

echarts在折线图和y轴标签之间添加padding

echarts add padding between line chart and y-axis label

javascript

echarts