Echarts中饼状图，图例显示value而不是name

**ECharts 中的饼状图**

在 ECharts 中，饼状图是一种常见的数据可视化图表类型。它通过使用圆形来表示不同类别之间的比例关系。然而，在实际应用中，我们经常需要显示每个类别对应的具体值，而不是类别名称。这时候，我们就需要在 ECharts 中配置图例显示 value 而不是 name。

**基本配置**

首先，让我们看一下一个基本的饼状图示例：

javascript// 基本配置var chart = echarts.init(document.getElementById('pieChart'));
option = {
 title: {
 text: '饼状图示例'
 },
 tooltip: {},
 legend: {
 data: ['类别1', '类别2']
 },
 series: [{
 name: '类别',
 type: 'pie',
 radius: '80%',
 center: ['50%', '50%'],
 data: [
 {value:335, name: '类别1'},
 {value:310, name: '类别2'}
 ]
 }]
};
chart.setOption(option);

在这个示例中，我们使用了一个基本的饼状图配置，包含 title、tooltip 和 legend 等选项。series 中定义了两个数据点，每个数据点对应一个类别。

**显示 value 而不是 name**

现在，让我们修改一下配置，使得图例显示每个类别对应的具体值，而不是类别名称：

javascript// 显示 value 而不是 namevar chart = echarts.init(document.getElementById('pieChart'));
option = {
 title: {
 text: '饼状图示例'
 },
 tooltip: {},
 legend: {
 data: ['类别1', '类别2']
 },
 series: [{
 name: '类别',
 type: 'pie',
 radius: '80%',
 center: ['50%', '50%'],
 data: [
 {value:335, name: '类别1'},
 {value:310, name: '类别2'}
 ],
 label: {
 formatter: '{b}: {c}'
 }
 }]
};
chart.setOption(option);

在这个修改后的配置中，我们添加了一个 label 配置项，使用 formatter 函数来格式化图例的显示内容。formatter 函数返回值为 `{b}: {c}`,其中 `{b}` 表示类别名称，而 `{c}` 表示具体值。

**总结**

通过以上示例，我们可以看到在 ECharts 中配置饼状图时，可以使用 label 配置项来控制图例的显示内容。通过设置 formatter 函数，可以使得图例显示每个类别对应的具体值，而不是类别名称。这对于实际应用来说非常有用，能够更好地展示数据信息。

**参考**

* ECharts 官方文档： />* ECharts 配置项参考：