【Tips】AntV G2Plot笔记

陆续记载在使用AntV G2Plot过程中的一些小tips。

1、传入数据时一定要注意作为x、y轴的条目必须具有唯一性；如下数据中，要用name作为x轴条目，映射后会造成图表重叠的情况；

我的解决方法是：传入数据时将name和其他具有唯一性的条目做拼接，再在使用时通过formatter属性拆分。

[
         {
            "id": "D.CH.0010000",
            "num": "3000.0",
            "name": "共模电感",
            "price": "2.335",
        },
        {
            "id": "D.IC.0042010",
            "num": "50.0",
            "name": "共模电感",
            "price": "314.735",
        }
]

2、要修改tooltip的默认内容，需使用formatter属性，格式如下：

tooltip:{
    formatter: (item) => {
        // item是鼠标移入时x、y轴对应的数据
        //name、value是固定写法
        return { name: '新的x轴对应名称', value: item.属性名+'要拼接的字符串' };
    }
}

若想完全自定义，则需要用customContent属性：

tooltip: {
    customContent: (title, items) => {
        // title是当前移入是对应的x轴数据；items是[{...}]形式的，
        // 通过data[0]得到的对象中含多个数据配置项，使用时可以自己打印出来看下
        console.log(items[0])
   
        //主要会用到配置中的data，将其进行解构赋值
        if (!items || items.length <= 0) return;
        const { data: itemData } = items[0];
   

        // 返回自定义的模板字符串
        return `<div>${title}</div>`;
    }
}