[Question] 如何防止折线的label超过坐标轴

[kayoch1n]

Version

5.2.1

Link to Minimal Reproduction

No response

Steps to Reproduce

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      labelLayout: {
        hideOverlap: true
      },
      label: {
        show: true,
        position: 'bottom'
      },
      data: [12, 13, 10, 13, 9, 23, 21]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      labelLayout: {
        hideOverlap: true
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

Current Behavior

如果折线的数据的值非常小、贴近x轴而且使用了label，label就会越过x轴，是否有办法隐藏、不显示这部分label呢?

目前我用了文档里的 hideOverlap 参数，但是这个参数只对比较密集的label起作用，对这里的问题不管用。

Expected Behavior

label越过x轴的情况下，能够自动隐藏

Environment

- OS: windows
- Browser: chrome
- Framework: vue

Any additional comments?

No response

[echarts-bot[bot]]

@kayoch1n It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** [Question] How to prevent the label of a polyline from exceeding the axis

[jiawulin001]

将label中的show设为false即可 Just set label.show to false

Code sample

``` option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'Email', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, labelLayout: { hideOverlap: true }, label: { show: false, position: 'bottom' }, data: [12, 13, 10, 13, 9, 23, 21] }, { name: 'Search Engine', type: 'line', stack: 'Total', label: { show: true, position: 'top' }, areaStyle: {}, emphasis: { focus: 'series' }, labelLayout: { hideOverlap: true }, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; ```

[kayoch1n]

将label中的show设为false即可 Just set label.show to false

Code sample

感谢回复。我一开始没讲清楚，实际上data是业务接口返回的，前端并不知道series数组里具体哪一个的值会比较小，所以也就无法直接让 label.show: false

[fuchunhui]

有两个办法，但都不是隐藏，不知道是否和业务要求冲突。

1. 'position: 'top'
2. yAxis 不从0开始, 例如： min: -100

[kayoch1n]

我的做法是调整坐标轴的z-index让坐标轴不至于被覆盖，同时设置坐标轴刻度标签的底色，勉强还行