首页 > 其他 > 详细

antv g2 Tooltip自定义

时间:2021-05-19 13:01:31      阅读:66      评论:0      收藏:0      [点我收藏+]

最近发现关于这个插件的使用文档很少,目前项目中应用到了,恶补了一下,分享出来,希望对各位有帮助!

直接上代码,具体教程看官网:https://g2.antv.vision/zh/docs/api/general/tooltip

  // 配置tips
      chart.tooltip({
        position: ‘bottom‘,
        showTitle: false,
        containerTpl: `<div class="g2-tooltip" ><p class="g2-tooltip-title"></p><ul class="g2-tooltip-list"></ul></div>`,
        itemTpl: `
        
  <ul class="g2-tooltip-list">
    <li class="g2-tooltip-list-item">
      <span class="g2-tooltip-marker"></span>
      <span class="g2-tooltip-name">活动触发</span>:<span class="g2-tooltip-value">${this.barChartData[1].value}</span>
    </li>
    <li class="g2-tooltip-list-item">
      <span class="g2-tooltip-marker"></span>
      <span class="g2-tooltip-name">目标完成</span>:<span class="g2-tooltip-value">${this.barChartData[2].value}</span>
    </li>
    <li class="g2-tooltip-list-item">
      <span class="g2-tooltip-marker"></span>
      <span class="g2-tooltip-name">目标完成率</span>:<span class="g2-tooltip-value">${this.barChartData[0].value}</span>
    </li>
  </ul>
  `,
        // 自定义tooltip样式
        domStyles: {
          ‘g2-tooltip‘: {
            background: ‘rgba(0,0,0,0.75)‘,
            color: ‘#ffffff‘
          }
        }

      })

效果展示如下:

技术分享图片

 

antv g2 Tooltip自定义

原文:https://www.cnblogs.com/aoshilin/p/14784032.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!