有这么些堆叠柱状图,想要在每个堆叠柱的顶端显示总数,这时我们可以在series里面再push一个bar,这个bar的值为前面柱子数据的总数和,因此高度是等高的。
记得这个新push的bar的stack属性值是和前面相同同stack的堆叠柱是不同的值,然后设置z为-1,barGap为’-100%’,这样就能够把总计的柱子给隐藏到堆叠柱的后面了。
代码
//各子公司不同设备工单分布统计表
let data = [
{公司: '寿险',硬件设备: 5,操作系统: 15,数据库中间件: 25,安全: 5,网络: 9},
{公司: '健康险',硬件设备: 7,操作系统: 13,数据库中间件: 5,安全: 21,网络: 17},
{公司: '南中心',硬件设备: 18,操作系统: 28,数据库中间件: 13,安全: 32,网络: 17},
{公司: '科技运营部',硬件设备: 12,操作系统: 13,数据库中间件: 22,安全: 19,网络: 12},
{公司: '88号',硬件设备: 21,操作系统: 15,数据库中间件: 10,安全: 5,网络: 6}
];
let hashTmp = {};
data.forEach((e) => {
for (let k in e) {
hashTmp[k] = hashTmp[k] || {};
hashTmp[k][e['公司']] = e[k];
}
});
let newData = [];
for (let k in hashTmp) {
if (k !== '公司') {
hashTmp[k]['总计'] = 0
for(let k1 in hashTmp[k]){
if(k1!=='总计'){
hashTmp[k]['总计'] += hashTmp[k][k1]
}
}
hashTmp[k]['设备'] = k;
newData.push(hashTmp[k]);
}
}
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
dataset: {
dimensions: ['设备', '寿险', '健康险', '南中心', '科技运营部', '88号','总计'],
source: newData
},
xAxis: [
{
type: 'category',
data: [`硬件设备`, `操作系统`, `数据库中间件`, `安全`, `网络`]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '寿险',
type: 'bar',
stack: 'Ad',
barWidth: 30,
label: {
show: true,
position: 'inside',
fontSize: 15
},
emphasis: {
focus: 'series'
}
},
{
name: '健康险',
type: 'bar',
stack: 'Ad',
label: {
show: true,
position: 'inside',
fontSize: 15
},
emphasis: {
focus: 'series'
}
},
{
name: '南中心',
type: 'bar',
stack: 'Ad',
label: {
show: true,
position: 'inside',
fontSize: 15
},
emphasis: {
focus: 'series'
}
},
{
name: '科技运营部',
type: 'bar',
stack: 'Ad',
label: {
show: true,
position: 'inside',
fontSize: 15
},
emphasis: {
focus: 'series'
}
},
{
name: '88号',
type: 'bar',
barWidth: 30,
stack: 'Ad',
label: {
show: true,
position: 'inside',
fontSize: 15
},
emphasis: {
focus: 'series'
}
},
{
name: '总计',
type: 'bar',
stack: '',
barWidth: 30,
label: {
normal: {
show: true,
position: 'top',
color: '#000'
},
},
z: -1,
//不同系列的柱间距离,为百分比,如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。
barGap: '-100%',
}
]
};