欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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。