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

Question

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

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

感谢您的帮助！

Answer 1

您可以尝试使用formatter（在labelFilter中更改分隔线）来限制标签​​的数量，并使用textBorderWidth来解决重叠的问题。参见下面的示例。

P.S。您也可以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>