【避坑指“难”】自定义AntV G2 Chart悬浮框信息

实现效果如下： 官方配置如下：

import { Chart } from '@antv/g2';

const data = [
  { time: '16 Q1', type: '移动游戏', value: 0 },
  { time: '16 Q1', type: '移动购物', value: 17.8 },
  { time: '16 Q1', type: '移动营销', value: 69.4 },
  { time: '16 Q1', type: '共享单车', value: 12.8 },
  { time: '16 Q2', type: '移动游戏', value: 0 },
  { time: '16 Q2', type: '移动购物', value: 18.1 },
  { time: '16 Q2', type: '移动营销', value: 70.7 },
  { time: '16 Q2', type: '共享单车', value: 11.2 },
  { time: '16 Q3', type: '移动游戏', value: 0 },
  { time: '16 Q3', type: '移动购物', value: 20.8 },
  { time: '16 Q3', type: '移动营销', value: 67.4 },
  { time: '16 Q3', type: '共享单车', value: 11.8 },
  { time: '16 Q4', type: '移动游戏', value: 0.1 },
  { time: '16 Q4', type: '移动购物', value: 20.3 },
  { time: '16 Q4', type: '移动营销', value: 69.2 },
  { time: '16 Q4', type: '共享单车', value: 10.4 },
  { time: '17 Q1', type: '移动游戏', value: 0.4 },
  { time: '17 Q1', type: '移动购物', value: 17.3 },
  { time: '17 Q1', type: '移动营销', value: 68.3 },
  { time: '17 Q1', type: '共享单车', value: 14 },
  { time: '17 Q2', type: '移动游戏', value: 1.2 },
  { time: '17 Q2', type: '移动购物', value: 18.3 },
  { time: '17 Q2', type: '移动营销', value: 68.6 },
  { time: '17 Q2', type: '共享单车', value: 11.9 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});
chart.data(data);
chart.axis('value', false);
chart.legend({
  position: 'right',
});
chart.tooltip({
  shared: true,
  showMarkers: false,
});
chart.interaction('active-region');
chart
  .interval()
  .adjust('stack')
  .position('time*value')
  .color('type', ['#40a9ff', '#1890ff', '#096dd9', '#0050b3'])
  .label('value', (val) => {
    if (val < 10) {
      return null;
    }
    return {
      position: 'middle',
      offset: 0,
      content: (originData) => {
        return originData.value + '%';
      },
      style: {
        fill: '#fff'
      }
    };
  });
chart.render();

官方的hover效果如下：

查看源码，需要自定义配置itemTpl： 修改代码chart.tooltip的配置：

chart.tooltip({
      shared: true,
      showMarkers: false,
      itemTpl: `<ul class="g2-tooltip-list">
      <li class="g2-tooltip-list-item">
       <span class="g2-tooltip-name">{name}</span>:<span class="g2-tooltip-value">{value}%</span>
      </li>
    </ul>
    `,