echarts--自定义tooltip数据undefined问题以及调用params.data遇到的问题

2023-11-10

问题:

在自定义tooltip设置数据时,通过params.xxx获取数据 出现undefined问题

//图表的数据
pieChartData.map(item =>{
      let obj = {
         value:item.data,
         name:item.url,
         rate:Math.round(item.data/totalData * 10000)/100+'%',
      }
      pieData.push(obj)
})

//通过params.value可以得到浏览量,通过params.rate确实undefined
formatter: function(params) {
      var res = ''
      res += '<div>'+params.name+' </div>'
      res += '<div>'+'浏览量'+':'+params.value +'</div>'
      res += '<div>'+'占比'+':'+params.rate+'%'+'</div>'
      return res;
}

原因:

错误的将params当作是传入的图表数据 , 通过console.log 发params是图表自身整合的参数

 传入的参数放在了params.data里 且图表会自动计算出百分比params.percent

更改后:

formatter: function(params) {
      var res = ''
      res += '<div>'+params.name+' </div>'
      res += '<div>'+'浏览量'+':'+params.value +'</div>'
      res += '<div>'+'占比'+':'+params.percent+'%'+'</div>'
      return res;
}

在地图项目需要调用params.data中数据的时候,有的省份没有数据 , 如果不进行判断直接调用会出现错误

        formatter: function(params) {
          var value = params.data?params.data.value:'--'
          var rate = params.data?params.data.rate:'--'
          var res = ''
          res += '<div>'+params.name+' </div>'
          res += '<div>'+'浏览量'+':'+ value + '</div>'
          res += '<div>'+'占比'+':'+ rate + '</div>'
          return res;
        }

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

echarts--自定义tooltip数据undefined问题以及调用params.data遇到的问题 的相关文章

随机推荐

  • B+树结构与索引<一> _ 结构与索引

    目录 一 B 树结构 1 二分查找法 2 二叉查找树 3 平衡二叉树 4 平衡多路查找树 B Tree 5 B 树 二 操作B 树 1 插入操作 2 删除操作 三 B 树索引类型 1 聚集索引 clustered index 2 辅助索引
  • == 和 equals 的区别是什么

    解读 对于基本类型和引用类型 的作用效果是不同的 如下所示 基本类型 比较的是值是否相同 引用类型 比较的是引用是否相同 equals 解读 equals 本质上就是 只不过 String 和 Integer 等重写了 equals 方法
  • 给你的类重写Equals--检测Class是否相等

    在C 的容器中 常用的三个容器数组 ArrayList Hashtable 数组比较简单 实现某种单一数据的存储 但是并不能自由插入 移除和容纳不同的对象 所以ArrayList是数组的替代品 并且由于ArrayList可以自由的添加 删除
  • 调用接口时 net::ERR_CERT_AUTHORITY_INVALID

    调用接口控制台报错net ERR CERT AUTHORITY INVALID network栏也是红色 这种一般的情况是证书不被浏览器认可 检查下证书 我的情况是我在本地模拟的https 生成的模拟证书 所以是不被浏览器认可的 解决方案
  • centos-6.8下载与安装

    一 centos的下载 有了需要自己才会去动手 算是配置开发环境的一些记录吧 首先进入官网 https www centos org download 官网页面 全英文的界面 英语不是很好 但容易找到 list of current mir
  • PROFINET工业以太网教程---GSDML文件详解

    前面的文章 PROFINET工业以太网教程 10 GSD文件 我们介绍过GSD文件 它的全称是 General Station Description 中文翻译为 通用站描述文件 GSD文件的主要作用是对PROFINET或PROFIBUS子
  • java课设带app_IPAssignApp.java

    package tsinghuaip import javax swing UIManager import java awt public class IPAssignApp boolean packFrame false Constru
  • Java 描述将数字金额转换为中文大写

    Java 描述金额转换 数字转换成中文大写 解题思路 把每一位转换成对应的大写 然后在不足地方补零 最后加上相应单位 代码如下 import java util Scanner public class Main public static
  • 入门汇编(简单程序设计)

    将TABLE单元的10个字节数据传送到TABLE 5开始的单元 MOV CX 10 LEA SI TABLE LEA DI TABLE ADD DI 14 ADD SI 9 STD REP MOVSB 计算 X Y X 结果存Z单元 商是A
  • 多态的定义及其实现

    1 什么是多态性 多态性可以简单地概括为 一个接口 多种方法 程序在运行时才决定调用的函数 它是面向对象编程领域的核心概念 只有重写虚函数才体现C 的多态性 虚函数 虚函数对于多态具有决定性的作用 有虚函数才能构成多态 只需要在虚函数的声明
  • 您选择的文件不是有效的iso映像文件,请重新选择

    安装windows系统的时候无非就是参考类似于下面的这些博文 通用PE u盘装Ghost Win10系统教程http www tongyongpe com win10ghost html 用U盘装机大师安装GHOST WIN10系统http
  • React入门教程之井字棋(三)——游戏完善

    我们现在已经编写好了井字棋游戏中 最基础的可以落子的棋盘 为了开发一个完整的游戏 我们还需要交替在棋盘上放置 X 和 O 并且判断出胜者 状态提升 当前 每个 Square 组件都维护了游戏的状态 我们可以把所有 9 个 Square 的值
  • git删除分支,本地分支、远程分支

    前言 git删除分支的命令 目标 我们这里来删除git的 dev 分支 步骤 一 查看所有的分支 git branch a 查看当前所有的分支 git branch 查看当前所在分支 二 删除本地的分支 git branch D dev 先
  • Linux入门(一)——Linux开源版本的对比

    Linux开源版本的对比 CentOS Ubuntu Debain Debain 优点 稳定 占用空间小 不足 帮助文档相对CentOS少 技术资料也比较少 CentOS CentOS是从RedHat源代码编译的社区重新发布版 CentOS
  • docker stats监控容器资源消耗

    在容器的使用过程中 如果能及时的掌握容器使用的系统资源 无论对开发还是运维工作都是非常有益的 幸运的是 docker 自己就提供了这样的命令 docker stats 默认输出 docker stats 命令用来显示容器使用的系统资源 不带
  • 完全理解搜索/排序/查找二叉树的插入、查找、删除

    目录 一 插入 一 实现原理 二 代码实现 二 查找 一 实现原理 二 代码实现 三 删除 一 实现原理 二 代码实现 这种二叉树名字太多了 小编这里统一叫做搜索二叉树了 首先让我们看看搜索二叉树长什么样子 图片来源 二叉树 二叉排序树 简
  • iOS 蓝牙连接 connectionSupervisionTimeout 是720ms 还是 2~6s

    对比 HCI可以看到iPhone作为主设连接外设时 可以看到 connection Event Interval 30ms connection Slave Latency 0 connection Supervision Timeout
  • 最全position定位方式解析

    position 定位方式 position static position relative position absolute position fixed position inherit position initial posit
  • 复制tr的一行数据或者复制数据使用,使用jq和php

    效果图 2 Html foreach from arrs key kk item vv tr td style text align center 1 td td style text align center 2 td td style
  • echarts--自定义tooltip数据undefined问题以及调用params.data遇到的问题

    问题 在自定义tooltip设置数据时 通过params xxx获取数据 出现undefined问题 图表的数据 pieChartData map item gt let obj value item data name item url