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.hqwc.cn/news/437731.html

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

相关文章

STM32之IIC总线控制ATC24C04

STM32之IIC总线控制ATC24C04

一、存储器介绍 1、电子密码存储概述 单片机的电子密码存储是一种将密码信息以电子形式存储在单片机内部的技术。它通常用于需要保护敏感信息或限制访问权限的应用程序&#xff0c;如安全系统、门禁系统、电子锁等。 电子密码存储可以通过多种方式实现&#xff0c;以下是其中…
阅读更多...
黑马程序员-瑞吉外卖-day6

黑马程序员-瑞吉外卖-day6

目录 做下面两个功能: 1.写实体类 2. Mapper 3.Service 4.controller 5.将分类管理表的进行分页查询返回给前端 6.套餐分类 7.修改套餐分类 后台系统中可以管理分类信息&#xff0c;分类包括两种类型&#xff0c;分别是 **菜品分类** 和 **套餐分类** 。当我们在后台…
阅读更多...
Nginx负载均衡下的webshell连接

Nginx负载均衡下的webshell连接

一、上传AntSword-Labs-master搭建负载均衡实验环境 搭建好docker环境&#xff0c;并且配置好docker-compose 我的Redhat的docker版本&#xff1a; 查看当前环境下的文件是否正确&#xff1a; 接着执行docker compose up -d 拉取环境 访问成功页面&#xff1a; 进入docker容器…
阅读更多...
图形绘制-仪表盘（2）

图形绘制-仪表盘（2）

本章节我们介绍如何如何绘制刻度对应的数字及指针。效果如下&#xff1a; 关于通过继承重写QWidget的绘制事件paintEvent()&#xff0c;来绘制仪表盘的基础操作&#xff0c;请看上一章节《图形绘制-仪表盘&#xff08;1&#xff09;-CSDN博客》介绍。 在paintEvent()中继续写以…
阅读更多...
【JAVE SE】---运算符和程序逻辑控制语句

【JAVE SE】---运算符和程序逻辑控制语句

1.运算符 算数运算符 - * / % 注意&#xff1a;1.Java的%符号左右两边可以是小数&#xff0c;也可以是负数 //运算符float a1.0f;float b2.0f;float c-1.5f;System.out.println(a%b); //1.0System.out.println(a%c); //1.0 2.Java中除数不可以为0&#xff0c…
阅读更多...
一些著名的软件都用什么语言编写？

一些著名的软件都用什么语言编写？

1、操作系统 Microsoft Windows &#xff1a;汇编 -> C -> C 备注&#xff1a;曾经在智能手机的操作系统&#xff08;Windows Mobile&#xff09;考虑掺点C#写的程序&#xff0c;比如软键盘&#xff0c;结果因为写出来的程序太慢&#xff0c;实在无法和别的模块合并&…
阅读更多...
前端实现弹小球功能

前端实现弹小球功能

这篇文章将会做弹小球游戏&#xff0c;弹小球游戏大家小时候都玩过&#xff0c;玩家需要在小球到达游戏区域底部时候控制砖块去承接小球&#xff0c;并不断的将小球弹出去。 首先看一下实现的效果。 效果演示 玩家需要通过控制鼠标来实现砖块的移动&#xff0c;保证在小球下落…
阅读更多...
burp靶场--CSRF

burp靶场--CSRF

burp靶场–CSRF https://portswigger.net/web-security/csrf#what-is-csrf ### 什么是 CSRF&#xff1f; 跨站请求伪造&#xff08;也称为 CSRF&#xff09;是一种 Web 安全漏洞&#xff0c;允许攻击者诱导用户执行他们不打算执行的操作。它允许攻击者部分规避同源策略&#…
阅读更多...
xcode安装visionOS Simulator模拟器报错解决方法手动安装方法

xcode安装visionOS Simulator模拟器报错解决方法手动安装方法

手动安装方法&#xff1a; 手动下载visionOS Simulator模拟器地址&#xff1a; https://developer.apple.com/download/all/ 选择 Xcode 版本 sudo xcode-select -s /Applications/Xcode.app # 用 Xcode-beta 的话是&#xff1a; # xcode-select -s /Applications/Xcode-beta…
阅读更多...
【ArcGIS微课1000例】0098：查询河流流经过的格网

【ArcGIS微课1000例】0098：查询河流流经过的格网

本实验讲述，ArcGIS中查询河流流经过的格网，如黄河流经过的格网、县城、乡镇、省份等。 文章目录 一、加载数据二、空间查询三、结果导出四、注意事项一、加载数据 加载实验配套数据0098.rar中的河流（黄河）和格网数据，如下图所示： 接下来，将查询河流流经过的格网有哪些并…
阅读更多...
3338 蓝桥杯 wyz的数组IV 简单

3338 蓝桥杯 wyz的数组IV 简单

3338 蓝桥杯 wyz的数组IV 简单 //C风格解法1&#xff0c;通过率50% #include<bits/stdc.h>int main(){std::ios::sync_with_stdio(false);std::cin.tie(nullptr);std::cout.tie(nullptr);int n; std::cin >> n;int ans 0;std::vector<int>a(n);for(auto &am…
阅读更多...
Java语言名字由来

Java语言名字由来

文章目录 一、1990年代初Java雏形初诞生&#xff0c;第一个名称是Greentalk二、创始人办公室前有棵橡树&#xff0c;后来改名叫“oak&#xff08;橡树&#xff09;”三、在家电行业失败进入互联网行业&#xff0c;发现商标被抢注被迫换名四、创始团队成员在喝咖啡时灵机一动&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023