问题:

  vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新。

解决办法:

  刚开始以为是vue绑定的数据没有绑定成功,查找资料后发现并不是vue的问题,而是echarts的问题,echarts的数据发生改变时并不会自动刷新,而是需要重新创建这个图表,于是将图表创建部分封装成一个函数,在mounted请求到远程数据后调用这个函数,并将参数以形参的方式传给函数,这样函数图标创建时的数据就是更新后的数据了,再以这个新数据创建图表就能达到理想的效果了。

Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法的更多相关文章

  1. Vue中如何使用axios请求跨域数据

    1.axios不支持jsonp,因为axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净: 2.在使用axios发送请求时,服务器端设置 res.header("Access- ...

  2. 在vue中调用echarts中的地图散点图~

    首先!当然是在vue中引入echarts! 命令行  npm install echarts --save 在main.js文件中里引入        import echarts from 'ech ...

  3. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  4. vue中使用echarts(vue+vue-cli+axios+jsonp+echarts)

    一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...

  5. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  6. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  7. ajax请求回数组数据,Vue页面数组没同步问题

    记录bug 为什么 ajax 获取到了 vm.$data.list 页面上却没有显示出来的? 代码 //页面 <tr v-for="item in list">{{ * ...

  8. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

  9. 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

    今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...

随机推荐

  1. TCP大文件发送案例以及UDP介绍

    基于TCP的大文件发送 #server服务端 import struct import json import os import socket server = socket.socket() # ...

  2. 如何安装及使用honmaple社区程序 · honmaple's blog · 风落花语风落天,花落风雨花落田.

    Table of Contents 1. 如何安装及使用 1.1. 安装需要的package 1.2. 配置config 1.3. 注释下面代码 1.4. 初始化数据库 1.5. 创建管理员账户 2. ...

  3. MAC使用nginx分发80至8080端口

    由于项目必须要启动80端口,但是mac系统中非root用户无法直接使用1024以下的端口 2.释放apache的80端口 由于Mac OS是自带Apache服务的,它本身占用了80端口,首先你需要将A ...

  4. RHEL系统下安装atlassian-jira-5

    操作系统:RHEL 6.4 x86_64 Jira版本:atlassian-jira-5.2.11-x64.bin 安装路径:/opt/atlassian/jira/ 数据保存路径:/opt/atla ...

  5. phpstudy渗透到服务器

    0x00 目标站点www.test.ichunqiu 0x01 尝试登陆系统 -尝试弱密码登陆 结果:forbidden!!! -尝试万能账号密码登陆 1‘ or 1=1--+ 和 1‘ or 1=1 ...

  6. SpringBoot图文教程9—SpringBoot 导入导出 Excel 「Apache Poi」

    有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+ ...

  7. Vue+Axios+iview+vue-router实战管理系统项目

    项目实现登陆验证,iviewui组件使用,vue-router路由拦截,在删除登陆存储的token后,直接路由进登陆页面,实战数据请求,本地data.json,笔者也是初出茅庐,在项目运行后,会一直c ...

  8. 微信小程序学习 动手撸一个校园网小程序

    动手撸一个校园网微信小程序 高考完毕,想必广大学子和家长们都在忙着查询各所高校的信息,刚好上手微信小程序,当练手也当为自己的学校做点宣传,便当即撸了一个校园网微信小程序. 效果预览 源码地址:Gith ...

  9. 【MySQL 原理分析】之 Explain & Trace 深入分析全模糊查询走索引的原理

    一.背景 今天,交流群有一位同学提出了一个问题.看下图: 之后,这位同学确实也发了一个全模糊查询走索引的例子: 到这我们可以发现,这两个sql最大的区别是:一个是查询全字段(select *),而一个 ...

  10. 峰哥说技术:09-Spring Boot整合JSP视图

    Spring Boot深度课程系列 峰哥说技术—2020庚子年重磅推出.战胜病毒.我们在行动 09  峰哥说技术:Spring Boot整合JSP视图 一般来说我们很少推荐大家在Spring boot ...