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

【问题标题】：Adjust position of a line chart series label using echarts使用 echarts 调整折线图系列标签的位置
【发布时间】：2019-09-23 06:30:16
【问题描述】：

我有一个带有多个系列的折线图（使用 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”，但这似乎根本没有帮助标签仍然重叠。

下面是它的截图

【问题讨论】：

标签： html angular echarts

【解决方案1】：

要稍微移动文本，您可以使用offset: [0,-15]、reference。

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

示例

var data = [
    [820, 932, 901, 934, 1290, 330, 320],
    [0, 0, 0, 0, 0, 900, 1320]
];


var option = {
    xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {},
    itemStyle: {

    },
    series: [{
            data: data[0],
            type: "line",
            stack: "stack",
            color: 'blue',
            areaStyle: {
                color: 'blue',
                opacity: 0.3
            },
            label: {
                position: "top",
                offset: [0, -15],
                show: true,

            }
        },
        {
            data: data[1],
            type: "line",
            stack: "stack",
            areaStyle: {
                color: 'red',
                opacity: 0.3
            },
            label: {
                position: "top",
                show: true,
                formatter: function (params) {
                    return (params.value === 0) ? "" : params.value;
                }
            }
        }

    ]
}


var dom = document.getElementById("container");
var myChart = echarts.init(dom);
if (option && typeof option === "object") 
    myChart.setOption(option, true);

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 90%"></div>
</body>
</html>

带掩码标签的堆叠折线图

【讨论】：

【解决方案2】：

你应该试试avoidLabelOverlap = true

【讨论】：