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 = '<div class="g2-tooltip">'
    let titleDom = `<div class="g2-tooltip-title" style="margin-bottom: 4px;">${title}</div>`
    let sumDom = `<div>
                调用量：${selfItem.value}
              </div>
              <div>
                失败率：${selfItem.failRate}%
              </div>
              <div>
                超时次数：${selfItem.overTimeCount}
              </div>
              `
    return html + titleDom + sumDom + '</div>'
  }
})

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()