Antv G2 4.0+技巧

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。网址：https://antv.vision/zh。

G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。网址：https://g2.antv.vision/zh。

1. 设置图例

legend({ position: 'top-left',
       offsetX: 200,
       itemName: {  //设置图例文本
         style: {
           fontSize: 14,
           fill: '#5F717D',
           x: 22,
         },
       },
       marker: {  //设置图例标注样式
         style: {
           r: 6,
         },
       },
   });

具体style属性参考：https://g2.antv.vision/zh/docs/api/interfaces/shapemarkerattrs。

2. 自定义图例点击事件，隐藏对应图形

chartRef.current.on('legend:click', (ev: any) => {
    const { unchecked, value } = ev.target.cfg.delegateObject.item;
    const geoms = chartRef.current.geometries;
    for (let i = 0; i < geoms.length; i++) {
        const geom = geoms[i];
        if (geom.getYScale().field === value) {
            if (!unchecked) {
                geom.show();
            } else {
                geom.hide();
            }
        }
    }
});