vue使用Echarts设置数据无效问题记录及解决方法
更新时间：2022年08月09日 09:25:07 作者：接着奏乐接着舞
这篇文章主要介绍了vue使用Echarts设置数据无效问题记录,本文通过场景分析给大家分享解决方法，需要的朋友可以参考下
场景：
做一个动态的柱状图，模拟socket效果，如图所示：
遇到的问题：
元数据格式是这样的：
config: {
data: [
{
name: '义乌市',
value: 169
},
{
name: '东阳市',
value: 123
},
{
name: '武义县',
value: 98
},
{
name: '兰溪市',
value: 75
},
{
name: '金东区',
value: 66
},
],
colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
unit: '单位',
showValue: true
}刚开始试着在mounted钩子里面遍历直接改，页面无变化，但控制台有效。
接着尝试使用map，同上，失败。
接着，使用$set()依然无效。
最终解决方案：
我的思路是：
先定义一个变量接收初始值，然后对这个变量进行一些列的逻辑处理，最后再把这个变量赋值回去给元数据，这样操作下来，以上的问题就解决了，写这个文章的目的就是，如果有时候$set()也不好使的时候可以尝试这个方法。
一句话总结就是，复制元数据，处理后赋值回去。
mounted () {
this.clearTimer = setInterval(() => {
let obj = JSON.parse(JSON.stringify(this.config))
obj.data.forEach((item, index) => {
item.value += parseInt(Math.random() * 20 + 1)
})
this.config = obj
console.log(this.config.data)
}, 5000)
console.log(this.config.data)
},
beforeDestroy () {
clearInterval(this.clearTimer)
},小结：
如果再用echarts的话，要实现此类功能，可能还要重新运行初始化函数
例如：this.init(this.data)
到此这篇关于vue使用Echarts设置数据无效问题记录的文章就介绍到这了,更多相关vue Echarts数据无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vue父子组件元素获取方法互相调用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
下面小编就为大家带来一篇解决Vue编译时写在style中的路径问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue组件从开发到发布的实现步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题。在这里分别分享两种方法，分别在前端vue中解决和在后台springboot中解决。2021-10-10
这篇文章主要介绍了使用vue构建多页面应用的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要为大家介绍了Vue中的数据驱动解释，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
pinia，一个基于Vue3的状态管理库，它可以帮助开发人员管理Vue应用程序的状态，本文主要为大家介绍了Pinia的用法，感兴趣的小伙伴可以跟随小编一起学习一下2023-06-06
这篇文章主要介绍了Vue实现导出excel表格的功能，在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下2018-03-03
最新评论