vue3 gt2plot 鼠标悬浮样式

<template>
  <div class="containers">
    <h4 class="personnelSituation">人员</h4>
    <ul class="projectUl">
      <li v-for="item in arr" :key="item.id">
        <span>{{item.title}}</span>
        <span>{{item.num}}</span>
      </li>
    </ul>
    <h4 class="ratio">工人与管理人员比例</h4>
    <div ref="container" style="height: 400px;width: 100%;padding:0px 20px;box-sizing: border-box"></div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
import {onMounted,ref} from "vue";
export default {
  name: "ProjectPersonProfile",
  setup(){
    let arr = [
      {id:'0',title:'持证人数',num:'234'},
      {id:'1',title:'核验通过人数',num:'342'},
      {id:'2',title:'未持证人数',num:'23'},
      {id:'3',title:'核验未通过人数',num:'2'},
    ]
    const container = ref(null);
    let stackedColumnPlot = null;
    let initChart = () => {
      stackedColumnPlot = new Column(container.value, {
        data:[
          {
            "date": "06.11",
            "value": 100,
            "type": "工人数量",
          },
          {
            "date": "06.12",
            "value": 50,
            "type": "工人数量"
          },
          {
            "date": "06.13",
            "value": 150,
            "type": "工人数量",
          },
          {
            "date": "06.14",
            "value": 110,
            "type": "工人数量"
          },
          {
            "date": "06.15",
            "value": 50,
            "type": "工人数量",
          },
          {
            "date": "06.16",
            "value": 40,
            "type": "工人数量"
          },
          {
            "date": "06.17",
            "value": 180,
            "type": "工人数量",
          },
          {
            "date": "06.18",
            "value": 192,
            "type": "工人数量"
          },
          {
            "date": "06.19",
            "value": 40,
            "type": "工人数量",
          },
          {
            "date": "06.20",
            "value": 110,
            "type": "工人数量"
          },
          {
            "date": "06.21",
            "value": 70,
            "type": "工人数量",
          },
          {
            "date": "06.22",
            "value": 40,
            "type": "工人数量"
          },

          {
            "date": "06.11",
            "value": 100,
            "type": "管理人员"
          },
          {
            "date": "06.12",
            "value": 90,
            "type": "管理人员"
          },
          {
            "date": "06.13",
            "value": 80,
            "type": "管理人员"
          },
          {
            "date": "06.14",
            "value": 10,
            "type": "管理人员"
          },
          {
            "date": "06.15",
            "value": 20,
            "type": "管理人员"
          },
          {
            "date": "06.16",
            "value": 90,
            "type": "管理人员"
          },
          {
            "date": "06.17",
            "value": 100,
            "type": "管理人员"
          },
          {
            "date": "06.18",
            "value": 45,
            "type": "管理人员"
          },
          {
            "date": "06.19",
            "value": 70,
            "type": "管理人员"
          },
          {
            "date": "06.20",
            "value": 100,
            "type": "管理人员"
          },
          {
            "date": "06.21",
            "value": 120,
            "type": "管理人员"
          },
          {
            "date": "06.22",
            "value": 30,
            "type": "管理人员"
          },
        ],
        isStack: true,
        xField: 'date',
        yField: 'value',
        seriesField: 'type',
        cursor: 'pointer',
        "color": [
          'rgb(31, 179, 252)',
          'rgb(42, 115, 251)'
        ],
        minColumnWidth: 15,
        maxColumnWidth: 15,
        legend: {
          layout: 'horizontal',
          position: 'bottom',
        },
        tooltip: {
          customContent: (title, data) => {
            if(title !== null){
              return `<div>
                <div class="g2-tooltip-title" >2022.${title}</div>
                <div class="content">
                    <div class="g2-tooltip-list">
                      <span class="g2-tooltip-marker"></span>
                      <span class="g2-tooltip-name"> ${data[0].data.type}</span>
                      <span class="g2-tooltip-value"> ${data[0].data.value}</span>
                    </div>
                    <div class="g2-tooltip-list">
                      <span class="g2-tooltip-marker g2-tooltip-marker1"></span>
                      <span class="g2-tooltip-name"> ${data[1].data.type}</span>
                      <span class="g2-tooltip-value"> ${data[1].data.value}</span>
                    </div>
                </div>
               </div>`;
            }
          },
          // 设置 tooltip 的 css 样式
          domStyles: {
            'g2-tooltip': {
              width: '180px',
              height: '116px',
              textAlign:'left',
              borderRadius: '6px',
              background: 'linear-gradient(309deg, #FDFEFF -5%, #F4F7FC 84%)',
              backdropFilter: 'blur(10px)',
              boxShadow: '0px 10px 20px 0px rgba(167, 200, 255, 0.5),inset 0px -2px 12px 0px rgba(229, 237, 250, 0.5),inset 0px 2px 6px 0px rgba(229, 237, 250, 0.9)',
            },
            'g2-tooltip-title':{
              position: 'absolute',
              left: '14px',
              width: '60px',
              height: '20px',
              fontFamily: 'PingFangSC-Medium',
              fontSize: '12px',
              fontWeight: 'normal',
              lineHeight: '20px',
              letterSpacing: '0px',
              color: '#1D2129',
            },
            'content':{
              position: 'absolute',
              left: '8px',
              top: '32px',
            },
            'g2-tooltip-list':{
              width: '164px',
              height: '32px',
              display:'flex',
              justifyContent:'center',
              alignItems:'center',
              borderRadius: '4px',
              background: 'rgba(255, 255, 255, 0.9)',
              boxShadow: '6px 0px 20px 0px rgba(34, 87, 188, 0.1)',
              marginBottom:'4px',
            },
            'g2-tooltip-value':{
              width: '60px',
              height: '20px',
              textAlign: 'right',
              fontFamily: 'PingFangSC-Medium',
              fontSize: '12px',
              lineHeight: '20px',
              color: '#1D2129',
            },
            'g2-tooltip-name':{
              fontFamily: 'PingFangSC-Medium',
              fontSize: '12px',
              lineHeight: '20px',
              color: '#1D2129',
            },
            'g2-tooltip-marker':{
              backgroundColor:'#00B2FF',
              width:'10px',
              height:'10px',
              borderRadius:'50%',
              display:'inline-block',
              marginRight:'8px',
            },
            'g2-tooltip-marker1':{
              backgroundColor:'#246EFF',
            }
          },
        }
      });
      stackedColumnPlot.render();
    };
    onMounted(initChart);

    return{
      arr,
      container
    }
  }
}
</script>

<style scoped>
.containers {
  width: 100%;
  height: 610px;
  border-radius: 2px;
  background-color: #fff;
  margin-right: 24px;
}
  .personnelSituation {
    line-height: 40px;
    text-align: left;
    padding-left: 20px;
    border-bottom: 1px solid rgb(240, 242, 245);
  }
  .ratio{
    line-height: 40px;
    text-align: left;
    padding-left: 20px;
    border-bottom: none;
    margin-bottom: 10px;
  }
.projectUl {
    width: 100%;
    list-style: none;
    display: flex;
    padding: 20px 20px 0;
    box-sizing: border-box;
    justify-content: space-between;
  }
.projectUl>li {
    width: 25%;
    text-align: left;
    display: flex;
    flex-direction: column;
  }
.projectUl>li span:nth-of-type(1){
    font-size: 14px;
    margin-bottom: 5px;
    color: rgb(121, 123, 120);
  }
.projectUl>li span:nth-of-type(2){
    font-size: 18px;
  }
</style>