vue使用Echarts设置数据无效问题记录

简介: vue使用Echarts设置数据无效问题记录

场景:


做一个动态的柱状图,模拟socket效果,如图所示:

34fc665bb0f44e95af925b5363f1daad.gif

遇到的问题:


元数据格式是这样的:

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)

相关文章
|
14天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`<li v-for="activity in activities">`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
71 5
|
7天前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
50 3
ECharts综合案例一:近七天跑步数据
|
8天前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts展示近七天跑步数据,结合雷达图和折线图揭示运动表现。雷达图多维度呈现全程距离、速度和时间,对比平均指标;折线图清晰展示里程趋势。图表具有交互性和动画效果,通过[代码地址](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454698)可获取详情。#ECharts #跑步数据 #数据可视化 #雷达图 #折线图
27 3
ECharts综合案例一:近七天跑步数据
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
12 1
|
16天前
|
JavaScript
vue数据的双向绑定
vue数据的双向绑定
|
21天前
|
JavaScript 容器
|
21天前
|
JavaScript
|
3天前
|
JavaScript Apache CDN
Vue项目使用ECharts实现图表
Vue项目使用ECharts实现图表
13 0