堆叠有3个,后面加了一个对象显示顶部的数据,
其实主要的代码还是在series 的第四项,需要注意的是
series的第四项中的data需要为 data: [0, 0, 0] 顶部的统计才能显示出来
增加的代码如下
{
name: '综合',
type: 'bar',
stack: 'total',
label: {
show: true,
position: 'top',
formatter: (p) => {
let arr1 =[100, 302, 301]
let arr2 =[320, 132, 101]
let arr3 =[220, 182, 191]
return arr1[p.dataIndex] + arr2[p.dataIndex] + arr3[p.dataIndex]
}
},
emphasis: {
focus: 'series'
},
data: [0, 0, 0]
}
完整代码如下 可以在 echarts 中直接运行
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '4%',
right: '1%',
bottom: '2%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true
},
data: ['1月', '2月', '3月']
},
yAxis: [
{
type: 'value',
name: '(个)',
nameTextStyle: {
padding: [0, 0, 0, -36] // 上右下左与原位置距离
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: [
{
name: '近两个月复购客户数',
type: 'bar',
stack: 'total',
barWidth: '40%',
itemStyle: {
color: '#3AA0FF'
},
label: {
show: true,
color: '#fff',
fontSize: '14px',
formatter: (params) => params.value
},
emphasis: {
focus: 'series'
},
data: [100, 302, 301]
},
{
name: '近三个月复购客户数',
type: 'bar',
stack: 'total',
barWidth: '40%',
itemStyle: {
color: '#4ECB73'
},
label: {
show: true,
color: '#fff',
fontSize: '14px',
formatter: (params) => params.value
},
emphasis: {
focus: 'series'
},
data: [320, 132, 101]
},
{
show: false,
name: '近四个月复购客户数',
type: 'bar',
stack: 'total',
barWidth: '40%',
itemStyle: {
color: '#FF892B'
},
label: {
show: true,
color: '#fff',
fontSize: '14px',
formatter: (params) => params.value
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191]
},
{
name: '综合',
type: 'bar',
stack: 'total',
label: {
show: true,
position: 'top',
formatter: (p) => {
let arr1 =[100, 302, 301]
let arr2 =[320, 132, 101]
let arr3 =[220, 182, 191]
return arr1[p.dataIndex] + arr2[p.dataIndex] + arr3[p.dataIndex];
}
},
emphasis: {
focus: 'series'
},
data: [0, 0, 0]
}
]
};