echart 多表联动value为null时 tooltip 显示问题

两个图表,第一个有tooltip,第二个隐藏掉

两个图表的 series 如下

// ----- chart1 ----
 series: [
      {
          name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [320, 282, 391, 334, null, null, null],
          },
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [220, 232, 221, 234, 290, 430, 410],
          },
        ],

// ------ chart 2 -------
     series: [
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, null, null, null],
          },
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],

注意看series 的第一个元素中data中有 null 值,

显示如下:(当鼠标移动到下面这个图表上时,并没有出现tooptip)

修正:需要将series data 中的值,使第一个元素中的data 无null值即可

// ----- chart1 -----
series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [220, 232, 221, 234, 290, 430, 410],
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [320, 282, 391, 334, null, null, null],
          },

//  ----- chart2 -----
series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, null, null, null],
          },
        ],

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/606739.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[YOLOv8] 用YOLOv8实现指针式圆形仪表智能读数(三)

最近研究了一个项目,利用python代码实现指针式圆形仪表的自动读数,并将读数结果进行输出,若需要完整数据集和源代码可以私信。 目录 🍓🍓1.yolov8实现圆盘形仪表智能读数 🙋🙋2.表盘智能读数…

华普检测温湿度监测系统建设方案

一、项目背景 随着医疗行业的蓬勃发展,药品、试剂和血液的储存安全直接关系到患者的健康。根据《药品存储管理规范》、《医疗器械冷链(运输、贮存)管理指南》、《疫苗储存和运输管理规范》和《血液存储要求》等相关法规,医院药剂…

Satellite Communications Symposium(WCSP2022)

1.Power Allocation for NOMA-Assisted Integrated Satellite-Aerial-Terrestrial Networks with Practical Constraints(具有实际约束的 NOMA 辅助天地一体化网络的功率分配) 摘要:天地一体化网络和非正交多址接入被认为是下一代网络的关键组成部分,为…

流畅的python-学习笔记_前言+第一部分

前言 标准库doctest 测试驱动开发:先写测试,推动开发 obj[key]实际调用实例的__getitem__方法 python数据模型 特殊方法 特殊方法一般自己定义,供py解释器调用,不推荐自己手动调用。 对于py内置类型,调用特殊方…

八股文(C#篇)

C#中的数值类型 堆和栈 值类型的数据被保存在栈(stack)上,而引用类型的数据被保存在堆(heap)上,当值类型作为参数传递给函数时,会将其复制到新的内存空间中,因此在函数中对该值类型的修改不会影…

docker学习-docker常用其他命令整理

随便写写,后面有空再更新 镜像命令,容器命令已在之前略有更新,这次不写, 一、后台启动命令 # 命令 docker run -d 容器名 # 例子 docker run -d centos # 启动centos,使用后台方式启动 # 问题: 使用doc…

JS-拖拽位移、放大缩小

对同一盒子拖拽位移、缩放&#xff0c;这其实是不符合js的逻辑的&#xff0c;位移和拖拽必然会互相影响&#xff0c;所以需要在布局上略加调整 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title…

学习笔记:【QC】Android Q : telephony-phone 模块

一、phone init 流程图 高清的流程图参考&#xff1a;【高清图&#xff0c;保存后可以放大看】 二、phone MO 流程图 高清的流程图参考&#xff1a;【高清图&#xff0c;保存后可以放大看】 三、phone MT 流程图 高清的流程图参考&#xff1a;【高清图&#xff0c;保存后可以…

json返回工具类|世界协调时间(UTC)

一、问题 世界协调时间&#xff08;UTC&#xff09;是一个标准的时间参考&#xff0c;通常被用于跨越不同时区的时间标准。要将 UTC 时间转换为中国时间&#xff08;中国标准时间&#xff09;&#xff0c;你需要将时间加上8个小时&#xff0c;因为中国位于 UTC8 时区。 初中知…

智慧手术室手麻系统源码,C#手术麻醉临床信息系统源码,符合三级甲等医院评审要求

手麻系统全套源码&#xff0c;C#手术麻醉系统源码&#xff0c;支持二次开发&#xff0c;授权后可商用。 手术麻醉临床信息系统功能符合三级甲等医院评审要求&#xff0c;实现与医院现有信息系统如HIS、LIS、PACS、EMR等系统全面对接&#xff0c;全面覆盖从患者入院&#xff0c;…

占道经营监测识别摄像机

随着城市化进程的加速和商业活动的不断增加&#xff0c;城市道路上的占道经营现象也变得越来越普遍。为了规范市容市貌、维护交通秩序和保障市民的出行安全&#xff0c;一种名为占道经营监测识别摄像机应运而生&#xff0c;成为城市管理的有效辅助工具。这种占道经营监测识别摄…

一键复制:基于vue实现的tab切换效果

需求&#xff1a;顶部栏有切换功能&#xff0c;内容区域随顶部切换而变化 目录 实现效果实现代码使用示例在线预览 实现效果 如下 实现代码 组件代码 MoTab.vue <template><div class"mo-tab"><divv-for"item in options"class"m…

地图位置的二维码怎么做?在线制作地图二维码的方法

怎么定位一个位置做成二维码呢&#xff1f;随着互联网的不断发展&#xff0c;现在通过扫描二维码来获取导航位置的方式有很多的场景都在应用。这种方式的好处在于其他人都可以通过这个二维码来获取位置&#xff0c;有利于分享。 导航地图二维码可以在电脑的二维码生成器上快速…

教练预约管理小程序开发源码现成案例(小程序、APP、H5圆源码搭建)

随着人们对身体健康越来越重视&#xff0c;对强身健体、健康个性化生活的需求日益增加&#xff0c;健身已成为时尚生活的标志。 然而&#xff0c;没有时间去健身房却成了很多上班族的痛点。健身房作为一项既能缓解工作压力又能缓解学业压力的运动&#xff0c;正好满足了当代人…

C++:map和set类

关联式容器 在初阶阶段&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、 forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面 存储的是元素本身。那什么是关…

《intel开发手册卷1》学习笔记2

1、栈 堆栈&#xff08;见图 6-1&#xff09;是一个连续的内存位置数组。它包含在一个段中&#xff0c;并由 SS 寄存器中的段选择器标识。使用平面内存模型时&#xff0c;堆栈可以位于程序线性地址空间中的任何位置。堆栈最长可达 4 GB&#xff0c;这是段的最大大小。 使用 P…

js原型链与继承笔记

前置阅读&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain js中的“类”是一个函数。function test() {}中&#xff0c;test是由Function生成的。prototype与__proto__的区别&#xff1a; 前者是js函数&#xff08;C…

拔牙护理:让孩子轻松迎接新牙成长的注意事项

引言&#xff1a; 拔牙是儿童成长过程中常见的一环&#xff0c;正确的护理和注意事项对孩子的口腔健康至关重要。本文将详细介绍儿童拔牙的注意事项&#xff0c;帮助家长们更好地照顾孩子的口腔健康。 1. 拔牙前的准备&#xff1a; 在拔牙前&#xff0c;家长应当向孩子解释拔牙…

Unity打开安卓设备不同的设置面板

1&#xff0c;打开安卓设备不同的设置面板&#xff0c;我还贴心的把Android官网的链接放下面了 2&#xff0c;使用也很方便&#xff1a;unity按钮事件上拖这个脚本&#xff0c;注册MyOpenAndroidSettings方法&#xff0c;参数 填 和枚举值相应的数字 // 功能&#xff1a;打开…

试用NXP官方的UDS bootloader

文章目录 1.前言2.资料获取2.1 MCU例程 2.2 开发环境2.3 上位机2.4 硬件 3.工程修改3.1 boot工程修改 3.2 app工程修改4.测试情况5.例程分享 1.前言 最近很多客户在开发S32K系列MCU时咨询是否可以提供基于UDS协议的bootloader。本文以S32K144为例&#xff0c;介绍如何使用NXP官…