g2绘制点图，鼠标移入点上出现tooltip，对应的label消失

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'}
});