echarts手动触发气泡的显示和隐藏

点击echarts图表后将点击的那个进行突出显示

<template><div id="demo"> </div><el-button type="primary" @click="set">设置</el-button><el-button type="primary" @click="cancel">取消</el-button>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';const myChart = ref();onMounted(() => {const chart = document.getElementById('demo');myChart.value = echarts.init(chart);const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',shadowStyle: {color: 'rgba(150,150,150,0.6)'}}},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'},{data: [110, 230, 264, 280, 125, 147, 160],type: 'line'}]};myChart.value.setOption(option);
});// 设置第二个显示提示框
const set = () => {myChart.value.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: 1// position: 'top'});
};
// 取消
const cancel = () => {// 隐藏 tooltipmyChart.value.dispatchAction({ type: 'hideTip' });// 隐藏 axisPointermyChart.value.dispatchAction({type: 'updateAxisPointer',currTrigger: 'leave'});
};
</script><style scoped>
#demo{width: 500px;height: 400px;
}
</style>

注意点

myChart.value.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: 1// position: 'top'
});
  • seriesIndex ,series的下标,对应options 对象里的series ,一般情况下写0就行。
  • dataIndex,数据的下标
  • position ,气泡显示的位置

项目的问题,官方示例中,当鼠标移入后,气泡和阴影会同时显示,如下图。但是在demo中只有阴影显示了。如果将 trigger: 'axis',设置为 trigger: 'item',就只会显示气泡而不会显示阴影。

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

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

相关文章

集群部署篇--Redis 集群分片模式

文章目录 前言一、Redis 分片集群介绍1.1 介绍&#xff1a;1.2 工作机制&#xff1a;1.2.1 节点&#xff1a;1.2.2 槽 slot&#xff1a;1.2.3 故障转移&#xff1a; 二、Redis 分片集群搭建:2.1 配置文件&#xff1a;2.2 redis 部署&#xff1a;2.3 redis 集群创建&#xff1a;…

图像分割实战-系列教程9:U2NET显著性检测实战1

&#x1f341;&#x1f341;&#x1f341;图像分割实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 U2NET显著性检测实战1 1、任务概述

安全数据交换系统:有效提升网间文件交换能力

各级政府部门和金融、能源、电力这些行业&#xff0c;以及一些大中型企业组织&#xff0c;为了保护内部的重要数据不外泄&#xff0c;普遍都采用了多网络并行的方式&#xff0c;也是做了网络隔离划分&#xff0c;不同的网络拥有不同的密级以及人员权限。然后再通过安全数据交换…

【C++学习】:命名空间、输入输出和缺省参数全面解析

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; C入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. 命名空间1.1 为什么需要命名空间&#xff1f;1.2 命名空间的定义1.3 命名空间特性1…

GC6236,GC6208,GC6209镜头驱动芯片选型,多应用于摄像机镜头,家庭监控云台驱动等产品中

国产芯片GC6236&#xff0c;GC6208&#xff0c;GC6209 为5V摄像机镜头驱动芯片&#xff0c;电压范围在3~5.5(V)&#xff0c;最大持续电流可达0.8(A)最高工作温度在-40~100之间。其特点都具有5V多通道&#xff0c;低噪步进电机驱动和霍尔自动光圈驱动等。可应用在摄像机镜头,家庭…

千里马2023年终总结-android framework实战

背景&#xff1a; hi粉丝朋友们&#xff1a; 2023年马上就过去了&#xff0c;很多学员朋友也都希望马哥这边写个年终总结&#xff0c;因为这几个月时间都忙于新课程halsystracesurfaceflinger专题的开发&#xff0c;差点都忘记了这个事情了&#xff0c;今天特别花时间来写个bl…

混合编程—C++程序中python脚本的嵌入方法(理论部分)

一、C与Python高级编程语言简概 &#xff08;一&#xff09;C C是一种被广泛使用的计算机程序设计语言。它是一种通用程序设计语言&#xff0c;支持多重编程范式&#xff0c;例如过程化程序设计&#xff08;Procedural programming&#xff09;、面向对象程序设计&#xff08;…

大数据背后的绿色收割:基于Hadoop的农产品价格信息智能分析

大数据背后的绿色收割&#xff1a;基于Hadoop的农产品价格信息智能分析 引言正文1. 数据获取与准备2. 数据清洗与处理3. Hadoop数据分析引擎的运用4. MySQL数据库的集成5. 创新性的可视化6. 结论与展望 结语 引言 随着信息技术的不断发展&#xff0c;农业领域也在数字化的浪潮…

electron预加载脚本

webPreferences 指定预加载脚本,可以使用部分node脚本 webPreferences: {preload: path.join(__dirname, "preload.js"),},创建preload.js 中 测试文件读取功能 const fs require(fs) const text fs.readFileSync(package.json, utf-8)console.log(text)报错,为了…

云计算复习提纲

第一章 大数据的概念&#xff1a;海量数据的规模巨大到无法通过目前主流的计算机系统在合理时间内获取、存储、管理、处理并提炼以帮助使用者决策 大数据的特点&#xff1a;①数据量大&#xff0c;存储的数据量巨大&#xff0c;PB级别是常态&#xff1b;②多样&#xff0c;数…

SpringBoot快速集成多数据源(自动版)

有些人因为看见所以相信&#xff0c;有些人因为相信所以看见 有目录&#xff0c;不迷路 前期准备实现演示参考 最近研究了一下多数据源&#xff0c;这篇博客讲的是简单模式&#xff0c;下篇博客预计写自动切换模式 前期准备 本篇博客基于SpringBoot整合MyBatis-plus&#xff0…

vue保姆级教程----深入了解Vuex的工作原理

&#x1f4e2; 鸿蒙专栏&#xff1a;想学鸿蒙的&#xff0c;冲 &#x1f4e2; C语言专栏&#xff1a;想学C语言的&#xff0c;冲 &#x1f4e2; VUE专栏&#xff1a;想学VUE的&#xff0c;冲这里 &#x1f4e2; CSS专栏&#xff1a;想学CSS的&#xff0c;冲这里 &#x1f4…

Gen-AI 的知识图和分析(无需图数据库)

如今&#xff0c;图表比以往任何时候都更加相关和有用。由于目前正在发生的人工智能革命&#xff0c;工程师们正在考虑围绕 Gen-AI 的机会&#xff0c;利用具有动态提示、数据基础和屏蔽功能的开放 Gen-AI 解决方案&#xff0c;这进一步促使他们思考知识图谱等有效的解决方案。…

Ansible自动化运维(一)简介及部署、清单

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

Vue2 - Vue.observable 介绍

目录 1&#xff0c;介绍2&#xff0c;使用场景和 Vue 实例的区别 1&#xff0c;介绍 官网参考 可以让一个对象变成响应式数据。在 Vue 内部就是用它来处理传递给 Vue 的 data 对象&#xff0c;或是在单文件组件中 data() 返回的对象。 var vm new Vue({data: {count: 0} })…

MySQL数据库学习二

2 MySQL InnoDB 锁的基本类型 https://dev.mysql.com/doc/refman/5.7/en/innodb-locking.html 官网把锁分成了 8 类。所以我们把前面的两个行级别的锁&#xff08;Shared and ExclusiveLocks&#xff09;&#xff0c;和两个表级别的锁&#xff08;Intention Locks&#xff09;…

游泳耳机到底怎么选?一文说全游泳耳机哪个好!

对于一个热爱游泳的人&#xff0c;每次游泳都希望找到一种好的方式来打发时间&#xff0c;同时也希望能够得到一些锻炼。在尝试了各种游泳装备之后&#xff0c;发现游泳耳机是一个非常不错的选择&#xff0c;不过市面上的游泳耳机鱼龙混杂&#xff0c;所以游泳耳机的选择需要综…

深度学习|2.11 向量化vectorization

2.11 向量化的作用 向量化可以使得向量中的每一个维度的数据进行并行计算&#xff0c;从而加快了神经网络的计算速度。 验证 其他

超市订单管理系统

比较简单的超市订单管理系统

4.28 构建onnx结构模型-Unfold

前言 构建onnx方式通常有两种&#xff1a; 1、通过代码转换成onnx结构&#xff0c;比如pytorch —> onnx 2、通过onnx 自定义结点&#xff0c;图&#xff0c;生成onnx结构 本文主要是简单学习和使用两种不同onnx结构&#xff0c; 下面以 Unfold 结点进行分析 方式 方法…