echarts 在 vue3 版本中 tooltip 不显示

最新推荐文章于 2025-04-23 14:47:54 发布
最新推荐文章于 2025-04-23 14:47:54 发布
阅读量415 收藏
点赞数
分类专栏： Vue的那些事 文章标签： echarts javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/develop_csdn/article/details/130409449
版权

 

在公司 vue3 的项目中发现之前在vue2中正常使用的 echarts 的 tooltip 不显示了，

最终发现是：vue3 中使用了ref，形成了 Proxy 对象代理，但 echarts 中使用了 === 造成对比失败

解决方法：不要将 echarts 实例包装成响应式对象，也就是避免使用 ref 和 reactive。

改成如下写法：

let chart = null

使用普通变量保存 echarts 实例，即可解决

【Echarts】vue3中echarts的tooltip不显示的问题
前端相关
07-09 664
修改前// 重点if (!// 当窗口大小改变时候，echarts重置大小提示：以下是本篇文章正文内容，下面案例可供参考以上就是今天要讲的内容。
Vue3 + Echarts堆叠折线图的tooltip不显示问题
qq_45569925的博客
07-11 901
使用Echarts在Vue3+Vite项目中绘制堆叠折线图的的时候，tooltip总是不显示，经过很长时间的排查和修改，最后发现是在使用上有错误导致的。
在vue3中使用echarts不显示tooltip问题
兔子的博客
08-11 1934
vue3无法出现tooltip
VUE3中使用echarts，配置都正确，不出现tooltip
最新发布
weixin_43389023的博客
04-23 202
当bvue3中使用echarts，配置都正确，但是不能达到效果，就要考虑定义是否出问题了
Vue3 中 echarts 不显示 tooltip 的问题
Ljwen_的博客
02-28 4645
Vue3 中 echarts 不显示 tooltip 的问题
vue3+ECharts tooltip不显示的问题
ysj_121的博客
01-12 1030
echart的option也设置了tooltip，但并不起作用。
vue3使用echarts图表tooltip不显示
七月❤的博客
03-06 795
【代码】vue3使用echarts图表tooltip不显示。
VUE中ECharts提示框tooltip自动切换
紫水木鱼的博客
07-09 679
使用VUE开发的数据大屏统计，又需要将 echarts的提示框 tooltip 实现自动切换，网上有个很简单的插件（echarts-tooltip-auto-show），使用教程简单分享给大家。自动每隔几秒切换tooltip，鼠标移入则停止并展示当前鼠标所指向的提示框。接着自定义一个参数，用来清除定时器，并写入调用方法（下图中，可清晰看出代码位置）// 自定义参数 用来清除定时器// 可调用clearLoop方法，清除定时器// 调用切换方法。
VUE2中ECharts提示框tooltip自动切换
qq_22187895的专栏
10-30 592
近期使用VUE开发的数据大屏统计，又需要将 echarts的提示框 tooltip 实现自动切换，网上有个很简单的插件（echarts-tooltip-auto-show），使用教程简单分享给大家。自动每隔几秒切换tooltip，鼠标移入则停止并展示当前鼠标所指向的提示框。效果如下图所示插件git：https://gitee.com/bubunuo/echarts-tooltip-auto-show。
在vue中使用echarts
热门推荐
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
03-04 6万+
1、安装
Vue3 echarts tooltip 无法正常显示
黄彪博客
03-17 2580
在开发可视化项目的时候，使用的是 Vue2 自定义的组件（只需要传入 echarts options）就可以联动产生效果，但是，在开发项目使用的是 vue3+vite 技术栈，反复比对 options 没有问题，但是就是没有效果。最终，将自定义组件改为 Vue3的模式，就正常了代码中的备注方便以后自己理解
vue3+echarts绘制折线图鼠标悬浮时不显示tooltips问题
qq_25111883的博客
08-29 1546
解决方法一：设置tooltip的trigger='item'时，可以正常显示，只有trigger: 'axis',异常。1.检查 legend data=[]值是不是和series 里的每个name值一 一 对应，不一样，改成一样。echart实例不能赋值给ref响应式proxy对象，会导致tooltip不显示。是因为创建实例的时候，使用了ref(null)改成shallowRef就好了。两个方法都可以，推荐方法一。
在vue3中echarts不显示tooltip的解决方案
竹子
02-19 5159
适应版本：echarts 5.0.2 原因： 因vue3中使用了Proxy对象代理，但echarts中使用了大量的===造成对比失败。 处理办法：对Proxy对象进行拆箱。 错误代码: <div id="app"> <div id="chart-demo"></div> </div> <script> import { createApp } from 'vue'; import * as echarts from "echarts";
VUE3 Echarts柱状图无法显示Tooltip提示框的问题
MingerOne的博客
12-05 474
今天在开发数据大屏的时候，碰到个柱状图鼠标经过死活不展示Tooltip提示框的问题，但柱状图的代码是从别的项目拷贝过来的，所以确定是能正常使用的柱状图。在网上找了一圈后总算找到了原因，Vue3底层使用了proxy代理创建实例，与Echarts存在兼容性问题。在这种情况下，你需要避免使用。而我刚巧在这个新项目中为了方便柱状图的更新渲染，在外层用了ref定义。等响应式方法创建Echarts对象，而应使用。
Vue3环境下ECharts图表的Tooltip不显示的问题的解决方法
无枫的博客，分享Java及Vue方向的技术文章
04-18 1万+
最近在Vue3.0项目中使用ECharts5.0制作统计图表，发现配置一切正常，但是tooltip无论如何就是无法显示，所以排查了下原因，发现在Vue3.0环境下，使用ECharts5.0+会出现该问题。原因是echarts实例不能由Vue来维护。
Vue3 + Echarts集成时柱状图和折线图的tooltip不显示问题
三劫散仙
03-25 2099
今天在使用echarts绘制一个双图表的数据统计图时候，发现 tooltip 无法显示，经过一番排查，发现是使用上错误导致，如下图所示，鼠标悬浮上不能正确触发tooltip和自定义的 valueFormatter。
解决在echarts中的tooltip提示框在vue3中不显示的问题
qq_51721168的博客
07-26 703
在vue3中不能将echarts实例赋值给响应式数据，用普通变量去接收echarts实例即可，按理说应该是会显示提示框的，但现在的效果是这样的，没有提示框。问题：在setOption中配置了显示提示框，此时已经可以正常显示。这是我在代码中的配置。将代码修改为如下结构。
echarts在vue3中如何使用
12-31
### 如何在 Vue 3 中集成和使用 ECharts #### 安装 ECharts 为了能够在 Vue 3 项目中使用 ECharts，首先需要安装 `echarts` 和 `vue-echarts` 库。这可以通过 npm 或 yarn 来完成。 ```bash npm install echarts vue-echarts ``` 或者 ```bash yarn add echarts vue-echarts ``` 此操作会下载并安装必要的库文件以便后续开发[^1]。 #### 创建 ECharts 组件 接下来，在 Vue 项目的 src/components 文件夹下新建一个名为 `EChartComponent.vue` 的组件用于承载图表逻辑： ```html <template> <div ref="chartRef" style="width: 600px;height:400px;"></div> </template> <script setup> import * as echarts from &#39;echarts&#39;; import { onMounted, ref } from &#39;vue&#39;; const chartRef = ref(null); let myChart; onMounted(() => { if (!chartRef.value) return; myChart = echarts.init(chartRef.value); const option = { title: { text: &#39;ECharts 示例&#39; }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: &#39;销量&#39;, type: &#39;bar&#39;, data: [5, 20, 36, 10, 10, 20] }] }; myChart.setOption(option); }); </script> ``` 这段代码定义了一个简单的柱状图，并将其渲染到了指定的 div 元素内[^3]。 #### 使用自定义组件 最后一步是在应用的主要布局或其他任何地方导入刚刚创建好的 ECharts 组件，并像普通 HTML 标签一样使用它： ```html <!-- App.vue --> <template> <div id="app"> <!-- ...其他内容... --> <EChartComponent /> </div> </template> <script> // 导入刚才创建的 ECharts 组件 import EChartComponent from &#39;./components/EChartComponent.vue&#39; export default { components: { EChartComponent, } } </script> ``` 这样就完成了整个过程，现在应该可以在浏览器里看到正常工作的 ECharts 图表了[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值