前端-echarts5.0 tooltip不显示问题

在echarts官网完成绘制后,将配置复制到本地,结果tooltip无法显示。

项目使用vue3,echarts5.0,代码写的是vue2。

option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},legend: {data: ['完工数量', '完成率']},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '数量',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '完成率',min: 0,max: 25,interval: 5,axisLabel: {formatter: '{value} °C'}}],series: [{name: '完工数量',type: 'bar',tooltip: {valueFormatter: function (value) {return value + ' ml';}},barWidth: '40%', // 修改柱子宽度// 或者使用 barCategoryGap 设置类目间柱子的间距(例如:'20%')// barCategoryGap: '20%'itemStyle: {color: '#1890ff' // 设置柱子颜色为淡蓝色},label: {show: true, // 显示数据标签position: 'top' // 数据标签显示在柱子顶部},data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name: '完成率',type: 'line',yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + ' °C';}},itemStyle: {color: '#faad14' // 设置柱子颜色为淡蓝色},label: {show: true, // 显示数据标签position: 'top' // 数据标签显示在柱子顶部},data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]
};

排查了半天问题,发现这部分代码不正确。

    this.myChart1 = echarts.init(this.$refs.topL);this.option1 && this.myChart1.setOption(this.option1);this.myChart2 = echarts.init(this.$refs.topR);this.option2 && this.myChart2.setOption(this.option2);let myChart3 = echarts.init(this.$refs.bottom);this.option3 && myChart3.setOption(this.option3);

如果将myChart定义在了data()里面,那么tooltip就会不显示。

需要通过let来定义,就可以显示了。

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

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

相关文章

ui自动化selenium,清新脱俗代码,框架升级讲解

一:简化 1. 新建common 包 新建diver.py 封装浏览器驱动类 from selenium import webdriverclass Driver():"""浏览器驱动类定义 一个【获取浏览器驱动对象driver的方法】。支持多种类型浏览器"""def get_driver(self,browser_typ…

《扩散模型 从原理到实战》Hugging Face (三)

第四章 Diffusers 实战 安装Difffusers 库 pip install -qq -U diffusers datasets transformers accelerate ftfy pyarrow扩散模型调度器 from diffusers import DDPMScheduler noise_scheduler DDPMScheduler(num_train_timesteps1000)定义扩散模型 from diffusers impo…

二维码展示与下载

1. 二维码展示(前端展示) 基于vue-qr组件实现 下载vue-qr组件 npm install vue-qr --save页面vueqr组件导入 import VueQr from vue-qr;export default {components: {VueQr} }页面展示 <el

VS安装FFmpeg库

在Visual Studio中安装FFmpeg库通常涉及以下步骤: 下载FFmpeg:访问FFmpeg官网(https://ffmpeg.org/download.html)下载对应于您的操作系统的预编译二进制文件。 解压FFmpeg:将下载的压缩包解压到您选择的目录。 配置系统环境变量:将FFmpeg的bin目录添加到系统的PATH环境变…

JimuReport 积木报表 v1.7.6 版本发布,免费的低代码报表

项目介绍 一款免费的数据可视化报表工具&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完…

Python构造TCP三次握手、传输数据、四次挥手pcap数据包并打乱顺序

Python构造数据包&#xff0c;包含&#xff1a; TCP三次握手、 传输数据、 四次挥手 实现 随机乱序TCP数据包 from scapy.all import * from scapy.all import Ether, IP, TCP, UDP, wrpcap from abc import ABC, abstractmethod import random import dpkt from scapy.all…

6月18日(周二)美股行情总结:纳指七日连创新高,英伟达市值全球第一,苹果微软回落,油价七周最高

美国5月零售销售意外走软&#xff0c;尽管一众美联储官员均鹰派发声支持多等待通胀数据再做决策&#xff0c;市场仍抬升对年内降息两次的押注。标普500指数在七天里第六天上涨并再创新高&#xff0c;标普科技板块连续七天创新高、期间累涨8.6%&#xff0c;道指一周高位&#xf…

MySQL----慢查询日志

慢日志 MySQL可以设置慢查询日志&#xff0c;当SQL执行的时间超过我们设定的时间&#xff0c;那么这些SQL就会被记录在慢查询日志当中&#xff0c;然后我们通过查看日志&#xff0c;用explain分析这些SQL的执行计划&#xff0c;来判定为什么效率低下。 查看相关信息 show va…

Oracle Database 23ai 创建新用户

Oracle Database 23ai 创建新用户 1. 创建新用户2. 配置 cohere 认证 1. 创建新用户 sqlplus syslocalhost:1521/orclpdb1 as sysdbaCreate bigfile tablespace tbs100 Datafile bigtbs_f100.dbf SIZE 1G AUTOEXTEND ON next 32m maxsize unlimited extent management local …

iOS 18 终于更新了 iOS 隐藏 App 功能,这次是真的隐藏

如何锁定或隐藏 App 我们一起来看看 iOS 如何隐藏软件&#xff0c;下面是具体的操作步骤&#xff1a; iOS 隐藏 App 的第一步肯定是找到你想隐藏或锁定的应用程序&#xff0c;然后长按它的图标&#xff0c;在长按之后出现的选项中我们选择“需要 Face ID”。 然后在新弹出的选…

web版的数字孪生,选择three.js、unity3D、还是UE4

数字孪生分为客户端版和web端版&#xff0c;开发引擎多种多用&#xff0c;本文重点分析web端版采用哪种引擎最合适&#xff0c; 贝格前端工场结合实际经验和网上主流说法&#xff0c;为您讲解。 一、数字孪生的web版和桌面版 数字孪生的Web版和桌面版是数字孪生技术在不同平台…

Mamba: Linear-Time Sequence Modeling with Selective State Spaces论文笔记

文章目录 Mamba: Linear-Time Sequence Modeling with Selective State Spaces摘要引言 相关工作(SSMs)离散化计算线性时间不变性(LTI)结构和尺寸一般状态空间模型SSMs架构S4(补充)离散数据的连续化: 基于零阶保持技术做连续化并采样循环结构表示: 方便快速推理卷积结构表示: 方…

对SpringBoot入门案例的关键点

我们SpringBoot的入门案例中&#xff0c;即做了两个重要工作&#xff1a; 配置pom.xml文件写启动类 1.pom.xml依赖配置文件 ①帮助我们进行版本控制的父模块 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter…

Inpaint_2024软件最新版下载-inpaint下载安装2024-inpaint下载最新版本

众多使用者向我们证明了高效去除背景无关游客&#xff0c;只需要花费几秒钟在照片上选择不必要的对象或人员&#xff0c;剩下的交给Inpaint。准确来讲快速去水印&#xff0c;用Inpaint,选中水印&#xff0c;一键清除&#xff0c;还你一个干净整洁的图形。我们都知道快速去水印&…

【2024】kafka streams的详细使用与案例练习(2)

目录 前言使用1、整体结构1.1、序列化 2、 Kafka Streams 常用的 API2.1、 StreamsBuilder2.2、 KStream 和 KTable2.3、 filter和 filterNot2.4、 map 和 mapValues2.5、 flatMap 和 flatMapValues2.6、 groupByKey 和 groupBy2.7、 count、reduce 和 aggregate2.8、 join 和 …

基于EasyAnimate模型的视频生成最佳实践

EasyAnimate是阿里云PAI平台自主研发的DiT的视频生成框架&#xff0c;它提供了完整的高清长视频生成解决方案&#xff0c;包括视频数据预处理、VAE训练、DiT训练、模型推理和模型评测等。本文为您介绍如何在PAI平台集成EasyAnimate并一键完成模型推理、微调及部署的实践流程。 …

shader的优化,specialization constants

volkan specialization_constants 与Uniform buffer objects (UBOs) 和 Push constants不同的是 specialization constants 可以在shader编译前设置控制量&#xff0c;从而能够删除无用代码和静态展开循环( remove unused code blocks and statically unroll)。不但缩减shader…

【Python特征工程系列】基于方差分析的特征重要性分析(案例+源码)

这是我的第304篇原创文章。 一、引言 方差分析&#xff08;Analysis of Variance&#xff0c;简称ANOVA&#xff09;是一种统计方法&#xff0c;用于比较两个或多个组之间的平均值是否存在显著差异。 方法简介&#xff1a; ANOVA 通过分解总方差为组间方差和组内方差&#x…