G2plot 自定义tooltip的单条数据结构itemTpl

自定义单条数据结构 itemTpl

1. 用 fields 字段列出 图表数据源（按要求组装好的） 中需要在 模板 itemTpl 中用到的字段
2. 用 formatter 对上述字段进行二次加工
3. itemTpl 模板中可以自定义每一条数据的展示（必须包含各个 dom 节点的 class）

// 提示
tooltip: {
  // 需要用到数据源的哪些字段，在这里列出！！
  fields: ['group', 'num', 'rate'],
  // 处理成 itemTpl 需要用的字段（datum 是数据源arr中用到的字段组成的单个数据包）
  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>
  `,
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果如图：

上述效果图中的title换行效果：

在组装图表数据的时候，直接用的 \n 简单粗暴

data.push({
  title: `${title}\n\n汇总：${total_pay}`,
  time: time || title,
  group: i.name,
  num: 0,
  rate: '0%'
})
1
2
3
4
5
6
7