echarts堆叠柱状图tooltip
时间: 2023-10-15 09:25:38 浏览: 113
echarts柱状图堆叠图动态排序
在 ECharts 中,堆叠柱状图的 tooltip 默认会显示出每个柱子的数值,以及该柱子所属堆叠组的总数值。如果你想定制堆叠柱状图的 tooltip,可以使用 ECharts 提供的 formatter 属性来实现。
下面是一个示例代码,展示如何使用 formatter 来自定义堆叠柱状图的 tooltip:
```javascript
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 显示阴影效果
},
formatter: function(params) {
var seriesName = params[0].seriesName;
var stackName = params[0].name;
var totalValue = params[0].data;
var currentValue = params[0].value;
return seriesName + '<br/>' +
stackName + ': ' + currentValue + '<br/>' +
'Total: ' + totalValue;
}
},
xAxis: {
type: 'category',
data: ['Category A', 'Category B', 'Category C']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Series 1',
type: 'bar',
stack: 'stackGroup',
data: [10, 20, 30]
},
{
name: 'Series 2',
type: 'bar',
stack: 'stackGroup',
data: [15, 25, 35]
}
]
};
```
在这个示例中,我们通过 formatter 函数来自定义 tooltip 的内容。我们使用 `params` 参数来获取当前鼠标悬停的柱子的信息,并将其展示在 tooltip 中。`params` 是当前柱子的信息对象,你可以从中获取到 seriesName(系列名称)、name(堆叠组名称)、value(当前柱子值)以及 data(堆叠总数值)等信息。
这样,你可以根据自己的需要来定制 tooltip 的内容,例如显示堆叠组的百分比、添加单位等。
阅读全文