需求描述:legend中点击图例默认行为是不显示该图例,而这不符合实际产品需求。我们需要的效果是:
1、第一次点击时,只展示点击图例
2、后续点击时、若图例状态为显示/隐藏,则修改状态为隐藏/显示
3、当没有图例显示时,设置为全选状态
4、全选状态下,重置为第一次点击
全选控件我通过一个变量来判断是否展示,是因为系列少的时候控制不展示全选按钮
// 显示全选功能
legend: {
width: '78%%',
type: 'scroll',
selector: this.hasSelector ? ['all'] : false
},
// 监听legendselectchanged、legendselectall事件
setLegendEvents(firstSelect) {
this.myChart.on('legendselectchanged', function(obj) {
const { selected, name } = obj
this.selected = selected
let noSelected = 0
const length = Object.keys(this.selected).length
if (this.selected) {
Object.keys(this.selected).forEach(key => {
if (firstSelect) {
this.selected[key] = false
}
if (key === name && firstSelect) { this.selected[key] = true }
if (this.selected[key] === false) noSelected++
})
if (noSelected === 0) firstSelect = true
else if (noSelected === length) {
Object.keys(this.selected).forEach(key => {
firstSelect = true
this.selected[key] = true
})
} else {
firstSelect = false
}
}
this.setOption({
legend: {
selected: this.selected
}
})
})
this.myChart.on('legendselectall', function(obj) {
firstSelect = true
})
}