2019-11-23 echarts 堆叠柱状图顶部统计，不影
var labelOption = {
normal: {
show: true,
position: "inside",
distance: 0,
align: "center",
verticalAlign: "center",
rotate: 0,
fontSize: 10,
lineHeight: 12,
rich: {
name: {
textBorderColor: 'none',
color: '#fff',
fontSize: 10
}
},
formatter: (params) => {
//console.log(params)
if (params.value === 0){
return '';
}else{
return params.seriesName + '\n' + params.value;
}
}
}
};
var option = {
color: ['#34CFCC', '#9A86FF', '#FF9C51'],
xAxis: [
{
data: xAxis
}
],
grid:{
left: 70
},
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [150, 212, 201, 154, 190, 330, 410]
},
重点是这里...
{
name: '总计',
label: {
normal: {
offset: ['50', '80'],
show: true,
position: 'insideBottom',
formatter: (params) => {
return params.seriesName + '\n' + params.value;
},
textStyle: { color: '#000' }
}
},
itemStyle: {
normal: {
color: 'none'
}
},
type: 'line',
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
PC和小程序公用！！
