ECharts 柱状图默认不会在每个柱子上显示数值，但是可以通过配置项来实现这个功能。下面介绍两种实现方式。
方式一：使用 label 配置项
在 ECharts 柱状图的 series 配置项中，可以添加 label 配置项，用于设置柱子上显示的文本样式，包括颜色、字体大小、显示内容等。可以使用 {value} 占位符表示显示柱子的值。
例如，以下代码片段可以在每个柱子上显示该柱子的数值：
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
label: {
show: true,
position: 'top',
color: 'black',
fontSize: 12,
formatter: '{value}' // 使用 {value} 占位符显示柱子的值
}
}
]
}
在上述代码中，我们添加了一个 label 配置项，并设置了 show 属性为 true，表示显示柱子上的文本；position 属性为 top，表示将文本显示在柱子的顶部；color 属性为 black，表示文本颜色为黑色；fontSize 属性为 12，表示文本字体大小为 12px；formatter 属性为 {value}，表示显示柱子的值。
方式二：使用 tooltip 配置项
除了使用 label 配置项来显示柱子的数值，还可以使用 tooltip 配置项来在鼠标悬停时显示数值。在 ECharts 中，tooltip 是一个重要的交互组件，用于显示数据项的详细信息。
在柱状图的 series 配置项中，可以添加 tooltip 配置项，用于设置提示框的样式和显示内容。可以使用 {c} 占位符表示显示柱子的值。
例如，以下代码片段可以在鼠标悬停在柱子上时显示该柱子的数值：
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
tooltip: {
show: true,
formatter: '{c}' // 使用 {c} 占位符显示柱子的值
}
}
]
}
在上述代码中，我们添加了一个 tooltip 配置项，并设置了 show 属性，为了使柱状图上的数值更清晰易懂，我们还可以对显示的数值进行格式化，例如将小数保留两位或者添加单位。
对于方式一，我们可以在 formatter 属性中使用 JavaScript 提供的格式化函数，例如 toFixed() 将数值保留指定小数位，或者 toLocaleString() 将数值转化为本地化字符串，并添加千位分隔符。
例如，以下代码片段可以将每个柱子的数值保留两位小数并添加单位“万元”：
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120000, 200000, 150000, 80000, 70000, 110000, 130000],
type: 'bar',
label: {
show: true,
position: 'top',
color: 'black',
fontSize: 12,
formatter: function(params) {
return (params.value / 10000).toFixed(2) + '万元'; // 将数值除以 10000 并保留两位小数，添加单位“万元”
}
}
}
]
}
对于方式二，我们可以在 formatter 属性中使用 {c} 占位符，并在其后面添加需要的格式化字符串。例如，以下代码片段可以将每个柱子的数值添加单位“万元”，并添加千位分隔符：
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120000, 200000, 150000, 80000, 70000, 110000, 130000],
type: 'bar',
tooltip: {
show: true,
formatter: '{c}万元' // 在占位符后添加“万元”，表示数值单位为“万元”
}
}
]
}
在上述代码中，我们使用了 {c} 占位符表示柱子的数值，并在其后面添加了“万元”作为数值的单位。同时，由于数值较大，我们还可以使用 toLocaleString() 函数为数值添加千位分隔符。
总之，无论是使用 label 配置项还是 tooltip 配置项，在柱状图中显示数值都是非常简单的。而通过格式化显示的数值，可以使柱状图更加易懂，为数据的分析和决策提供更多的帮助。
评论