g2繪制點圖，實現鼠標移入點上，tooltip展示，對應的label消失，鼠標移出之后，tooltip消失，對應的label展示出來。

思路：

1. 給point注冊鼠標移入事件，可以拿到當前移入的元素的數據，通過數組的findIndex方法，可以找到與當前移入元素的下標。
2. label的格式是自定義的，用原生js可以獲取所有的label數組，label的個數和總數據的個數是一一對應的，所以可以根據上面獲取的下標，找到當前移入元素的label，設置樣式，從而可以得到想要的效果。
3. 鼠標移出后，樣式回復初始值。

結合react實現，代碼如下：

import React from 'react';
import G2 from '@antv/g2';

let toolIndex;//存儲當前移入元素的下標
class ChangeLabel extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}

  }
  componentDidMount() {
    const data = [
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 }
    ];

    const chart = new G2.Chart({
      container: 'container',
      width: 400,
      height: 300
    });
    chart.source(data);
    chart.scale('value', {
      min: 0,
      max: 20
    });

    chart.tooltip({
      position: 'top',//top,bottom,left,right
      inPlot: false,//設置是否將 tooltip 限定在繪圖區域內，默認為 true，即限定在繪圖區域內
      crosshairs: {
        type: 'line'
      }
    });


    chart.point().position('year*value')
      .size(4)
      .shape('circle')
      .style({
        stroke: '#fff',
        lineWidth: 1
      })
      .label('year*value', function () {
        return {
          useHtml: true,
          htmlTemplate: function htmlTemplate(text, item) {
            var d = item.point;
            console.log(d);

            return (
              `<span class="g2-label" style="color:#b3f";font-size:12px" >` +
              d.value +
              "</span > "
            )
          },
          offsetY: 15,//偏移量
        }
      })

    //給point注冊鼠標移入事件
    chart.on('point:mouseenter', ev => {

      toolIndex = data.findIndex(item => item.year == ev.data.point.year)

      let labelAll = document.querySelectorAll('.g2-label')

      labelAll[toolIndex].style.color = 'transparent'
    })
    
	//給point注冊鼠標移出事件
    chart.on('point:mouseleave', ev => {
      let labelAll = document.querySelectorAll('.g2-label')
      labelAll[toolIndex].style.color = '#b3f'
    })
    chart.render();
  }

  render() {
    return (
      <div id='container'></div>
    )
  }
}
export default ChangeLabel

補充：

• 圖形元素事件，即組成圖表的各種圖形元素；
  我們以 『圖形元素名』+ 『基礎事件名』 的方式來組合圖形元素上的事件，幫助用戶進行更精準的事件監聽，同時也給交互提供了更大的可能性。圖形元素事件對象上都會攜帶 shape 屬性，即表示當前被觸發的圖形元素

chart.on('point:click', ev => {});
chart.on('axis-label:click', ev => {});

• 由于我們拋出的圖形元素事件是通用的，所以當需要針對某一個具體的圖形元素進行事件監聽時，我們提供了一個 appendInfo 屬性，用于幫助用戶對特定的圖形元素進行事件標識，該屬性可用于以下四個接口：

chart.axis()
chart.legend()
chart.guide()
geom().label()

使用方式如下

chart.guide().line({
  top: true,
  start: ['min', 50],
  end: ['max', 50],
  text: {
    content: 'Safe sugar intake 50g/day',
    position: 'end',
    style: {
      textAlign: 'end'
    }
  },
  lineStyle: {
    endArrow: true,
    lineWidth: 10
  },
  appendInfo: {
    id: 'sugar'
  }
});

chart.on('guide-line:click', ev => {
  console.log('guide-line:click', ev.appendInfo); // {id: 'sugar'}
});
chart.on('guide-line-text:click', ev => {
  console.log('guide-line-text:click', ev.appendInfo); // {id: 'sugar'}
});