问题:

  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. 如何卸载烦人的2007组件,windows提供的解决方案

    如何卸载烦人的2007组件:很恶心人各种软件已经手动删除卸载都无法用,不是cd/dvd找不到就是什么msi文件找不到:对于这种恶心的问题,windows提供了如下解决方案:我使用fixit轻松卸载,很 ...

  2. 查漏补缺:C++STL简述(容器部分)

    STL:是Standard Template Library的简称,中文译为标准模板库,是由惠普实验室开发的一系列软件的统称,现为C++的一部分,可分为容器(containers).迭代器(itera ...

  3. Android apk签名详解——AS签名、获取签名信息、系统签名、命令行签名

    Apk签名,每一个Android开发者都不陌生.它就是对我们的apk加了一个校验参数,防止apk被掉包.一开始做Android开发,就接触到了apk签名:后来在微信开放平台.高德地图等平台注册时,需要 ...

  4. AndroidManifest.xml文件详解

    本文为安全专家李洋的最新一篇专栏文章<AndroidManifest.xml文件详解>.AndroidManifest.xml是一个跟安全相关的配置文件,该配置文件是Android安全保障 ...

  5. 快速入门和查询Python

    评分: 4.5 作者: Ryan Lu 类别:Python 时间: 1. 注释 三种方式: 单行注释以 # 开头 多行注释用三个单引号 ''' 将注释括起来 多行注释用三个双引号 "&quo ...

  6. 线程sleep,wait,notify,join,yield方法解析

    线程的五种状态 线程从创建到销毁一般分为五种状态,如下图: 1) 新建 当用new关键字创建一个线程时,就是新建状态. 2) 就绪 调用了 start 方法之后,线程就进入了就绪阶段.此时,线程不会立 ...

  7. FastDfs安装文档

    安装顺序 libfastcommon fdfs_tracker ==> 依赖:Gcc.libevent.perl fdfs_storage FastDFS-nginx-module nginx ...

  8. IDEA打包web项目为war,通过本地Tomcat启动war

    1.打包 ①idea的打包很简单,网上教程也很多,简单说下:project struct-->artifact-->+-->Web Application:Archive--> ...

  9. Git 程序员篇

    关于 Git Git 背后的故事 伟大的作品总是诞生于伟大的时代,正如 Git 同样诞生于一个英雄辈出.极富纷争的年代. 2005 年,Linux 内核开发社区正面临严峻的挑战:他们不能继续使用 Bi ...

  10. 利用GitHub制作在线炫酷简历

    首先我们先体验一下炫酷简历.然后决定我们要不要使用. https://jessezhao1990.github.... 如何使用本项目部署你自己的在线简历 1. 书写简历 在src文件夹里面有个con ...