G2自定义Tooltip

G2自定义Tooltip

<div id="interfaceChart" class="interface-chart-main">div>

import G2 from '@antv/g2'
import DataSet from '@antv/data-set'

let chart = new G2.Chart({
  container: 'interfaceChart',
  forceFit: true,
  height: 300
})
	
let data = [{
     methodName: 'getUserInfo',
     callCount: 38,
     failRate: 0,
     overTimeCount: 0
   }, {
     methodName: 'getSystemInfo',
     callCount: 52,
     failRate: 0,
     overTimeCount: 0
   }, {
     methodName: 'getTime',
     callCount: 61,
     failRate: 0,
     overTimeCount: 0
   }]
   
 const dataSet = new DataSet()
 const dv = dataSet.createView().source(data)
 dv.transform({
   type: 'fold',
   fields: ['callCount'], // 展开字段集
   key: 'key', // key字段
   value: 'value' // value字段
 })
 
 chart.source(dv, {
   methodName: {
     type: 'cat'
   }
 })

chart.tooltip({
  crosshairs: 'y',
  htmlContent: function htmlContent(title, items) {
    let selfItem = items[0]
    let html = '
'
    let titleDom = `
${title}
`
let sumDom = `

调用量：${selfItem.value}


失败率：${selfItem.failRate}%


超时次数：${selfItem.overTimeCount}

`
return html + titleDom + sumDom + '
'
}
})
chart.scale('value', {
alias: '调用量'
})
chart.axis('value', {
label: {
offset: [-10, 10]
},
title: {
textStyle: {
fontSize: 12, // 文本大小
}
},
})
chart.interval().tooltip('methodName*value*failRate*overTimeCount', (methodName, value, failRate, overTimeCount) => {
return {
methodName,
value,
failRate,
overTimeCount
}
}).position('methodName*value').size(20)
chart.render()