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

Question

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

有没有办法只在这些系列的最右边有一个标签？我一直在调整系列-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>

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

Have series label displaying only once per series in eCharts

echarts