美文网首页
antv/g2图表tooltip展示坐标之外的数据

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

作者: halowyn | 来源:发表于2021-11-04 10:23 被阅读0次

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

    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) + '%'
            }
          })
    

    相关文章

      网友评论

          本文标题:antv/g2图表tooltip展示坐标之外的数据

          本文链接:https://www.haomeiwen.com/subject/dmkczltx.html