G2plot 自定义tooltip的单条数据结构itemTpl_g2plot tooltip title fields-程序员宅基地

自定义单条数据结构 itemTpl

用 fields 字段列出 图表数据源（按要求组装好的） 中需要在 模板 itemTpl 中用到的字段
用 formatter 对上述字段进行二次加工
itemTpl 模板中可以自定义每一条数据的展示（必须包含各个 dom 节点的 class）

// 提示
tooltip: {
    
  // 需要用到数据源的哪些字段，在这里列出！！
  fields: ['group', 'num', 'rate'],
  // 处理成 itemTpl 需要用的字段（datum 是数据源arr中用到的字段组成的单个数据包）
  formatter: (datum) => {
    
    return {
     name: datum.group, value: datum.num, rate: datum.rate }
  },
  // 自定义 item 模板：每项记录的默认模板，自定义模板时必须包含各个 dom 节点的 class。
  itemTpl: `
    <li class="g2-tooltip-list-item">
      <span class="g2-tooltip-marker" style="background-color: {color};"></span>
      <span class="g2-tooltip-name">{name}</span>:
      <span class="g2-tooltip-value">{value}<span style="margin-left: 16px; color: #ccc">{rate}</span></span>
    </li>
  `,
},

效果如图：
在这里插入图片描述

上述效果图中的title换行效果：

在组装图表数据的时候，直接用的 \n 简单粗暴

data.push({
    
  title: `${
      title}\n\n汇总：${
      total_pay}`,
  time: time || title,
  group: i.name,
  num: 0,
  rate: '0%'
})

本文链接：https://blog.csdn.net/weixin_42289080/article/details/125506161

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

ZYNQ 的三种GPIO ：MIO EMIO AXI_GPIO_zynq 的emio管脚在哪-程序员宅基地

文章浏览阅读309次。学了zynq一段时间，一上来的时候就被zynq的GPIO唬住了，实在没搞清楚zynq的GPIO怎么回事，一会这样，一会那..._zynq 的emio管脚在哪

Redis7 安装与卸载_centos7卸载redis-程序员宅基地

文章浏览阅读782次。redis 7 安装和卸载_centos7卸载redis

VUE使用three.js模型缩放卡顿问题_vue js添加transform scale样式卡顿-程序员宅基地

文章浏览阅读4.5k次，点赞4次，收藏13次。VUE使用three.js模型缩放卡顿问题最近将之前开发的three.js程序集成到vue项目中，发现模型的旋转可缩放变得比较卡顿，网上搜集资料发现是将scene与controls放在vue data中的缘故，解决方法是将其定义在vue之外，然后在method中修改，完整代码如下。<template> <div class="test" id='gltf'> ..._vue js添加transform scale样式卡顿

性能优化方案（整理）-程序员宅基地

文章浏览阅读722次。性能优化方案（整理）　　　　CDN技术详解一本好的入门书是带你进入陌生领域的明灯，《CDN技术详解》绝对是带你进入CDN行业的那盏最亮的明灯。因此，虽然只是纯粹的重点抄录，我也要把《CDN技术详解》的精华放上网。公诸同好。第一章引言“第一公里”是指万维网流量向用户传送的第一个出口，是网站服务器接入互联网..._性能方案样例

下载并安装MS office 365_setup.def.zh-cn_o365proplusretail_-程序员宅基地

文章浏览阅读3k次。进入官网 https://login.microsoftonline.com/ 使用自己的帐号登录office 下载Setup.Def.zh-cn_O365ProPlusRetail_08caf41c-85cb-414f-8739-b5d396199eef_TX_SG_Platform_def_b_64_.exe 安装 ..._setup.def.zh-cn_o365proplusretail_

[elementui]控制台报错 opper-append-to-body is about to be deprecated_popper-append-to-body is about to be deprecated in-程序员宅基地

文章浏览阅读2.5k次。环境：vue3 element-plus控制台报错 elementui。_popper-append-to-body is about to be deprecated in version 2.3.0, please use

随便推点

YTU-OJ- 输出日期时间--友元类_uyoj-程序员宅基地

文章浏览阅读745次。Problem H: C++ 习题输出日期时间--友元类Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 979 Solved: 507[Submit][Status][Web Board]Description设计一个日期类和时间类，编写display函数用于显示日期和时间。要求：将Time类声明为Date类的友_uyoj

docker-elasticsearch-单节点discovery.type=single-node升级为集群cluster-程序员宅基地

文章浏览阅读6.6k次，点赞3次，收藏4次。docker-Elasticsearch 单节点修改为集群模式_discovery.type=single-node

ubuntu编译安装pcl_ubuntu安装pcl-程序员宅基地

文章浏览阅读1.9k次。基于Ubuntu18.04安装PCL点云_ubuntu安装pcl

python: plt.cm.Set1, Set2,Set3返回颜色-程序员宅基地

文章浏览阅读1.2w次，点赞3次，收藏9次。cm代表color map，即颜色映射地图，Set1, Set2, Set3是它的三个颜色集合，可返回颜色。该网站可在线测试本文代码，以便快速理解本文代码：http://kakazai.cn/index.php/Kaka/Python/query?name=cm.setimport matplotlib.pyplot as plt#颜色可用元组表示，元组由4个元素组成，每个元素范围在[0..._plt.cm.set1

Linux命令之 --- chmod命令_chmod -r啥意思-程序员宅基地

文章浏览阅读2.7k次。chmod是控制用户权限的命令。每个文件活目录的权限有三组，分别是拥有者、同组用户、其他用户。先用【ls -l】查看一下文件的权限在上图中，标黄色部分，共有10个位置。第一个字符是指定文件类型，如果第一个字符是横线，表示是一个非目录的文件。如果是d，则表示是一个目录。从第二个字符开始到第十个共9个字符，3个字符为一组，分别表示了3组用户对文件或者目录的权限。权限依次为rwx，当没有相应权限是，就使用-来代替。rwx：r代表可读，w代表可写，x代表可执行。通过上面命令知道文件或者目录的权限后，_chmod -r啥意思

Easyexcel 实现批量插入图片_easyexcel导入图片-程序员宅基地

文章浏览阅读6.1k次。目录1 Maven依赖2 PictureModel3CustomPictureHandler4 调试代码5 调试结果注：1 Maven依赖  <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifact.._easyexcel导入图片