问题:

  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. The Process class relies on proc_open, which is not available on your PHP installation报错解决

    同事laravel框架开发的代码有如下错误日志 production.ERROR: The Process class relies on proc_open, which is not availa ...

  2. linux find命令格式及find命令详解

    本文详细介绍了linux find命令格式及find命令案例,希望对您的学习有所帮助.1.find命令的一般形式为:find pathname -options [-print -exec -ok . ...

  3. Annotation标注

    # View more python tutorials on my Youtube and Youku channel!!! # Youtube video tutorial: https://ww ...

  4. Go的sync

    关于 pool 的由来可以参考: github issues 文章 sync.Pool 的作用及为什么要用到它 Rob Pike 扩展了sync.pool 类型的文档,并且将其目的描述得更清楚: Po ...

  5. 生鲜电商的两极战:巨头VS地头

    ​ ​ "九月蟹黄满,十月蟹肉香",螃蟹年年相似,总是美味无边,但购买渠道却随着互联网普及而变得愈发多样起来.此前,大闸蟹礼券风靡就是最佳代表之一.虽然也引发诸多问题,但消费者也越 ...

  6. log4p踩坑总结

    log4p可以方便的打印格式化日志,在实际应用时,因没有好好理解官网中的配置文件,导致出错了几次. 现总结如下: 1. 安装 pip3 install log4p 2. 查看配置说明,请参考https ...

  7. .Net Core中使用ExceptionFilter

    .Net Core中有各种Filter,分别是AuthorizationFilter.ResourceFilter.ExceptionFilter.ActionFilter.ResultFilter. ...

  8. 配置github——每次提交后使contributions有记录(有小绿格子)

    # 配置github--每次提交后使contributions有记录(有小绿格子) 这几天都有将自己的代码提交到github上,但是在profile里的contributions的表格中没有我提交的记 ...

  9. 前阿里数据库专家总结的MySQL里的各种锁(下篇)

    在上篇中,我们介绍了MySQL中的全局锁和表锁. 今天,我们专注于介绍一下行锁,这个在日常开发和面试中常常困扰我们的问题. 1.行锁基础 由于全局锁和表锁对增删改查的性能都会有较大影响,所以,我们自然 ...

  10. typescript 02 数据类型

    ---恢复内容开始--- 1.数据类型 ts为了使代码更加规范并利于维护,增加了类型校验 提供了以下几种类型 布尔类型 boolean 数字类型 number 字符串类型 string 数组类型 ar ...