echarts的设置多个label

可以使用ECharts的formatter属性来设置多个label。formatter属性是一个回调函数，它可以自定义标签的显示内容。在回调函数中，你可以根据需要返回一个包含多个label的字符串。

下面是一个示例，展示如何设置多个label：

option = {
  // 其他配置项...
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40, 50],
    label: {
      show: true,
      formatter: function(params) {
        // 自定义回调函数
        return 'Label1: ' + params.value + '\n' + 'Label2: ' + (params.value + 10);
      }
    }
  }]
};

在这个示例中，我们使用formatter属性来定义标签的显示内容。回调函数中，我们通过params参数获取到当前数据项的值params.value，并根据需要返回一个包含两个label的字符串。

这样设置后，每个柱状图上会显示两个label，一个是当前数据项的值，另一个是当前数据项值+10。

你可以根据自己的需求，自定义回调函数的返回值，来设置多个label的显示内容。

相关问题

echarts series设置多个label

在 ECharts 中，可以通过设置 `series.label` 属性来设置数据标签的样式和显示内容。如果你想要设置多个数据标签，可以使用以下两种方法：

1. 使用 `series.label` 中的 `formatter` 属性来自定义数据标签的显示内容。通过这种方式，你可以在显示数据值的同时，添加其他需要显示的信息。例如：

series: [{
  name: '数据1',
  type: 'bar',
  data: [10, 20, 30, 40],
  label: {
    show: true,
    position: 'top',
    formatter: function(params) {
      return params.value + '\n' + '其他信息';
    }
  }
}]

2. 如果你想要在同一个系列中显示多个数据标签，可以使用 `series.label` 中的 `rich` 属性来设置多个标签的样式和内容。例如：

series: [{
  name: '数据1',
  type: 'bar',
  data: [10, 20, 30, 40],
  label: {
    show: true,
    position: 'inside',
    rich: {
      a: {
        color: 'red',
        fontSize: 14,
        lineHeight: 20
      },
      b: {
        backgroundColor: '#eee',
        padding: [2, 4],
        borderRadius: 2
      }
    },
    formatter: function(params) {
      var val = params.value;
      return '{a|' + val + '}\n{b|其他信息}';
    }
  }
}]

在上面的代码中，我们定义了两个不同样式和内容的数据标签，分别为 `a` 和 `b`。然后在 `formatter` 函数中使用 `{a|}` 和 `{b|}` 来引用这两个标签，并进行格式化显示。

echarts中的柱状图多个label

在 echarts 中，可以使用 series-label 插件来实现柱状图的多个 label。具体步骤如下：

1. 引入 series-label 插件：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/extension/dataTool.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/extension/bmap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/extension/series-label.min.js"></script>

2. 在 option 中配置 series-label：

option = {
  ...
  series: [
    {
      name: "销售额",
      type: "bar",
      data: [120, 200, 150, 80, 70],
      label: {
        show: true,
        position: "top",
      },
    },
    {
      name: "利润",
      type: "bar",
      data: [50, 80, 60, 30, 20],
      label: {
        show: true,
        position: "inside",
        formatter: function (params) {
          return params.value + "元";
        },
      },
    },
  ],
  ...
  seriesLabel: {
    show: true,
    emphasis: {
      show: true,
    },
    color: "#000",
    fontFamily: "Arial",
    fontSize: 14,
  },
};

在上述代码中，我们在每个 series 中都配置了 label，用来显示每个柱状图的数值。其中第二个 series 的 label 的 position 设置为 "inside"，用来在柱状图内部显示数值，并且通过 formatter 函数来将数值转化为带有单位的字符串。

然后，在 option 的最后，我们配置了 seriesLabel，用来设置所有柱状图的 label 的公共样式，包括 show、emphasis、color、fontFamily 和 fontSize 等属性。

通过上述配置，我们就可以在 echarts 的柱状图中实现多个 label 的显示了。