echarts堆叠柱状图的归一化:1、每个柱体高度一致,2、显示不同数据在柱子中的百分比
时间: 2024-11-27 09:14:11 浏览: 8
echarts堆叠柱状图(顶端圆角).rar
ECharts中的堆叠柱状图可以实现归一化处理,主要有两种方式来达到你提到的效果:
1. **等高堆积**:这种模式下,每个柱子的高度是一致的,比如将所有系列的数据值除以总和,然后乘以设定的最大高度,确保每个柱子都有相同的视觉呈现。通过设置`series.bar.stack`为'normal'或默认值,以及调整`series.bar.max`为统一的数值,可以实现每个柱子高度固定。
```javascript
option = {
series: [
{ // 系列1
name: '系列1',
data: [数值1, 数值2, ...],
stack: '总量'
},
{ // 其他系列...
],
// 设置最大高度
seriesBarMax: '100%'
]
};
```
2. **百分比显示**:如果想要显示每个数据点在整体中的占比,可以在数据展示上直接计算并传递百分比。例如,你可以对每个数据值除以总和得到百分比,然后设置`label.formatter`函数动态生成标签内容。这里需要注意的是,你需要手动计算百分比,并在`formatter`函数里应用。
```javascript
option = {
series: [
{
data: [数值1 / 总和 * 100, 数值2 / 总和 * 100, ...],
label: {
formatter: function (params) {
return `${params.name}: ${params.value.toFixed(2)}%`;
}
}
}
]
};
```
阅读全文