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 Router，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了vue进入页面加载数据缓慢实现loading提示过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了解决Echarts 显示隐藏后宽度高度变小的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，以及编写过程中自己的错误写法，分享给大家，帮助读者更好的理解Vue.js中的一些设计思想。2016-10-10
这篇文章主要给大家介绍了vue懒加载和子组件懒加载有什么区别,Vue懒加载指的是对图片等资源的延迟加载,而子组件懒加载则是指延迟加载组件实例,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了如何在你的Vue项目中实现累加动画，文中的示例代码简洁易懂，具有一定的参考价值，感兴趣的小伙伴可以了解一下2023-06-06
今天小编就为大家分享一篇关于Vue核心概念Action的总结，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
解决vue无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps
这篇文章主要介绍了解决vue无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因为在此系统上禁止运行脚本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文给大家介绍了vue项目中跨域问题的完美解决方案，通过更改header，使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建），具体内容详情大家跟随脚本之家小编一起学习吧2018-06-06
这篇文章主要介绍了Vue 计数器的实现，主要利用HTML实现步骤现在页面上简单实现一个计数器，内容简单且详细,需要的朋友可以参考一下2021-10-10
最新评论