vue 使用g2Plot饼状图自定义tooltip内容

 默认情况下tooltip显示的是

开发时假设想要达到右侧图片这种效果，需要自行配置tooltip

 

 根据官方文档说明需要使用 fields 、formatter 配置项来实现

tooltip: {
    // 默认tooltip要显示的字段
    fields: ['group', 'money', 'rate'],
    // datum 所获取的是fields中的字段 
    // 在formatter 格式化 类似于起别名
     formatter: (datum) => {
          return { name: datum.group, value: datum.money, rate: datum.rate }
        },
     },

使用 itemTpl  配置每项记录的默认模板,自定义模板时必须包含各个 dom 节点的 class

节点配置class说明:悬浮提示 - Tooltip | G2Plot /class配置项说明

tooltip: {
    // 默认tooltip要显示的字段
    fields: ['group', 'money', 'rate'],
    // datum 所获取的是fields中的字段 
    // 在formatter 格式化 类似于起别名
    formatter: (datum) => {
          return { name: datum.group, value: datum.money, rate: datum.rate }
    },
     // 自定义，class 必须跟官方的样式一致
     //{name} 、{value} 、{rate}是在formatter起的别名
          itemTpl: `
      

        
         {name}
         产值:
          {value}
           占比:
          {rate}
        
   `
},

 微调样式后即可实现

官方文档关于tooltip配置项说明:

https://antv-g2plot.gitee.io/zh/docs/api/components/tooltip