echarts多个折线图共用X轴，实现tooltip合并和分离

echarts共享X轴案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.wrap {width: 100%;height: 400px;overflow: hidden;}/* #lineChart {width: 100%;height: 100%;} */</style></head><body><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><div id="lineChart" style="width: 800px; height: 600px"></div><script>myChart = null; // 定义变量用来存放echarts实例xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; // 两个echarts公用的x轴的数据y1Data = [8888, 9999, 7777, 10000, 3334, 7878, 6543]; // 小件货物y2Data = [56, 64, 32, 58, 64, 76, 81]; // 网点负荷y3Data = [88, 99, 77, 100, 21, 66, 95]; // 大件货物// 画图方法let drawEcharts = function () {myChart = echarts.init(document.getElementById('lineChart'));let options = {color: ['#bfa', '#baf', 'pink', '#baf'], // 配置数据颜色grid: [// 配置第一个折线图的位置{left: '14.5%',right: '12%',top: '10%',height: '32%',},// 配置第二个折线图位置{left: '14.5%',right: '12%',top: '50%',height: '32%',},],tooltip: {trigger: 'axis', //axis /item// formatter函数动态修改tooltip样式formatter: function (params) {if (params) {var htmlStr = '';htmlStr += params[0].name.replace(/\-/g, '/') + '<br/>'; //x轴的名称for (var i = 0; i < params.length; i++) {var param = params[i]; // 存一份item项var seriesName = param.seriesName; //图例名称var value = param.value; //y轴值var color = param.color; //图例颜色htmlStr += '<div>';htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';//圆点后面显示的文本htmlStr += seriesName + '：' + value;switch (seriesName) {case '小件货物':htmlStr += ' ' + '件';break;case '网点负荷':htmlStr += ' ' + '%';break;case '大件货物':htmlStr += ' ' + '件';break;default:htmlStr += ' ';}htmlStr += '</div>';}return htmlStr;} else {return;}},backgroundColor: '#ccc',borderWidth: 1,borderColor: '#ccc',padding: 10,textStyle: {color: '#000',fontSize: 12,align: 'left',},hideDelay: 10000, //延时消失时间},legend: {show: true,x: 'center',y: '0',data: ['小件货物', '网点负荷', '大件货物', '网点负荷'],textStyle: {fontSize: 12,},},// 将上下两个tootip合成一个axisPointer: {link: { xAxisIndex: 'all' },},xAxis: [{type: 'category',scale: true,axisLabel: {show: false,},axisTick: {alignWithLabel: true,},splitLine: {show: false,},data: xData, //x轴时间的数据},{gridIndex: 1,type: 'category',scale: true,axisLabel: {fontSize: 10,},axisTick: {alignWithLabel: true,},splitLine: {show: false,},data: xData, //x轴时间的数据},],yAxis: [{type: 'value',name: '件数',nameLocation: 'center',nameGap: 50,nameTextStyle: {fontSize: 12,fontWeight: '500',},axisLabel: {fontSize: 12,},min: function (value) {return parseInt(value.min);},max: function (value) {return parseInt(value.max * 1.05);},scale: false,boundaryGap: [0, '100%'],splitLine: {show: false,},splitNumber: 4, //设置坐标轴的分割段数},{type: 'value',name: '负荷/百分比',nameLocation: 'center',nameGap: 42,nameTextStyle: {fontSize: 12,},axisLabel: {fontSize: 12,},// min: function (value) {//   return parseInt(value.min);// },// max: function (value) {//   return parseInt(value.max * 1.05);// },scale: true,boundaryGap: [0, '100%'],splitLine: {show: false,},splitNumber: 4, //设置坐标轴的分割段数},{type: 'value',name: '件数',nameLocation: 'center',gridIndex: 1,nameGap: 30,nameTextStyle: {fontSize: 12,},axisLabel: {fontSize: 12,},min: function (value) {return parseInt(value.min);},max: function (value) {return parseInt(value.max * 1.05);},scale: true,boundaryGap: [0, '100%'],splitLine: {show: false,},splitNumber: 4, //设置坐标轴的分割段数},{type: 'value',name: '负荷/百分比',nameLocation: 'center',gridIndex: 1,nameGap: 42,nameTextStyle: {fontSize: 12,},axisLabel: {fontSize: 12,},// min: function (value) {//   return parseInt(value.min);// },// max: function (value) {//   return parseInt(value.max * 1.05);// },scale: true,boundaryGap: [0, '100%'],splitLine: {show: false,},splitNumber: 4, //设置坐标轴的分割段数},],dataZoom: [{type: 'inside',startValue: y1Data.length - 4, // 放置最后4个数组endValue: y1Data.length - 1,xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题},],series: [{name: '小件货物',type: 'line',xAxisIndex: 0,yAxisIndex: 0,hoverAnimation: true, // 悬浮的动画加上data: y1Data, //小件货物itemStyle: { normal: { label: { show: true } } },},{name: '网点负荷',type: 'line',xAxisIndex: 0,yAxisIndex: 1,hoverAnimation: true, // 悬浮的动画加上data: y2Data, //网点负荷},{name: '大件货物',type: 'line',xAxisIndex: 1,yAxisIndex: 2,hoverAnimation: true, // 悬浮的动画加上data: y3Data, //大件货物},{name: '网点负荷',type: 'line',xAxisIndex: 1,yAxisIndex: 3,hoverAnimation: true, // 悬浮的动画加上data: y2Data, //网点负荷},],};myChart.setOption(options);// function autoTip() {//     timer = setTimeout(function () {//         //3.0以上版本的showTip使用方式//         //如何让三个点同时显示？//         myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: 0 });//         myChart.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: 1 });//         myChart.dispatchAction({ type: 'showTip', seriesIndex: 2, dataIndex: 2 });//     }, 1000);// }// autoTip();//                 myChart1.group = "group1";// myChart2.group = "group1";// echarts.connect("group1");};drawEcharts();</script></body>
</html>

效果图：

在此基础上，实现tooltip分别显示在各自grid中：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.main {width: 100vw;margin-top: 20px;}#lineChart {position: relative;height: 50vh;overflow: hidden;}#lineChart2 {position: relative;height: 50vh;overflow: hidden;}</style></head><body><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><div class="main"><div id="lineChart" style="width: 800px; height: 250px"></div><div id="lineChart2" style="width: 800px; height: 250px"></div></div><script>myChart = null; // 定义变量用来存放echarts实例xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; // 两个echarts公用的x轴的数据y1Data = [8888, 9999, 7777, 10000, 3334, 7878, 6543]; // 小件货物y2Data = [56, 64, 32, 58, 64, 76, 81]; // 网点负荷y3Data = [88, 99, 77, 100, 21, 66, 95]; // 大件货物// 画图方法let drawEcharts = function () {myChart1 = echarts.init(document.getElementById('lineChart'));myChart2 = echarts.init(document.getElementById('lineChart2'));let options = {color: ['#bfa', '#baf', 'pink', '#baf'], // 配置数据颜色grid: [// 配置第一个折线图的位置{left: '14.5%',right: '12%',// top: '10%',height: '32%',},],tooltip: {trigger: 'axis', //axis /item// formatter函数动态修改tooltip样式formatter: function (params) {if (params) {var htmlStr = '';htmlStr += params[0].name.replace(/\-/g, '/') + '<br/>'; //x轴的名称for (var i = 0; i < params.length; i++) {var param = params[i]; // 存一份item项var seriesName = param.seriesName; //图例名称var value = param.value; //y轴值var color = param.color; //图例颜色htmlStr += '<div>';htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';//圆点后面显示的文本htmlStr += seriesName + '：' + value;switch (seriesName) {case '小件货物':htmlStr += ' ' + '件';break;case '网点负荷':htmlStr += ' ' + '%';break;case '大件货物':htmlStr += ' ' + '件';break;default:htmlStr += ' ';}htmlStr += '</div>';}return htmlStr;} else {return;}},backgroundColor: '#ccc',borderWidth: 1,borderColor: '#ccc',padding: 10,textStyle: {color: '#000',fontSize: 12,align: 'left',},// hideDelay: 10000, //延时消失时间},legend: {show: true,x: 'center',y: '0',data: ['小件货物', '网点负荷'],textStyle: {fontSize: 12,},},xAxis: [{type: 'category',scale: true,axisLabel: {show: false,},axisTick: {alignWithLabel: true,},splitLine: {show: false,},data: xData, //x轴时间的数据},],yAxis: [{type: 'value',name: '件数',nameLocation: 'center',nameGap: 50,nameTextStyle: {fontSize: 12,fontWeight: '500',},axisLabel: {fontSize: 12,},min: function (value) {return parseInt(value.min);},max: function (value) {return parseInt(value.max * 1.05);},scale: false,boundaryGap: [0, '100%'],splitLine: {show: false,},splitNumber: 4, //设置坐标轴的分割段数},{type: 'value',name: '负荷/百分比',nameLocation: 'center',nameGap: 42,nameTextStyle: {fontSize: 12,},axisLabel: {fontSize: 12,},// min: function (value) {//   return parseInt(value.min);// },// max: function (value) {//   return parseInt(value.max * 1.05);// },scale: true,boundaryGap: [0, '100%'],splitLine: {show: false,},splitNumber: 4, //设置坐标轴的分割段数},],dataZoom: [{type: 'inside',startValue: y1Data.length - 4, // 放置最后4个数组endValue: y1Data.length - 1,xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题},],series: [{name: '小件货物',type: 'line',xAxisIndex: 0,yAxisIndex: 0,hoverAnimation: true, // 悬浮的动画加上data: y1Data, //小件货物itemStyle: { normal: { label: { show: true } } },},{name: '网点负荷',type: 'line',xAxisIndex: 0,yAxisIndex: 1,hoverAnimation: true, // 悬浮的动画加上data: y2Data, //网点负荷},],};myChart1.setOption(options);myChart2.setOption(options);// function autoTip() {//     timer = setTimeout(function () {//         //3.0以上版本的showTip使用方式//         //如何让三个点同时显示？//         myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: 0 });//         myChart.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: 1 });//         myChart.dispatchAction({ type: 'showTip', seriesIndex: 2, dataIndex: 2 });//     }, 1000);// }// autoTip();myChart1.group = 'group1';myChart2.group = 'group1';echarts.connect('group1');};drawEcharts();</script></body>
</html>

效果图：

参考： https://codesandbox.io/p/sandbox/series-layout-by-column-or-row-forked-g5vs4p?file=%2Findex.js%3A11%2C1

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

一、提升专注力的完整指南（The Complete Guide to Increasing Your Focus）- Scott Young

一、提升专注力的完整指南（The Complete Guide to Increasing Your Focus）- Scott Young

Focus is one of your most valuable resource.It acts as a multiplier on the value of your time.An hour of absorbing focus can be worth ten times that of a distracted one. 专注力是你的最宝贵的资源之一。它就像一个乘数因子&#xff0c;让时间的价值翻倍。全神贯注…
阅读更多...
＜el-date-picker＞时间戳单位

＜el-date-picker＞时间戳单位

神级操作&#xff0c;搞了半天&#xff0c;秒是大X&#xff0c;毫秒是小x&#xff0c;yue了。 // 秒 <el-date-pickerv-model"timestamp"value-format"X" ></el-date-picker>// 毫秒 <el-date-pickerv-model"timestamp"value-fo…
阅读更多...
DevSecOps核心流程基本组成分析

DevSecOps核心流程基本组成分析

目录 一、DevSecOps核心流程基本组成 1.1 核心流程概述 1.2 DevSecOps 核心流程说明 1.2.1 核心流程图 1.2.2 流程说明 1.2.2.1 持续开发 1.2.2.2 持续构建 1.2.2.3 持续运维 1.2.2.4 持续监控 二、DevSecOps核心流程经典场景 2.1 Azure DevSecOps核心流程 2.1.1 核…
阅读更多...
OpenCV 3 - Mat对象介绍

OpenCV 3 - Mat对象介绍

1 Mat对象与IplImage对象 Mat对象OpenCV2.0之后引进的图像数据结构、自动分配内存、不存在内存泄漏的问题，是面向对象的数据结构。分了两个部分，头部与数据部分lpllmage是从2001年OpenCv发布之后就一直存在，是c语言风格的数据结构，需要开发者自己分配与管理内存，对大的程序…
阅读更多...
HCIA-HarmonyOS设备开发认证-3.内核基础

HCIA-HarmonyOS设备开发认证-3.内核基础

目录 前言目标一、进程与线程待续。。。 前言 对于任何一个操作系统而言&#xff0c;内核的运行机制与原理是最为关键的部分。本章内容从多角度了解HarmonyOS的内核运行机制&#xff0c;涵盖进程与线程的概念&#xff0c;内存管理机制&#xff0c;网络特性&#xff0c;文件系统…
阅读更多...
HTTP连接池在Java中的应用：轻松应对网络拥堵

HTTP连接池在Java中的应用：轻松应对网络拥堵

网络拥堵是现代生活中无法避免的问题&#xff0c;尤其是在我们这个“点点点”时代&#xff0c;网页加载速度直接影响到我们的心情。此时&#xff0c;我们需要一位“救世主”——HTTP连接池。今天&#xff0c;就让我们一起探讨一下&#xff0c;这位“救世主”如何在Java中大显神…
阅读更多...
C 练习实例46-宏#define命令练习

C 练习实例46-宏#define命令练习

宏定义的三种用法&#xff1a; 给变量赋初值替换某一个操作符宏定义函数 代码&#xff1a; #include <stdio.h> #define PI 3.1415926 //给变量赋初值 #define CH * //替换某一个操作符 #define area(a,b) a*b*b //函数 int main() {printf("PI%f\n",PI);…
阅读更多...
力扣151 反转字符串中的单词 Java版本

力扣151 反转字符串中的单词 Java版本

目录 题目描述代码补充知识 题目描述 给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意&#xff1a;输…
阅读更多...
redis持久化知识汇总

redis持久化知识汇总

redis持久化知识汇总 主要分两个持久化方式RDB和AOF RDB RDB是以快照的形式将数据写入二进制文件&#xff0c;可以通过save和bgsave触发&#xff0c;也可以自动化 Save方式是直接在主进程进行持久化操作&#xff0c;缺点就是会导致阻塞服务器。 Bgsave方式会先创建子进程&…
阅读更多...
Blender教程（基础）-初识快捷键-02

Blender教程（基础）-初识快捷键-02

Blender是一款开源的跨平台全能三维动画制作软件&#xff0c;提供从建模、动画、材质、渲染到音频处理、视频剪辑等一系列动画短片制作解决方案。Blender拥有方便在不同工作下使用的多种用户界面。以下是一些常用的Blender快捷键&#xff1a; 全选物体&#xff1a;A 框选物体&…
阅读更多...
Linux下安装openresty

Linux下安装openresty

Linux下安装openresty 十一、Linux下安装openresty11.1.概述11.2.下载OpenResty并安装相关依赖&#xff1a;11.3.使用wget下载:11.4.解压缩:11.5.进入OpenResty目录:11.6.编译和安装11.7.进入OpenResty的目录&#xff0c;找到nginx&#xff1a;11.8.在conf目录下的nginx.conf添…
阅读更多...
2870.使数组为空的最少操作次数

2870.使数组为空的最少操作次数

给你一个下标从 0 开始的正整数数组 nums 。 你可以对数组执行以下两种操作 任意次 &#xff1a; 从数组中选择 两个 值 相等 的元素&#xff0c;并将它们从数组中 删除 。从数组中选择 三个 值 相等 的元素&#xff0c;并将它们从数组中 删除 。 请你返回使数组为空的 最少…
阅读更多...
C# 获取计算机信息

C# 获取计算机信息

目录 一、本机信息 1、本机名 2、获得本机MAC地址 3、获得计算机名 4、显示器分辨率 5、主显示器分辨率 6、系统路径 二、操作系统信息 1、操作系统类型 2、获得操作系统位数 3、获得操作系统版本 三、处理器信息 1 、处理器个数 四、CPU信息 1、CPU的个数 2、…
阅读更多...
【分布式技术专题】「探索高性能远程通信」基于Netty的分布式通信框架实现（附通信协议和代码）（上）

【分布式技术专题】「探索高性能远程通信」基于Netty的分布式通信框架实现（附通信协议和代码）（上）

基于Netty的分布式通信框架实现 前提介绍回顾Dubbo分布式通信框架组成元素程序执行流程消息协议设计实现机制ChannelInboundHandlerAdapter自定义事件处理 ChannelOutboundHandlerAdapter 编(解)码处理器编码过程阶段ChannelOutboundHandlerAdapter序列化实现ChannelOutboundHa…
阅读更多...
wireshark利用sshdump自身组件进行远程实时抓包过滤

wireshark利用sshdump自身组件进行远程实时抓包过滤

引言 以前在不了解wireshark可以远程抓包的时间&#xff0c;经常通过tcpdump在远程linux主机将抓包文件保存下来后&#xff0c;然后拖拽入windows中再打开&#xff0c;进行分析查看。 此过程比较繁琐&#xff0c;也不够实时。比较常用的抓包动作是仅出现某特征的报文后&#…
阅读更多...
秀！巧用字典推导式将列表中的元素“值”转换字典格式

秀！巧用字典推导式将列表中的元素“值”转换字典格式

示例&#xff1a; contact_list [{display_name: 10手机, data1: 1-000-10}, {display_name: 11手机, data1: 1-000-11}, ] 把上面的列表转成下面的字典 contact_dir {10手机: 1-000-10, 11手机: 1-000-11} 巧用字典推导式将列表中的元素转换为所需的字典格式&#xff0c;下…
阅读更多...
数据结构与算法：复杂度

数据结构与算法：复杂度

友友们大家好啊&#xff0c;今天开始正式学习数据结构与算法有关内容&#xff0c;后续不断更新数据结构有关知识内容&#xff0c;希望多多支持&#xff01; 数据结构&#xff1a; 数据结构是用于存储和组织数据的方式&#xff0c;以便可以有效地访问和修改数据。不同的数据结构…
阅读更多...
1.23神经网络框架（sig函数），逆向参数调整法（梯度下降法，链式法则（理解，及处理多层神经网络的方式））

1.23神经网络框架（sig函数），逆向参数调整法（梯度下降法，链式法则（理解，及处理多层神经网络的方式））

框架 输入层 隐藏层 存在一个阈值&#xff0c;如果低于某一阈值就不激活&#xff1b;高于了就激活 输出层 逆向参数调整方法 初始阶段&#xff0c;随机设置权重值w1,w2 依据训练集 两个数学方法 &#xff08;梯度下降、链式法则&#xff09; 调参借助两个数学方法 当导数为…
阅读更多...
2024.1.27 GNSS 学习笔记

2024.1.27 GNSS 学习笔记

1.精确的描述轨道的一组数据(星历)是实现精确定位与导航的基础。 2.GNSS卫星广播星历的提供方式一般有两种&#xff1a;一种是提供开普勒轨道参数和必要的轨道摄动改正项参数&#xff0c;如GPS、BDS、Galileo三大系统采用此种模式&#xff0c;还有QZSS系统&#xff1b;另一种是…
阅读更多...
Spring Cloud 之Config详解

Spring Cloud 之Config详解

大家好&#xff0c;我是升仔 在微服务架构中&#xff0c;统一的配置管理是维护大规模分布式系统的关键。Spring Cloud Config为微服务提供集中化的外部配置支持&#xff0c;它可以与各种源代码管理系统集成&#xff0c;如Git、SVN等。本文将详细介绍如何搭建配置服务器、管理客…
阅读更多...
最新文章

Copyright @ 2022~2023