自定义单条数据结构 itemTpl
- 用
fields
字段列出图表数据源(按要求组装好的)
中需要在模板 itemTpl
中用到的字段 - 用
formatter
对上述字段进行二次加工 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>
`,
},
效果如图:
上述效果图中的title换行效果:
在组装图表数据的时候,直接用的 \n
简单粗暴
data.push({
title: `${title}\n\n汇总:${total_pay}`,
time: time || title,
group: i.name,
num: 0,
rate: '0%'
})