In the official document yyds, there are many blog posts that are not time-sensitive or plagiarized from each other, and lack the logic to solve the problem. At this time, it is better to read the official document, but the blog post can also provide ideas or directions to solve the problem.
Effect after solution:
Originally, the data corresponding to each item is 0, which will block the labels on other bars with data. After this setting, the
callback function of the formatter can be written like this:
{
type: 'bar',
stack: 'class',
barWidth: 20,
label: {
show: true,
position: 'insideBottom',
formatter: function(params) {
const a = params.value[params.encode.y[0]]
if (a > 0) {
return a
} else {
return ''
}
}
}
}
The following is the official document section for reference:
Note: the use of encode and dimensionNames, for example:
If the data is:
dataset: {
source: [
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
}
Then you can get the value corresponding to the y-axis like this:
params.value[params.encode.y[0]]
If the data is:
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{
product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{
product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{
product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{
product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
}
Then you can get the value corresponding to the y-axis like this:
params.value[params.dimensionNames[params.encode.y[0]]]
Attach the official document link: https://echarts.apache.org/zh/option.html#series-bar.label.formatter