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

2021-11-04  本文已影响0人  halowyn

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

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) + '%'
        }
      })
上一篇 下一篇

猜你喜欢

热点阅读