vue使用Echarts设置数据无效问题记录及解决方法

2024-10-16 18:25:36

场景：

做一个动态的柱状图，模拟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+echarts数据可视化大屏展示的实现

获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm
Vue中使用Echarts仪表盘展示实时数据的实现

在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. 第二步: 我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中父组件中 <div class="chart" shadow="always">
Vue联动Echarts实现数据大屏展示

目录 1.安装echarts.js 2.新建vue界面 3.引入 ECharts 4.创建Vue方法和图表信息 5.效果样式 6.通过官网查找自己喜欢的样式 7.组件重复使用 1.组件重复使用定义 2.当前页面数据传递子组件中 1.安装echarts.js npm install echarts --save 2.新建vue界面 <template>  <div :style="{height:height,w
vue+echarts实现数据实时更新

本文实例为大家分享了vue+echarts实现数据实时更新的具体代码,供大家参考,具体内容如下今天在管理后台新增一个图表,用了echarts,记录一下根据数据实时更新安装 npm install echarts --save 然后在main.js中配置一下 import echarts from 'echarts' Vue.prototype.$echarts = echarts 可以了,接下来就是在你需要用的页面写了 // html 宽高还是尽量固定吧,不然会出现一些奇奇怪怪的问题 <d
vue中使用echarts实现动态数据绑定以及获取后端接口数据

目录前言 1.柱状图 2.折线图 3.饼状图 4.地图总结前言之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数
vue使用Echarts设置数据无效问题记录及解决方法

目录场景: 遇到的问题: 最终解决方案: 小结: 场景: 做一个动态的柱状图,模拟socket效果,如图所示: 遇到的问题: 元数据格式是这样的: config: { data: [ { name: '义乌市', value: 169 }, { name: '东阳市', value: 123 }, { name: '武义县', value: 98 }, { name: '兰溪市', value: 75 }, { name: '金东区', value: 66 }, ], colors: ['#e
Vue通过echarts实现数据图表化显示

目录一.项目引入echarts 二.创建容器三.配置图表一.项目引入echarts ecahrts官网官网有许多图表案例,并且可以直接复制对应的配置代码. vue项目中引入: 安装 npm install echarts --save 引入echarts 全部一次性引入: import * as echarts from 'echarts'; 按需引入: // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口. import * as echarts fr
vue data对象重新赋值无效(未更改)的解决方式

vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{},那么后面在方法用普通的js语法赋值会无效这里是data data() { return { model: {} }; } 这里是方法里的普通赋值 afterUpload(response) { this.model.icon = response.url; } 普通方法会无效,需要使用vue提供的方法重新显示声明 afterUpload(response) { this.$set(this.model,'icon',r
vue渲染大量数据时卡顿卡死解决方法

目录 1. 问题描述 2. 常见的解决方案 3. 解决方案流程图 4. 代码 1. 问题描述由于业务需求,需要在一个页面中点击查询按钮时加载出所有的数据,但数据量有近10万条,渲染出现卡顿,页面卡死. 2. 常见的解决方案 - 自定义中间层自定义nodejs中间层,获取并拆分这10w条数据, 前端对接nodejs中间层,而不是服务器缺点:成本高 - 虚拟列表只渲染可视区域DOM,其他隐藏区域不显示,只用div撑起高度,随着浏览器滚动,创建和销毁DOM. 虚拟列表实现起来非常复杂,可借用第
Vue 父子组件的数据传递、修改和更新方法

父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c
vue使用v-if v-show页面闪烁,div闪现的解决方法

在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>
vue 数组和对象不能直接赋值情况和解决方法(推荐)

Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers
Vue 项目中遇到的跨域问题及解决方法(后台php)

问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu
vue.js与element-ui实现菜单树形结构的解决方法

由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID

vue使用Echarts设置数据无效问题记录及解决方法

目录

场景：

遇到的问题：

最终解决方案：

小结：

相关推荐

随机推荐