AntV G2 Tooltip_五虎战画戟的博客-程序员宝宝_antv g2 tooltip

技术标签: AntV G2自定义提示  Antd  AntV G2 Tooltip  AntV G2  G2 Tooltip  Charts  React  G2自定义Tooltip  

import React, { useEffect } from 'react'
import { observer } from 'mobx-react-lite'
import { Chart } from '@antv/g2'
import bigDecimal from 'js-big-decimal'

export default observer(({ data = [] }) => {
  data = [
    { city: '上海', value: 0.99, type1: 100, type2: 20, total: 120 },
    { city: '北京', value: 0.92, type1: 100, type2: 20, total: 120 },
    { city: '广州', value: 0.90, type1: 100, type2: 20, total: 120 },
    { city: '深圳', value: 0.88, type1: 100, type2: 20, total: 120 },
    { city: '杭州', value: 0.84, type1: 100, type2: 20, total: 120 },
    { city: '长沙', value: 0.80, type1: 100, type2: 20, total: 120 },
    { city: '南京', value: 0.77, type1: 100, type2: 20, total: 120 },
    { city: '合肥', value: 0.74, type1: 100, type2: 20, total: 120 },
    { city: '厦门', value: 0.70, type1: 100, type2: 20, total: 120 },
    { city: '郑州', value: 0.63, type1: 100, type2: 20, total: 120 },
    { city: '青岛', value: 0.60, type1: 100, type2: 20, total: 120 },
    { city: '武汉', value: 0.57, type1: 100, type2: 20, total: 120 },
    { city: '武汉', value: 0.57, type1: 100, type2: 20, total: 120 },
    { city: '成都', value: 0.55, type1: 100, type2: 20, total: 120 },
    { city: '西安', value: 0.30, type1: 100, type2: 20, total: 120 }
  ]

  useEffect(() => {
    chartRender()
  }, [])

  const chartRender = () => {
    const chart = new Chart({
      container: 'new-association-rate-indicator',
      autoFit: true,
      height: 300
    })
    chart.data(data)
    chart.scale('value', {
      nice: true,
      formatter: value => {
        return bigDecimal.multiply(value, 100) + '%'
      }
    })
    chart.axis('city', {
      tickLine: null
    })

    chart.axis('value', {
      label: {
        // formatter: (val) => {
        //   return Number(val) * 100 + '%'
        // }
      }
    })

    chart.tooltip({
      showMarkers: 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" style="background-color: #5e92f6;"></span>
            <span class="g2-tooltip-name">关联率</span>:<span class="g2-tooltip-value">{value}</span>
          </li>
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background-color: #53e4ca;"></span>
            <span class="g2-tooltip-name">交付中数</span>:<span class="g2-tooltip-value">{type1}</span>
          </li>
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background-color: #fd7848;"></span>
            <span class="g2-tooltip-name">入职数</span>:<span class="g2-tooltip-value">{type2}</span>
          </li>
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background-color: #fd7fb4;"></span>
            <span class="g2-tooltip-name">总关联数</span>:<span class="g2-tooltip-value">{total}</span>
          </li>
        </ul>
        `,
      customItems: (items) => {
        return items.map(item => {
          return {
            ...item,
            type1: item?.data?.type1,
            type2: item?.data?.type2,
            total: item?.data?.total
          }
        })
      }
      // 自定义tooltip样式
      // domStyles: {
      //   'g2-tooltip': {
      //     background: 'rgba(0,0,0,0.75)',
      //     color: '#ffffff'
      //   }
      // }
    })
    chart.interaction('active-region')

    chart.legend(false)
    chart
      .interval()
      .position('city*value')
      .style('city', () => {
        return {
          fillOpacity: 1,
          lineWidth: 0,
          stroke: '#636363',
          lineDash: [3, 2]
        }
      })

      .label('value', {
        content: (originData) => {
          const val = parseFloat(originData.value)
          if (val < 0.05) {
            return (val * 100).toFixed(1) + '%'
          }
        },
        offset: 10
      })

    chart.render()
  }

  return (
    <div className='add-list-new-association-rate-indicator'>
      <p className='new-association-rate-indicator-title'>新增关联率指标</p>
      <div id='new-association-rate-indicator' />
    </div>
  )
})
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41887214/article/details/121573123

智能推荐

【考级资料】全国青少年软件编程等级考试Python编程一级2020年02月测试卷_麒麟编程的博客-程序员宝宝

“ 可与小编:ucodeLib4 交流,学习效果更佳!”Q编程考级目的?A为落实《新一代人工智能发展规划》和《教育信息化2.0 行动计划》,推动信息技术与教育深度融合,中国电子学会2018年正式启动了青少年软件编程等级考试工作。考试标准 由中国电子学会与北京大学信息科学技术学院联合编制,旨在推动我国基础教育与高等教育计算机人才培养与评价的衔接,培养青少年的逻辑思维能力和实践创新能力。...

MPEG-2 TS学习(二)MPEG-2 TS码流分析_NB_vol_1的博客-程序员宝宝

TS源码阅读介绍    了解了TS的格式之后,为了加深理解,分析一个开源的项目TSParser,看看TS的解析在代码中是怎么样实现的。 TSParser的地址: TSParser项目结构    项目下载下来之后可以看到,项目仅仅包含四个文件:        types.h 定义了各种数据类型和结构体        TSPars

【笔记】大数据技术之HBase简介与应用(四)_琴&的博客-程序员宝宝

HBase简介是BigTable开源实现网页索引:爬虫-&gt; BigTable运行MapReduceHBase 是谷歌的GFS的开源实现面向列,分布式数据库底层对应关系BigTableHBase文件存储系统GFS海量数据处理MapReduce协同管理服务Chubby设计初心:为了满足大数据实时处理需求关系数据库模式确定以后就很难变更关系数据库中定义了非常多的数据操作,而这个避免了多表之间的连接错做索引方面,只支持对行键的处理数据维护方

Freemarker的处理流程是什么_Vencent Kim的博客-程序员宝宝

freemarker是一款模板引擎,客户(通常是程序员)提供模板和数据,freemarker负责输出最终内容。可以想象模板的一般原理,比如我要输出一个动态格式的文本,我的数据是变化的,我的模板也是动态的。这就要求,模板中要支持表达式,能够根据条件显示,或者循环遍历数据展示,优雅的处理空值(可以给默认值或者不显示)。数据对于模板也是动态的,要怎么做呢?使用占位符代表变量值。freemar...

IOS自定义日历控件的简单实现(附思想及过程)_weixin_30375247的博客-程序员宝宝

因为程序要求要插入一个日历控件,该空间的要求是从当天开始及以后的六个月内的日历,上网查资料基本上都说只要获取两个条件(当月第一天周几和本月一共有多少天)就可以实现一个简单的日历,剩下的靠自己的简单逻辑就OK了,下面开始自己从开始到完成的整个过程1,首先做NSDate类目,扩展一些方法让日期之间转换更加方便#import &lt;Foundation/Foundation.h&gt;...

sparkstreaming直接从kafka消费数据_weixin_30536513的博客-程序员宝宝

1、sparkstreaming直接从kafka消费数据采用createDirectStream,示例:createDirectStream[K,V,KD &lt;:Decoder[K],VD &lt;:Decoder[V]](ssc:StreamingContext,kafkaParams:Map[String,String],topics:Set[String])...

随便推点

剖析MOS管在电路中如何精准的控制电流大小?_weixin_43747182的博客-程序员宝宝_mos管控制电流大小

  随着科技的飞速发展,现如今,人们的日常生活已然离不开电子产品,而电子产品在生产的时候都会用到MOS管来精准控制电流。在MOS管实际使用的过程中,MOS管既可用于放大电流,又能作为电子开关。由于应用广泛,已然成为电子设备必不可少的电子元件。   MOS管是电压控制器件,也就是需要使用电压控制G脚来实现对管子电流的控制。市面上最常见的是增强型N沟通MOS管,厂家可以用...

用myeclipse创建servlet_進擊的胖蛇的博客-程序员宝宝_myeclipse创建servlet

如果不用myeclipse,则写一个servlet,编译,把class放到WEB-INF的classes下面,再修改web.xml,很麻烦。所谓“工欲善其事必先利其MyEclipse是java开发的利器,既然有这么好的利器,那就要好好利用。闲话少说,下面进入正题。(1)首先启动MyEclipse,(至于MyEclipse的安装以及Tomcat的配置,就参考另外的教程了),创建一个Web Pro

Android控件之ExpandableListView多级列表_王家视频教程图书馆的博客-程序员宝宝

Android控件之ExpandableListView多级列表效果展示: 直接上源码:package com.example.expandablelistview;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;impo

总结objective-c特点_黑菜妞妞的博客-程序员宝宝_objective-c的特点

Objective-C与其它面向对象有这明显的不同,它有这自己鲜明的特色,下面我们从这个方法介绍它的特点:兼容性、字符串、类、方法、属性、协议和分类。1. 兼容性Objective-C可以说是一种面向对象的C语言,在Objective-C的代码中可以有C和C++语句,它可以调用C的函数,也可以通过C++对象访问方法。2. 字符串Objective-C通常不使用C语言

用project做项目计划及总结报表_阿叔说研发的博客-程序员宝宝_projec 项目概要汇总

欢迎大家加入project2016的项目计划及总结报表课程的学习。https://edu.csdn.net/course/detail/28065以下是课程大纲和介绍:1前言、背景、概述前言 :究竟讲些什么?适合谁来看?这门课程有什么特点?看完所有课程后,可以收获什么?背景:为什么要讲这么课?以及出发点是什么?概述 :这么课的内容框架介绍。2产品需求分解和评估讲解产品需求的...

3D游戏第八次作业_choitempo的博客-程序员宝宝

3D游戏第八次作业一、简单粒子制作按参考资源要求,制作一个粒子系统,参考资源 使用 3.3 节介绍,用代码控制使之在不同场景下效果不一样1. 模拟烟花发射效果展示:实现:给空对象挂载一个名为moveup的粒子系统模拟烟花发射Emission控制粒子上升设置Size over Lifetime上升过程中闪光2. 模拟爆炸效果展示 :实现:在一个对象上挂载一个粒子系统名为explosion,将形状设置为Sphere,然后设置Radius设置为0.0

推荐文章

热门文章

相关标签