antv/g2图表tooltip展示坐标之外的数据

项目上遇到这个问题,文档上没有找到案例,这里记录一下:

this.chart.tooltip({
      position: 'top',// 固定位置展示 tooltip
      crosshairs: {
        type: 'rect',
      }, // tooltip 辅助线配置
      offset: 10, // tooltip 距离鼠标的偏移量
      containerTpl: `<div class="g2-tooltip">
          <div class="g2-tooltip-title" style="margin:10px 0;"></div>
          <ul class="g2-tooltip-list"></ul>
        </div>`, // tooltip 容器模板
      itemTpl: `<li data-index={index}>
          <span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>人数: {value} <br/>
          <span style="background-color:#00ba58;width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>占比: {percent}
        </li>`// tooltip 每项记录的默认模板,只接收name,value, index,color
    });
    this.chart.interval().position('groupVal*groupCnt').opacity(1)
      .color('groupVal', val => {
        let value = JSON.parse(val.replace('(', '['))[0]
        if (value >= 0) {
          return '#00c4c4';
        }
        return '#2194ff';
      }).tooltip('groupVal*groupCnt*percent', (groupVal, groupCnt, percent) => {
        return {
          name: '人数',
          value: groupCnt,
          percent: (groupCnt / total * 100).toFixed(2) + '%'
        }
      })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容