echarts 多toolti同时触发图表实现

  • 需求背景
  • 解决效果
  • ISQQW代码地址
  • energyChart.vue

需求背景

需要实现同x轴,4个图表的的多图表联动效果,且滑动会触发各个图表的tooltip,即一个图表拥有4个tooltip(目前echarts不支持,我这里绕过了这个问题)

解决效果

ISQQW代码地址

由于ISQQW只能上传一个option对象的图表,故未上传

energyChart.vue

<!--/**
* @author: liuk
* @date: 2023/11/21
* @describe: 能耗分析图表
* @email:https://blog.csdn.net/hr_beginner?spm=1018.2226.3001.5343
*/-->
<template><div ref="chatDom1" class="energyChart"></div><div ref="chatDom2" class="energyChart"></div><div ref="chatDom3" class="energyChart"></div><div ref="chatDom4" class="energyChart"></div>
</template><script lang="ts" setup>
import {ref, onMounted, watch, nextTick} from "vue"
import * as echarts from 'echarts'
import {formatToFixed} from "@/utils/dictionary";// Props
const props = defineProps(['data'])
const myCharts = {// Vue3 使用 proxy 对象代理,而 echarts 则使用了大量的全等(===), 对比失败从而导致了bug。myChart1: null,myChart2: null,myChart3: null,myChart4: null
}const chatDom1 = ref(null)
const chatDom2 = ref(null)
const chatDom3 = ref(null)
const chatDom4 = ref(null)watch(() => props.data, (data) => {nextTick(() => {renderFn(myCharts.myChart1, {xData: data.heatRateHistory.map(item => item.time),yName: '度日数单耗 W/m²·℃',sData: data.heatRateHistory.map(item => formatToFixed(item.heatRate)),markLineVal: data.heatRateHistory[0]?.heatRate3 || 0,color: '#EB8F4A'})renderFn(myCharts.myChart2, {xData: data.flowPowerHistory.map(item => item.time),yName: '电单耗 W/m²',sData: data.flowPowerHistory.map(item => formatToFixed(item.power1)),markLineVal: data.flowPowerHistory[0]?.power3 || 0,color: '#BF97FF'})renderFn(myCharts.myChart3, {xData: data.flowPowerHistory.map(item => item.time),yName: '水单耗 W/m²',sData: data.flowPowerHistory.map(item => formatToFixed(item.flow1)),markLineVal: data.flowPowerHistory[0]?.flow3 || 0,color: "#5690FF"})renderFn(myCharts.myChart4, {xData: data.energyAnalysisData.time,yName: '室外温度 °C',sData: data.energyAnalysisData.tt301_value_val_arr,markLineVal: false,color: '#00CCA3'})})
})onMounted(() => {drawChart(chatDom1.value, 1)drawChart(chatDom2.value, 2)drawChart(chatDom3.value, 3)drawChart(chatDom4.value, 4)echarts.connect('sameControls'); // **相同操作window.addEventListener('resize', () => {renderFn(myCharts.myChart1, {xData: props.data.heatRateHistory.map(item => item.time),yName: '度日数单耗 W/m²·℃',sData: props.data.heatRateHistory.map(item => formatToFixed(item.heatRate)),markLineVal: props.data.heatRateHistory[0]?.heatRate3 || 0,color: '#EB8F4A'})renderFn(myCharts.myChart2, {xData: props.data.flowPowerHistory.map(item => item.time),yName: '电单耗 W/m²',sData: props.data.flowPowerHistory.map(item => formatToFixed(item.power1)),markLineVal: props.data.flowPowerHistory[0]?.power3 || 0,color: '#BF97FF'})renderFn(myCharts.myChart3, {xData: props.data.flowPowerHistory.map(item => item.time),yName: '水单耗 W/m²',sData: props.data.flowPowerHistory.map(item => formatToFixed(item.flow1)),markLineVal: props.data.flowPowerHistory[0]?.flow3 || 0,color: "#5690FF"})renderFn(myCharts.myChart4, {xData: props.data.energyAnalysisData.time,yName: '室外温度 °C',sData: props.data.energyAnalysisData.tt301_value_val_arr,markLineVal: false,color: '#00CCA3'})}, {passive: true});
})const renderFn = (myChart, {xData, yName, sData, markLineVal, color}) => {const option = myChart.getOption()option.xAxis[0].data = xDataoption.xAxis[0].min = nulloption.yAxis[0].name = yNameoption.series[0].name = yNameoption.series[0].data = sDataoption.series[0].color = coloroption.series[0].markLine.data[0].yAxis = markLineValoption.series[0].markLine.data[0].label.color = colorif (markLineVal === false) delete option.series[0].markLineoption.tooltip[0].formatter = (param) => {const data = param[0] || {}const temp = data.data - markLineValconst [name, unit] = yName.split(" ")const nameArr = [{name,num: data.data},{name: '基准年' + name,num: markLineVal},{name: '对比基准年',num: temp}]return `${nameArr.map((item, i) => {return `<p class="energyChart-item"><i class="icon" style="color:${i === 3 ? '#fff' : data.color}">${new Array(1).fill('').map(() => {switch (i) {case 0:return '一'case 1:return '···'case 2:return temp > 0 ? '↑' : '↓'}})[0]}</i><span class="name">${item.name}</span><span>${formatToFixed(item.num)}</span><span>${unit}</span></p>`}).join("")}`}myChart.clear()myChart.setOption(option)
}const drawChart = (chatDom, n) => {let chartDom = chatDomif (chartDom == null) {return}echarts.dispose(chartDom)myCharts['myChart' + n] = echarts.init(chartDom)myCharts['myChart' + n].group = 'sameControls';const option = {grid: [{top: 29,left: 90,right: 90,height: 100},],axisPointer: {type: 'shadow',link: {xAxisIndex: 'all'},},tooltip: {trigger: 'axis',backgroundColor: 'rgba(61,57,48,0.8)',borderColor: 'rgba(149,149,149,0.8)',textStyle: {color: '#fff'},},xAxis: [{data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00'],boundaryGap: false,axisLine: {show: true,onZero: false,},min: 'dataMin',axisTick: {show: true,alignWithLabel: true,},axisLabel: {show: true,color: 'rgba(165,166,166,1)',fontSize: '12',},}],yAxis: [{name: '度日数单耗 W/m²·℃',offset: 20,nameTextStyle: {padding: [0, 0, 0, -10],color: '#fff',fontSize: '14',opacity: 0.7,align: 'left',fontWeight: 'normal'},nameLocation: 'end',position: 'left',axisTick: {show: false},splitLine: {show: true,lineStyle: {type: 'dashed',color: 'rgba(52,52,52,1)'}},axisLine: {show: false,},axisLabel: {show: true,align: 'left',showMinLabel: false,color: 'rgba(165,166,166,1)',fontSize: '14',formatter: (val) => {switch (true) {case val < 1000:return valcase val >= 1e3 && val < 1e4:return (val / 1e3).toFixed(1) + 'k'default:return (val / 1e4).toFixed(1) + 'w'}}},},],series: [{name: '度日数单耗',type: 'line',symbol: 'image://',data: [-1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, -12, 13, 14, 15, 16, 17, 18, 19, -20, 21, 22, -23, 24],markLine: {symbol: "none",silent: true,data: [{yAxis: 5,label: {show: true,position: 'start',color: 'rgba(238,145,75,1)',}}]},lineStyle: {type: 'solid'}},]}option && myCharts['myChart' + n].setOption(option)
}
</script><style lang="scss" scoped>
.energyChart {width: 100%;height: 175px;margin-top: 5px;
}
</style>
<style lang="scss">
.energyChart-item {display: flex;align-items: center;margin: 10px 0;&:last-child {margin-bottom: 0;}.icon {display: inline-block;width: 12px;text-align: center;margin-right: 10px;}.name {display: inline-block;width: 120px;margin-right: 20px;}
}
</style>

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

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

相关文章

做好性能测试计划的4个步骤!全都是精华!【建议收藏】

如何做好一次性能测试计划呢&#xff1f;对于性能测试新手来说&#xff0c;也许你非常熟悉Jmeter的使用&#xff0c;也许你清楚的了解每一个系统参数代表的意义&#xff0c;但是想要完成好一次性能测试任务&#xff0c;并不仅仅是简单的写脚本&#xff0c;加压力&#xff0c;再…

【Seata源码学习 】篇三 TM开启全局事务的过程

【Seata源码学习 】篇三 TM开启全局事务的过程 TM发送 单个或批量 消息 以发送GlobalBeginRequest消息为例 TM在执行拦截器链路前将向TC发送GlobalBeginRequest 消息 io.seata.tm.api.DefaultGlobalTransaction#begin(int, java.lang.String) Overridepublic String begin(…

使用iframe 发现样式错位的解决办法

原理就是默认隐藏 点击的时候&#xff08;或者需要的时候&#xff09;展示出来 方法二 宽高为0

c# Linq 及其扩展方法的使用

public class LinqShow{/// <summary>/// Linq to object(数组、集合&#xff09;--内存里面的数据/// Linq to sql(查询数据库用的&#xff09;--在数据库数据/// Linq XML查询XML文件/// </summary>List<Students> studentsList new List<Students>…

nacos网关

目录 拉取docker镜像 环境配置 网关搭建架构 wemedia-gateway网关配置 依赖 启动类配置 网关yml配置 nacos配置中心配置网关 wdmedia服务配置 依赖 启动类配置 yml配置 nacos配置 nacos中的配置共享 nacos配置 wmedia模块中yml的配置 参考:https://blog.csdn.net/…

Java-抽象类、抽象方法

【1】抽象类和抽象方法的关系&#xff1a; 抽象类中可以定义0-n个抽象方法。 【2】抽象类作用&#xff1a; 在抽象类中定义抽象方法&#xff0c;目的是为了为子类提供一个通用的模板&#xff0c;子类可以在模板的基础上进行开发&#xff0c;先重写父类的抽象方法&#xff0c…

springBoot中starter

springBoot项目中引入starter 项目引入xxljob&#xff0c;仅需要导入对应的starter包&#xff0c;即可进行快速开发 <dependency><groupId>com.ydl</groupId><artifactId>xxl-job-spring-boot-starter</artifactId><version>0.0.1-SNAPS…

深度学习知识点

深度学习过程 data [] for i,d in enumerate(data):image,label d image,label image.cuda(),label.cuda()img net(image)optimizer.zero_grad()#需要将梯度信息清零&#xff0c;因为梯度计算是按照batch分批次计算的&#xff0c;如果这一批batch没清零&#xff0c;会影响…

P1141 01迷宫(dfs+染色联通块)

染色联通块&#xff1a; 一个格联通的所有格 每个对应的最大可联通格子的个数均相同 分析&#xff1a; 1.只需要计算每个块里的元素个数 2.元素标记对应某个块 3.查找元素时&#xff1a; 由 &#xff08;1&#xff09;元素坐标-> &#xff08;2&#xff09;查找…

庖丁解牛:NIO核心概念与机制详解 07 _ 字符集

文章目录 Pre概述编码/解码处理文本的正确方式示例程序Code Pre 庖丁解牛&#xff1a;NIO核心概念与机制详解 01 庖丁解牛&#xff1a;NIO核心概念与机制详解 02 _ 缓冲区的细节实现 庖丁解牛&#xff1a;NIO核心概念与机制详解 03 _ 缓冲区分配、包装和分片 庖丁解牛&…

验证回文串

题目链接 验证回文串 题目描述 注意点 1 < s.length < 200000s 仅由可打印的 ASCII 字符组成将所有大写字符转换为小写字符忽略所有非字母数字字符 解答思路 首先将大写字母转为小写字母&#xff0c;再双指针分别从首尾判断对应位置的字符是否相同&#xff0c;注意当…

Rust9.1 Object-Oriented Programming Features of Rust

Rust学习笔记 Rust编程语言入门教程课程笔记 参考教材: The Rust Programming Language (by Steve Klabnik and Carol Nichols, with contributions from the Rust Community) Lecture 17: Object-Oriented Programming Features of Rust src/main.rs use oop::Draw; use …

Qt存手撸界面

第一步&#xff0c;新建一个项目删除所有与ui相关的代码。 设置窗口大小&#xff1a; setFixedSize(150 1000 30,900); 添加布局、声明界面&#xff1a; #include <QHBoxLayout> QListWidget* pListWidget nullptr;QScrollArea* pScrollArea nullptr;pListWidget…

Linux防火墙常用操作及端口开放

Linux防火墙常用操作及端口开放 1.查看防火墙状态 firewall-cmd --state 2.开启防火墙 systemctl start firewalld.service 3.开启指定端口 firewall-cmd --zonepublic --add-port3306/tcp --permanent firewall-cmd --zonepublic --add-port6379/tcp --permanent 显示success表…

基于springboot实现应急救援物资管理系统项目【项目源码】计算机毕业设计

基于springboot实现应急救援物资管理系统演示 JAVA简介 JavaScript是一种网络脚本语言&#xff0c;广泛运用于web应用开发&#xff0c;可以用来添加网页的格式动态效果&#xff0c;该语言不用进行预编译就直接运行&#xff0c;可以直接嵌入HTML语言中&#xff0c;写成js语言&a…

Centos 里面为什么有的磁盘命名/dev/vda 有的是/dev/sda ?

环境&#xff1a; Centos7.9 问题描述&#xff1a; Centos 里面为什么有的磁盘命名/dev/vda 有的是/dev/sda ? 解决方案&#xff1a; 1.盘命名为/dev/vda或/dev/sda的差异主要取决于系统的安装方式和硬件架构。 /dev/sda是传统的磁盘命名方案&#xff0c;用于标识IDE、S…

centos7配置 局域网自动解析hostname

这样可以让局域网别的电脑直接通过hostname来连接这台电脑。 如果不是windows系统&#xff0c;可以用hostname.local来连接 主要是用到了mdns的功能&#xff0c;需要安装nss-mdns。 vmware下nat模式下&#xff0c;宿主机也可以通过连接hostname使用。 yum install epel-releas…

Qt6 设计工具

Qt 设计工具 QMLLiveQt Quick工具和实用程序Qt CreatorQt Creator ManualQt Design StudioQt Quick Effect MakerQML DebuggerQML ProfilerGammaRaySquishQt Quick CompilerQML Language ServerQt是一个完整的开发框架,其工具旨在简化桌面、嵌入式和移动平台的应用程序和用户界…

「MobileNet V3」70 个犬种的图片分类

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…

每日一题 2216. 美化数组的最少删除数(中等,贪心)

贪心&#xff0c;一开始可能会觉得如果删除前面一个相等的元素时&#xff0c;会导致后面的元素前移&#xff0c;造成产生更多的相等的元素对的情况但是在遍历过程中至少要在相等元素对中删除一个&#xff0c;也可以同时删除两个使得后面的元素奇偶关系不变&#xff0c;但是显然…