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