G2Plot Tooltip 自定义展示内容（itemTpl 的进阶使用）

// 提示
tooltip: {
  // 处理弹窗数值展示
  formatter: (datum) => {
    // 如果是写死的常量则可以不进行声明
    return { name: datum.group, value: datum.num, rate: 20 }
  },
  // 自定义 item 模板：每项记录的默认模板，自定义模板时必须包含各个 dom 节点的 class。
  itemTpl: `
    <li class="g2-tooltip-list-item">
      <span class="g2-tooltip-marker" style="background-color: {color};"></span>
      <span class="g2-tooltip-name">{name}</span>:
      <span class="g2-tooltip-value">{value}<span style="margin-left: 16px; color: #ccc">{rate}%</span></span>
    </li>
  `
}

// 提示
tooltip: {
  // 如果需要用数据源里面的其他字段，进行动态展示，则需要进行自定义申明
  // 声明的 key 也就是数据源中的 key，然后会通过重新组装到 datum 中进行使用
  fields: ['group', 'num', 'rate'],
  // 处理弹窗数值展示
  formatter: (datum) => {
    return { name: datum.group, value: datum.num, rate: datum.rate }
  },
  // 自定义 item 模板：每项记录的默认模板，自定义模板时必须包含各个 dom 节点的 class。
  itemTpl: `
    <li class="g2-tooltip-list-item">
      <span class="g2-tooltip-marker" style="background-color: {color};"></span>
      <span class="g2-tooltip-name">{name}</span>:
      <span class="g2-tooltip-value">{value}<span style="margin-left: 16px; color: #ccc">{rate}%</span></span>
    </li>
  `
}

itemTpl 自定义模板中使用的参数 {xxx} 对应的是 formatter 中返回的参数，完全可以自定义返回一行数据，并通过自定义模板优化展示方式。