vue3,使用echart时图表的标签消失

最新推荐文章于 2023-08-08 17:21:15 发布
最新推荐文章于 2023-08-08 17:21:15 发布
阅读量347 收藏
点赞数 3
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MHT_ZJL_/article/details/128332027
版权

这里写自定义目录标题

问题

今天打开项目的echart图，发现展示数据的标签不见了（t图中红线所指）
在这里插入图片描述
如果点击图例时，会发现控制台报错
在这里插入图片描述

发现原因

最终发现时vue3响应式导致的问题
在这里插入图片描述
这里echart的实例myChart我在外层定义为了ref的响应式，这样会把里面的参数包装

问题解决

将myChart定义为非响应式即可

MHT_ZJL_
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
VUE 单页面使用 echart 窗口变化时的用法
11-19
在 VUE 项目中，为了使 echart 在窗口变化时能够自适应，要用到 window.resize = function(){ …….}; 但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ，在里面再次使用 会覆盖掉原来的，所以...
Echarts刷新页面图形会消失
weixin_44640804的博客
11-18 1581
Echartss刷新页面图形会消失
echarts极坐标上label不显示的问题的解决方式
qq_39262820的博客
06-11 2320
上图是
Vue2 Echarts刷新页面图形会消失
weixin_74285634的博客
07-05 1146
如果data是写死的数据，刷新页面是不会出现图形消失的问题；之所以图形消失，是因为数据来自后台服务器。 我个人在做项目的时候，这个Echarts表是单独封装了一个组件，后在vue页面引入。在vue页面的mounted生命周期dispatch对应的action，在组件内部借用mapState辅助函数获取vuex仓库state内存储的数据。
echart的折线图label不显示解决方案
taozi550185271的专栏
10-20 4906
问题现象描述：折线图设置label的show值为true，但是label依然不显示，如下图： 排查步骤： 1、检查symbol是否设置为 symbol:'none', 或者是否 "symbolSize": 0, 解决方案： 如果出现上述排查步骤中所述情况，则对应注释掉symbol:'none',该行或改为 symbol:'circle', "symbolSize": 0.01, 改后效果如下图： ...
echarts柱状图在设置了interval为0强制显示所有标签时，最后一个标签字体加粗
qq_35635091的博客
08-28 1597
这个问题试了一些网上的方法但是失败了，然后我就把引入的echarts.js换成了echarts.min.js就好了，所以最好更新最新版本的
echart在vue3中的使用.zip
最新发布
04-26
echart在vue3中的使用
Vue3 中使用 ECharts 图表库
10-07
Vue3 中使用 ECharts 图表库
eCharts----legend不显示
热门推荐
像梦巧清的博客
12-11 2万+
不显示的原因：配置中的legend的属性 data和另一个属性 series数组中的 name属性不一致； 修改的方法也就不言而语了 只需要对应起来即可 比如 后面太长 只截图部分。...
echarts数据动态变化时legend消失
qq_40816856的博客
09-08 914
echarts数据动态变化时legend消失
echarts中横坐标值显示不全自动隐藏解决方案
Miketutu的博客
04-06 3373
我要显示每天的访问量，但是eachart有个特点，当数据量大的时候，会自动隐藏部分数据，横轴隔天显示，为了解决此方案，采用axisLabel这个属性解决。其中，interval默认是auto，自动隐藏，0是全部显示。如果数据的字段过长，可以采用rotate旋转来处理。
echarts的饼图label显示缺失
darer49的博客
07-27 9746
今天画echarts的图的时候出现了一个非常奇怪的问题，就是在饼图上的label有一个不显示，数据是这样的： 但是画出来的图是这样的： 非常的奇怪，就是“柴油”这一项不显示标签，但是当我label的position属性从outside写成inner的时候，却能够显示成这样： 但是这样完全解决不了问题，因为其他占比更小的又不显示了，所以我就只好回去echarts的属性里面找有什么可以改一改的，毕竟这个问题怎么说都是echarts的bug吧，后来我找到了一个能起作用的属性： ...
vue引用echarts饼图不显示图例以及饼状图隐藏标示线和标示文字（已解决）
蓝胖子的博客
10-13 7374
vue引用echarts饼图不显示图例以及饼状图隐藏标示线和标示文字（已解决）
解决vue3集成echarts数据刷新后图表不刷新问题
三劫散仙
08-08 3054
解决vue3集成echarts数据刷新后图表不刷新问题
vue-echarts 柱状图Y轴Name因为数据过小导致显示不全的问题& legend（图例）和Y轴文字自适应对齐
weixin_42623929的博客
05-17 4923
legend与Y轴name对齐的问题，项目中echart的数量少还好说，可以用legend 的 style来用像素进行定位对齐，但是数量多的时候就只能另辟蹊径了，也是用了一个取巧的方法，我们来改造一下上面的方法。来自定义name，对比上述的其他方法，优势就是不用改变echart图表的样式，保持页面较为美观。导致这个问题产生的原因是，当数据过小时，Y轴的宽度过小，导致Y轴的name无法全部显示。第二，如果Y轴有两个name，且显示legend的时候往往会出现一个问题。我使用的方法是使用echart中的。
解决echarts饼图label显示不全的问题
Terenceno的博客
03-22 7050
【代码】解决echarts饼图label显示不全的问题。
动态生成echarts并控制显示隐藏
m0_54008970的博客
02-22 1086
控制对应图标显示隐藏的方法,目标要和数据源有对应项。echarts容器的数量由数据源控制。创建一个容器用来存放echarts。
关于使用echarts柱状图时，由于缩放或宽度太小引发的坐标轴标签消失问题的解决办法
Eruituoa的博客
07-04 7235
在不设置横向滚动时，当数据条目过多，可能会造成坐标轴里的标签由于宽度不足以放下所有标签，导致部分标签无法渲染出来，如下图： var option= { dataset: { source: [ { name: '2020年7月3日', value: Math.random() * 30 }, { name: '2020年7月4日', value: Math.random() * 30 }, { name: '2.
vue3 使用echart
10-19
在Vue3中使用Echarts，需要先在main.js中引入Echarts，然后在使用页面中注入$echarts。具体步骤如下： 1. 在main.js中引入Echarts：import * as echarts from 'echarts'，然后将其提供给Vue应用：app.provide('$...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值