使用echarts调整折线图系列标签的位置

Question

我有一个带有多个系列的折线图（使用echarts）的有角度的web应用程序。该系列的标签重叠，是否有办法调整其位置或大小等以防止它们重叠？

我的代码：

 thisInstance._paidUnpaidSplitGraphOptions = {
      title: {
        text: 'Paid/Unpaid Claims'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['Unpaid Claims', 'Paid Claims']
      },
      grid: {
        left: '5%',
        right: '6%',
        bottom: '5%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {
            title: "Download Image of Chart"

          },
          dataZoom: {
            yAxisIndex: false,
            title: { "zoom": "Zoom Chart", "back": "Remove Zoom" }
          },
          brush: {
            type: ['lineX', 'clear'],
            title: {
              "lineX": "LineX", "clear": "Clear" }
          }
        }
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: xAxisData

        }
      ],
      yAxis: [
        {
          type: 'value'

        }
      ],
      series: [

        {
          name: 'Paid Claims',
          type: 'line',
          stack: 'WWWWWWWW',
          label: {
            position: 'TopLeft',
            normal: {

              show: true,
              formatter: function (data) {
                return thisInstance.GetFormattedValue(data);
              },
              color: '#151515'
            }
          },
          areaStyle: { normal: {} },
          data: paidAmounts
        },
        {
          name: 'Unpaid Claims',
          type: 'line',
          stack: 'WWWWWWWW',
          label: {
            normal: {
              show: true,
              formatter: function (data) {

                return thisInstance.GetFormattedValue(data);
              },
              position: 'BottomRight',
              color: '#151515'
            }

          },
          areaStyle: { normal: {} },
          data: unPaidAmounts

        }
      ]
    }

html代码：

<div class="clr-row">
  <div class="clr-col-2">

  </div>
  <div class="clr-col-8">
    <div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"></div>
  </div>
  <div class="clr-col-2">
    <button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"><clr-icon shape="download"></clr-icon>LAG REPORT</button><br />
    <button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"><clr-icon shape="download"></clr-icon>AGE ANALYSIS REPORT</button>
  </div>
</div>

到目前为止，我已经尝试过更改标签的位置，如您在上面的代码中看到的，使一个'TopLeft'和另一个'BottomRight'，但这似乎对所有标签都没有帮助仍然重叠。

下面是它的屏幕截图

Answer 1

您应该尝试avoidLabelOverlap = true