需求描述: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 } = objthis.selected = selectedlet noSelected = 0const length = Object.keys(this.selected).lengthif (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 = trueelse if (noSelected === length) {Object.keys(this.selected).forEach(key => {firstSelect = truethis.selected[key] = true})} else {firstSelect = false}}this.setOption({legend: {selected: this.selected}})})this.myChart.on('legendselectall', function(obj) {firstSelect = true})}
