在 eCharts 中每个系列仅显示一次系列标签答案

【问题标题】：Have series label displaying only once per series in eCharts在 eCharts 中每个系列仅显示一次系列标签
【发布时间】：2020-07-25 01:05:11
【问题描述】：

我想在我的 echarts 图表中为每个系列显示一个标签，这样比我有一个单独的图例并为系列进行颜色编码时更容易阅读。然而，如何实现这一点对我来说并不明显 - 如果我设置 series.label.show = true，那么我会为每个数据点获得一个标签：

有没有办法在这些系列的最右边只使用一个标签？我一直在调整 series-line.label，但对我来说如何实现这一点并不明显。

感谢您的帮助！

【问题讨论】：

标签： echarts

【解决方案1】：

您可以尝试使用formatter 限制标签数量（更改labelFilter 中的分隔符）并使用textBorderWidth 修复重叠。请参见下面的示例。

附：你也可以fine-grained control the labels 但这并不简单。

var myChart = echarts.init(document.getElementById('main'));
var sequence = () => Array(Math.round(Math.random() * (10 - 5) + 5)).fill().map(() => Math.sqrt(Math.random() * 100));
var labelFilter = (obj) => obj.dataIndex % 3 === 0 ? obj.data : '';

var option = {
  tooltip: {},
  legend: {
    data: ['Label']
  },
  xAxis: {
    data: ["Category1", "Category2", "Category3", "Category4", "Category5", "Category6"]
  },
  yAxis: {},
  series: [{
      name: 'Series1',
      stack: 'y',
      type: 'line',
      data: sequence(),
      step: true,
      color: 'green',
      label: {
        show: true,
        formatter: labelFilter,
        position: [10, 30],
        distance: -30,
        textBorderWidth: 2,
        textBorderColor: 'white',
      },
    },
    {
      name: 'Series2',
      stack: 'y',
      type: 'line',
      data: sequence(),
      step: true,
      color: 'blue',
      label: {
        show: true,
        formatter: labelFilter,
        position: [10, -30],
        distance: 30,
        textBorderWidth: 3,
        textBorderColor: 'white',
      },
    },
  ]
};

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>

【讨论】：

很抱歉延迟回复此问题 - 是的，效果很好，谢谢。