AntV G2多折线图legend全选功能添加
程序员文章站
2022-04-21 23:30:04
...
AntV中G2多折线图增加全选框
methods: {
init() {
const data = this.chartdata
const option = {
data,
xField: this.columns.dimensionality[1],
yField: this.columns.magnanimity[0],
seriesField: this.columns.dimensionality[0],
color: '#0e5291',
yAxis: {
label: {
formatter: v => `${(v / 10e8).toFixed(1)} B`
}
},
legend: {
position: 'top',
selected: {}
//selected:{'邮件营销':true,'联盟广告':false,'视频广告':true,'直接访问':true,'搜索引擎':true}
},
}
const line = new Line('container5', option)
// 绑定legend的点击事件(
line.on('legend-item:click', (event) => {
const item = event.target.get('delegateObject').item
const name = item.name
option.legend.selected[name] = !item.unchecked
console.log(option.legend)
})
line.render()
}
}
这里省略了div里的全选框事件
可以通过全选框事件,设置option中selected的属性值,进而控制图表中legend。