echart堆叠柱状图,顶部显示堆叠柱总数的技巧
记得这个新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}
];
const deviceList = Object.keys(data[0]).filter((key) => key !== '公司');
const newData = deviceList.map((device) => {
return {
设备: device,
...Object.fromEntries(data.map((item) => [item['公司'], item[device]])),
总计:data.map(item=>item[device]).reduce((pre,next)=>{
pre += next
return pre
},0)
};
});
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%',
}
]
};
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步