// 提示
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
中返回的参数,完全可以自定义返回一行数据,并通过自定义模板优化展示方式。