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

我有一个带有多个系列的线图（使用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>

滞后报告

年龄分析报告

到目前为止，我尝试的是改变标签的位置，正如您在上面的代码中看到的那样，将一个标签设置为“左上”，另一个标签设置为“右下”，但这似乎没有帮助，因为所有标签仍然重叠

下面是它的屏幕截图

---

您应该尝试

avoidleabeloverlap=true

要稍微移动文本，您可以使用

偏移量：[0，-15]

但是，您可能希望使用标签格式化程序来屏蔽低于某个值的标签

例子

var数据=[
[820, 932, 901, 934, 1290, 330, 320],
[0, 0, 0, 0, 0, 900, 1320]
];
var选项={
xAxis：{
类型：“类别”，
数据：[“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”]
},
亚克斯：{}，
项目样式：{
},
系列：[{
数据：数据[0]，
键入：“行”，
堆栈：“堆栈”，
颜色：“蓝色”，
区域样式：{
颜色：“蓝色”，
不透明度：0.3
},
标签：{
位置：“顶部”，
偏移量：[0，-15]，
秀：没错，
}
},
{
数据：数据[1]，
键入：“行”，
堆栈：“堆栈”，
区域样式：{
颜色：“红色”，
不透明度：0.3
},
标签：{
位置：“顶部”，
秀：没错，
格式化程序：函数（参数）{
返回值（params.value==0）？“”：params.value；
}
}
}
]
}
var dom=document.getElementById（“容器”）；
var myChart=echarts.init（dom）；
如果（选项和类型选项==“对象”）
myChart.setOption（option，true）