antv/g2图表tooltip自定义并展示坐标之外的数据

感觉Antv文档很不详细，写这块时找了好久才找到方法，现在记一下，方便今后的观看和其他遇到此问题的同学解决办法。

itemTpl

  this.chart.tooltip({
          showCrosshairs: true, // 展示 Tooltip 辅助线
          shared: true,
          showMarkers: false,
          containerTpl: `
`,
          itemTpl: `   
            

              

               
               日留存:{value}%
              
              

               
               {name}:{number}
              
            
          `,
        });

效果是这样的

itemTpl主要就是看到的背景色，颜色等样式。

tooltip展示坐标之外的数据

其实正常的划线就是 this.chart.line().position('time*value')，time是X轴，value是Y轴。但是此时我们需要鼠标划入时展示其他的数据，那么就如下代码，在正常的划线后加入 tooltip属性，并把需要显示的数据写进里面就可以了

       this.chart.line().position('time*value').tooltip('time*value*name*number', (time, value, name, number) => {
          return {
            name: name,  //此处name对应itemTpl模板中name，以下两个参数类推
            value: value,
            number: number
          }
        });
        this.chart.point().position('time*value').tooltip('time*value*name*number',function(time, value, name, number){
          return {
            name: name,
            value: value,
            number: number
          }
        });

数据格式转化要显示的Y轴数据应去掉双引号

dataDealwith(){
        var data=this.chartData;
        var newData=[];
        data.forEach(function(obj){
          for (var prop in obj) {
           if (prop == "value") {
            if (obj.hasOwnProperty(prop) && obj[prop] !== null && !isNaN(obj[prop])) {
              obj[prop] = +obj[prop];
            }
           }
          }
          newData.push(obj)
        })
        return newData;
      },