计算总量的时候,因为总量的值是对应 数据的和,那么数据量过大就会导致整个图表看上去缩小了,原先100%显示,但是加上总量值后只能按50%比列显示了
配置项如下
app.title = '堆叠条形图';
option = {
dataZoom: [{
// yAxisIndex: [0],
// filterMode: 'empty'
show: true,
xAxisIndex: 0,
}],
title: {
text: '班次统计',
textStyle: {
color: '#009688',
fontSize: 14,
},
left: 20
},
tooltip: {
color: 'yellow',
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
color: 'yellow',
data: ['早班', '中班', '晚班', '夜班', '休息']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['张三', '李四', '王二', '赵五', '周灵', '夏溪',
'何六', '夏溪', '何六', '夏溪'
]
},
yAxis: {
type: 'value'
},
series: [{
name: '早班',
type: 'bar',
stack: 'sum',
label: {
normal: {
// show: function(params){
// return false
// },
show: true,
position: 'inside'
}
},
data: [800, 302, 301, 334, 390, 330, 320],
markPoint: {
symbol: 'diamond',
symbolOffset: ['0', '-50%'], //对准数据
data: [{
value: 1500, //第一列数据总和
xAxis: 0, //下标值 X轴 从0开始
yAxis: 1500 //y轴显示的位置
}, ],
itemStyle: {
normal: {
color: '#009688'
}
}
},
itemStyle: {
normal: {
color: '#ab78ba'
}
}
},
{
name: '中班',
type: 'bar',
stack: 'sum',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [200, 21, 101, 134, 90, 230, 210],
itemStyle: {
normal: {
color: ' #08a9f2'
}
}
},
{
name: '晚班',
type: 'bar',
stack: 'sum',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [250, 182, 191, 234, 290, 330, 310]
},
{
name: '夜班',
type: 'bar',
stack: 'sum',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '休息',
type: 'bar',
stack: 'sum',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [100, 832, 0, 934, 1290, 1330, 1320]
}
// ,
// {
// name: '总数',
// type: 'bar',
// stack: 'sum',
// label: {
// normal: {
// show: true,
// position: 'insideBottom',
// textStyle: {
// color: '#000'
// }
// }
// },
// itemStyle: {
// normal: {
// color: 'rgba(128, 128,128,0)'
// }
// },
// /*图表比列不变,此处如何显示总量值?????*/
// data: [0, 0, 0, 0, 0, 0, 0]
// }
]
}