博客

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

itemTpl

  this.chart.tooltip({
          showCrosshairs: true, // 展示 Tooltip 辅助线
          shared: true,
          showMarkers: false,
          containerTpl: `<div class="g2-tooltip"><p class="g2-tooltip-title"></p><ul class="g2-tooltip-list"></ul></div>`,
          itemTpl: `   
            <ul class="g2-tooltip-list">
              <li class="g2-tooltip-list-item">
               <span class="g2-tooltip-marker" style="background-color: #5e92f6;"></span>
               <span class="g2-tooltip-name">日留存</span>:<span class="g2-tooltip-value">{value}%</span>
              </li>
              <li class="g2-tooltip-list-item">
               <span class="g2-tooltip-marker" style="background-color: #53e4ca;"></span>
               <span class="g2-tooltip-name">{name}</span>:<span class="g2-tooltip-value">{number}</span>
              </li>
            </ul>
          `,
        });

效果是这样的

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;
      },