js处理echarts tooltip定时轮播

echarts tooltip定时轮播

/*** echarts tooltip轮播* @param chart ECharts实例* @param chartOption echarts的配置信息* @param options object 选项* {*  interval    轮播时间间隔,单位毫秒,默认为3000*              true表示循环所有series的tooltip,false则显示指定seriesIndex的tooltip*  seriesIndex 默认为0,指定某个系列(option中的series索引)循环显示tooltip,*              当loopSeries为true时,从seriesIndex系列开始执行。* }* @returns {{clearLoop: clearLoop}|undefined}*/export function loopShowTooltip(myChart, option, num, time) {var defaultData = {// 设置默认值time: 3000,num: 14,}if (!time) {time = defaultData.time}if (!num) {num = defaultData.num}var count = 0var timeTicket = 0// 清除定时器function clearLoop() {if (timeTicket) {clearInterval(timeTicket)timeTicket = 0}myChart.off('mousemove', stopAutoShow)myChart.getZr().off('mousemove', zRenderMouseMove)// myChart.getZr().off('globalout', zRenderGlobalOut);}// 关闭轮播function stopAutoShow() {if (timeTicket) {clearInterval(timeTicket)timeTicket = 0}}function zRenderMouseMove(param) {if (param.event) {// 阻止canvas上的鼠标移动事件冒泡// param.event.cancelBubble = true;}stopAutoShow()}timeTicket && clearInterval(timeTicket)timeTicket = setInterval(function () {myChart.dispatchAction({type: 'downplay',seriesIndex: 0, // serieIndex的索引值   可以触发多个})myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: count,})myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: count,})count++if (count >= num) {count = 0}}, time)myChart.on('mouseover', function (params) {clearInterval(timeTicket)myChart.dispatchAction({type: 'downplay',seriesIndex: 0,})myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: params.dataIndex,})myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: params.dataIndex,})})myChart.on('mouseout', function () {timeTicket && clearInterval(timeTicket)timeTicket = setInterval(function () {myChart.dispatchAction({type: 'downplay',seriesIndex: 0, // serieIndex的索引值   可以触发多个})myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: count,})myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: count,})count++if (count >= 14) {count = 0}}, 3000)})return {clearLoop: clearLoop,}
}

使用

<template><!-- 洪水预演——中间(洪水演进渲染)——水深echarts下面的进度条和echarts --><div class="DepthChart-container"><div class="chart"><EchartsChunk ref="echartRef" :options="options"></EchartsChunk></div><div class="chart2"><EchartsChunk ref="waterChartRef" :options="waterOptions"></EchartsChunk></div></div>
</template><script>
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash'
import { processDataAndSetYAxis } from '@/utils/chartDefault.js'
import { loopShowTooltip } from '@/utils/tooltip-auto-show-vue'
import { fourOptions, waterOptions } from './echarts.config'
export default {name: 'DepthChart',data() {return {timesList: [], // 时间序列options: null,waterOptions: null,tootipTimer: null}},computed: {},watch: {},mounted() {this.getTmList()},beforeDestroy() {if (this.tootipTimer) {clearInterval(this.tootipTimer)this.tootipTimer = null}},methods: {getTmList() {// 模拟30条数据const timesList = []for (let i = 0; i < 28; i++) {const obj = {tm: `2024-04-${i + 1} ${i + 1}:32:00`,jl: (Math.random() * 100).toFixed(2),drp: (Math.random() * 100).toFixed(2),inq: (Math.random() * 100).toFixed(2),otq: (Math.random() * 100).toFixed(2),wl: (Math.random() * 100).toFixed(2),kr: (Math.random() * 100).toFixed(2)}timesList.push(obj)}this.timesList = timesListthis.setChartOptions()this.setWaterOptions()},setChartOptions() {const { timesList } = thislet option = cloneDeep(fourOptions)let { xAxis, series } = optionif (!xAxis) returnif (!timesList.length) {this.options = { ...option }this.$refs.chartRef.setOption(this.options) // 更新echartsreturn}const tms = timesList.map((item) => dayjs(item.tm).format('MM-DD HH:mm'))xAxis[0].data = tmsxAxis[1].data = tmsconst keys = ['drp', 'inq', 'otq', 'wl', 'kr']series.forEach((item, index) => {item.data = timesList.map((item) => item[keys[index]])})const categorizedData = {降雨量: [],水位: [],流量: [],库容: []}series.forEach((item) => {const dataType = item.name.includes('流量')? '流量': item.name.includes('水位')? '水位': item.name.includes('库容')? '库容': '降雨量'categorizedData[dataType].push(...item.data.filter((value) => value))})const updatedOption = processDataAndSetYAxis(categorizedData, option)this.options = { ...updatedOption }const ref = this.$refs.echartRefref.setOption(this.options)this.tootipTimer && this.tootipTimer.clearLoop() // this.tootipTimer 在data里定义this.tootipTimer = 0this.tootipTimer = loopShowTooltip(ref.chart, this.options, 0, 1000)},setWaterOptions() {const { timesList } = thislet option = cloneDeep(waterOptions)let { xAxis, series } = optionif (!xAxis) returnif (!timesList.length) {this.waterOptions = { ...option }this.$refs.waterChartRef.setOption(this.waterOptions) // 更新echartsreturn}xAxis[0].data = timesList.map((item) => item.jl)series[0].data = timesList.map((item) => item.wl)this.waterOptions = { ...option }const ref = this.$refs.waterChartRefref.setOption(this.waterOptions)}}
}
</script><style lang='scss' scoped>
.DepthChart-container {.chart {width: 100%;height: 260px;}.chart2 {width: 100%;height: 130px;}
}
</style>

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

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

相关文章

Electron基础(二) 进程通信的ipcMain、contextBridge、ipcRenderer

1.什么是ipcMain 在 Electron 中&#xff0c;ipcMain是一个非常重要的模块&#xff0c;它负责处理从渲染器进程&#xff08;即 Web 页面&#xff09;发送到主进程&#xff08;即 Electron 应用的后台进程&#xff09;的进程间通信&#xff08;IPC&#xff0c;Inter-Process Co…

使用HTTP代理注意的点

“在网络世界中&#xff0c;HTTP代理扮演着桥梁的角色&#xff0c;帮助用户匿名访问网站、加速网页加载、绕过地区限制等。然而&#xff0c;不当或不安全地使用HTTP代理也可能带来一系列问题。以下是在使用HTTP代理时需要注意的几个关键点。” 一、选择可靠的代理服务商 首先&…

鹰眼应急实时三维重建装备,高质量交付中!

在《2024年地方应急管理科技信息化任务书》的指导和应急管理万亿国债支撑下&#xff0c;全国各地正积极推进应急管理现代化建设&#xff0c;全力提升“数据汇聚服务能力、监测预警能力、指挥调度能力、支撑保障能力”四项应急管理能力。 制定标准化流程规范&#xff0c;保障交…

[Leetcode 47][Medium]-全排列 II-回溯(全排列问题)

目录 一、题目描述 二、整体思路 三、代码 一、题目描述 原题地址 二、整体思路 和上一道Leetcode46相比&#xff0c;有变化的地方是要排除重复组合的情况。那么在组合问题中去除重复组合的方法是先对数组进行排序,然后在回溯函数中判断当前元素与上一个元素是否相同,若相同…

DDS(Data Distribution Service)的数据状态分布和管理简单介绍

1. 数据中心模型 在 DDS 中&#xff0c;数据分发是基于数据中心模型的&#xff0c;而不是消息中心模型。数据中心模型强调数据本身的存在和状态变化&#xff0c;而消息中心模型主要关注消息的传递。通过使用数据中心模型&#xff0c;DDS 可以有效地跟踪每个话题的状态&#xf…

系统架构师考试学习笔记第三篇——架构设计高级知识(11)软件可靠性基础知识

本章知识点&#xff1a; 第11课时主要学习软件可靠性基本概念、建模、管理、设计、测试和评价等内容。本课时内容侧重于概念知识,根据以往全国计算机技术与软件专业技术资格(水平)考试的出题规律,考查的知识点多来源于教材,扩展内容较少。根据考试大纲,本课时知识点会涉及单项选…

赞奇科技与华为云共襄828 B2B企业节,激活数字内容“云”创作

8月28日&#xff0c;在2024中国国际大数据产业博览会上&#xff0c;第三届828 B2B企业节正式开幕&#xff0c;旨在融通数智供需&#xff0c;加速企业智改数转&#xff0c;助推中国数智产业实力再升级。 828 B2B企业节是全国首个基于数字化赋能的企业节&#xff0c;由华为联合上…

python网络爬虫(一)——网络爬虫基本原理

1.使用Beautiful Soup解析网页 通过request库已经抓取到网页源码&#xff0c;接下来要从源码中找到并提取数据。Beautiful Soup是python的一个库&#xff0c;其主要功能是从网页中抓取数据。Beautiful Soup目前已经被移植到bs4库中&#xff0c;也就是说在导入Beautiful Soup时需…

HarmonOS实战开发:Node-API接口适配模块加载指导

Node-API中的napi_load_module_with_info接口的功能是进行模块的加载&#xff0c;当模块加载出来之后&#xff0c;可以使用函数napi_get_property获取模块导出的变量&#xff0c;也可以使用napi_get_named_property获取模块导出的函数&#xff0c;该函数可以在新创建的ArkTs基础…

力扣239题详解:滑动窗口最大值的多种解法与模拟面试问答

在本篇文章中&#xff0c;我们将详细解读力扣第239题“滑动窗口最大值”。通过学习本篇文章&#xff0c;读者将掌握如何在数组中找到每个滑动窗口的最大值&#xff0c;并了解相关的复杂度分析和模拟面试问答。每种方法都将配以详细的解释&#xff0c;以便于理解。 问题描述 力…

SprinBoot+Vue学生选课微信小程序的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平…

C++使用日志库经验总结

1、log4cpp日志源文件路径设置 在 Visual Studio 中&#xff0c;C 项目的日志格式可以通过设置项目的属性来调整。如果你想要使用完整路径来显示诊断消息&#xff0c;可以在项目属性中的“C/C”选项卡下的“高级”属性页中找到“使用完整路径”&#xff08;/FC&#xff09;选项…

探索数字化生态平台的特色功能,开启未来新征程

在数字化浪潮席卷全球的今天&#xff0c;数字化生态平台正以惊人的速度崛起&#xff0c;成为推动经济发展与社会进步的强大引擎。那么&#xff0c;这些平台究竟有哪些独特的特色功能呢&#xff1f;让我们一同深入探索。 首先&#xff0c;我们要明确数字化生态平台的定义。它是利…

ParallelsDesktop19可在任何Mac上运行Windows软件

ParallelsDesktop19是一款Mac虚拟机软件&#xff0c;可在任何Mac上运行Windows&#xff0c;体验不同操作系统之间的无缝集成&#xff0c;并具有创新设计和增强功能&#xff0c;如无密码登录与TouchID、支持macOSSonoma14和增强打印选项。此外&#xff0c;它还支持运行更多Windo…

第二证券:大洗牌!头部券商营收、净利集体下滑

前十券商营收团体下滑&#xff0c;银河证券跌幅最小 新股IPO数量锐减129家至44家&#xff0c;国内证券市场股票基金交易量日均规划 同比下降 6.83%……关于证券公司而言&#xff0c;本年上半年可谓多重要素叠加冲击&#xff0c;成果下滑难以避免。于大多数证券公司而言&#x…

01、echart的基本使用

一 为什么使用echarts 丰富的可视化类型&#xff08;柱状图、散点图、雷达图…&#xff09; 多种数据格式无需转换直接使用 千万数据的前端展现移动端优化 多渲染方案&#xff0c;跨平台 动态数据 绚丽的特效 二echarts快速上手 方式一&#xff1a; 从gi thup中下载ech…

未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序

未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序 或者 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序 Language: C# Database: Access 解决方案&#xff1a; Microsoft.ACE.OLEDB.12.0 官方下载地址 https://www.microsoft.com/en-us/download/details.…

强化学习与深度学习的结合

强化学习与深度学习的结合 目录 一、引言 二、强化学习基础 三、深度学习基础 四、强化学习与深度学习的结合实例 五、总结 一、引言 随着人工智能技术的不断发展&#xff0c;强化学习已经成为了计算机科学领域的一个重要分支。而深度学习作为一种强大的机器学习方…

redroid搭建云手机学习笔记(一)

参考链接 通过Redroid搭建自己的云手机 docker安装 docker官网目前打不开了&#xff0c;通过官网安装的方式无法实现&#xff0c;这里需要借助镜像网站来实现docker的安装 参考链接&#xff1a;https://developer.aliyun.com/mirror/docker-ce # step 1: 安装必要的一些系统…

如何克服编程学习中的挫折感的?

你是如何克服编程学习中的挫折感的&#xff1f; 在编程学习的道路上&#xff0c;遭遇挫折感几乎是每位学习者不可避免的经历。无论是初学者在基础语法上的反复磕碰&#xff0c;还是进阶者在复杂算法、系统设计前的迷茫与困惑&#xff0c;挫折感都是成长路上的一个重要伴侣。然…