前言
如图,堆叠图展示每天的任务量,包括已完成量、未完成量,如何想要堆叠展示形式不变,鼠标移入时展示全部任务量、已完成任务量,如何实现?
思考
堆叠图是将不同部分的数据叠放到一起,每段展示不同部分的值,如需展示整体和部分值,可使用双柱状图进行配置。
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
name: '全部',
type: 'bar',
data: [440, 434, 402, 468, 480, 560, 530]
},
{
name: '已完成',
type: 'bar',
barGap: '-100%', // 使两个柱子重叠,模拟堆叠效果
data: [320, 302, 301, 334, 390, 330, 320]
},
]
};