AntV G2 Tooltip

import React, { useEffect } from 'react'
import { observer } from 'mobx-react-lite'
import { Chart } from '@antv/g2'
import bigDecimal from 'js-big-decimal'

export default observer(({ data = [] }) => {
  data = [
    { city: '上海', value: 0.99, type1: 100, type2: 20, total: 120 },
    { city: '北京', value: 0.92, type1: 100, type2: 20, total: 120 },
    { city: '广州', value: 0.90, type1: 100, type2: 20, total: 120 },
    { city: '深圳', value: 0.88, type1: 100, type2: 20, total: 120 },
    { city: '杭州', value: 0.84, type1: 100, type2: 20, total: 120 },
    { city: '长沙', value: 0.80, type1: 100, type2: 20, total: 120 },
    { city: '南京', value: 0.77, type1: 100, type2: 20, total: 120 },
    { city: '合肥', value: 0.74, type1: 100, type2: 20, total: 120 },
    { city: '厦门', value: 0.70, type1: 100, type2: 20, total: 120 },
    { city: '郑州', value: 0.63, type1: 100, type2: 20, total: 120 },
    { city: '青岛', value: 0.60, type1: 100, type2: 20, total: 120 },
    { city: '武汉', value: 0.57, type1: 100, type2: 20, total: 120 },
    { city: '武汉', value: 0.57, type1: 100, type2: 20, total: 120 },
    { city: '成都', value: 0.55, type1: 100, type2: 20, total: 120 },
    { city: '西安', value: 0.30, type1: 100, type2: 20, total: 120 }
  ]

  useEffect(() => {
    chartRender()
  }, [])

  const chartRender = () => {
    const chart = new Chart({
      container: 'new-association-rate-indicator',
      autoFit: true,
      height: 300
    })
    chart.data(data)
    chart.scale('value', {
      nice: true,
      formatter: value => {
        return bigDecimal.multiply(value, 100) + '%'
      }
    })
    chart.axis('city', {
      tickLine: null
    })

    chart.axis('value', {
      label: {
        // formatter: (val) => {
        //   return Number(val) * 100 + '%'
        // }
      }
    })

    chart.tooltip({
      showMarkers: false,
      containerTpl: `
`,
      itemTpl: `   
        

          

            
            关联率:{value}
          
          

            
            交付中数:{type1}
          
          

            
            入职数:{type2}
          
          

            
            总关联数:{total}
          
        
        `,
      customItems: (items) => {
        return items.map(item => {
          return {
            ...item,
            type1: item?.data?.type1,
            type2: item?.data?.type2,
            total: item?.data?.total
          }
        })
      }
      // 自定义tooltip样式
      // domStyles: {
      //   'g2-tooltip': {
      //     background: 'rgba(0,0,0,0.75)',
      //     color: '#ffffff'
      //   }
      // }
    })
    chart.interaction('active-region')

    chart.legend(false)
    chart
      .interval()
      .position('city*value')
      .style('city', () => {
        return {
          fillOpacity: 1,
          lineWidth: 0,
          stroke: '#636363',
          lineDash: [3, 2]
        }
      })

      .label('value', {
        content: (originData) => {
          const val = parseFloat(originData.value)
          if (val < 0.05) {
            return (val * 100).toFixed(1) + '%'
          }
        },
        offset: 10
      })

    chart.render()
  }

  return (
    

      
新增关联率指标
      

    
  )
})