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: `<div class="g2-tooltip"><p class="g2-tooltip-title"></p><ul class="g2-tooltip-list"></ul></div>`,
      itemTpl: `   
        <ul class="g2-tooltip-list">
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background-color: #5e92f6;"></span>
            <span class="g2-tooltip-name">关联率</span>:<span class="g2-tooltip-value">{value}</span>
          </li>
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background-color: #53e4ca;"></span>
            <span class="g2-tooltip-name">交付中数</span>:<span class="g2-tooltip-value">{type1}</span>
          </li>
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background-color: #fd7848;"></span>
            <span class="g2-tooltip-name">入职数</span>:<span class="g2-tooltip-value">{type2}</span>
          </li>
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background-color: #fd7fb4;"></span>
            <span class="g2-tooltip-name">总关联数</span>:<span class="g2-tooltip-value">{total}</span>
          </li>
        </ul>
        `,
      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 (
    <div className='add-list-new-association-rate-indicator'>
      <p className='new-association-rate-indicator-title'>新增关联率指标</p>
      <div id='new-association-rate-indicator' />
    </div>
  )
})