标签：Vue 请求 -- 轮询 Echarts xhr 使用 echarts 客户端

1、安装命令
cnpm i -S echarts@2/3/4
2、在入口文件main.js（全局）中配置引用 => 亦可在使用可视化的页面上引入
import echarts from 'echarts'
3、在所需页面进行echarts引入--在ECharts社区网站里选择需要的可视化图形，然后根据要求更改样式，后引用至页面。
引入echarts至页面的步骤
1）echarts实例化
const barCharts = echarts.init(dom节点)
2）绘制echarts图形
const option = { }（此处从option开始都是粘贴过来的echarts源码）
barCharts.setOption(option)

vue+echarts实现数据实时更新 => 实时数据获取方式：轮询、长连接
1、轮询
轮询原理就是客户端以一定的时间间隔向服务端发出请求，频繁的请求保持客户端和服务端同步，这个技术最大的问题就是客户端发出请求和服务器端的更新并不是一致的。
轮询的实现方式是使用定时器和Ajax请求，以特定的时间间隔向服务器发送请求。
优点：后端开发人员编写比较容易 -- 缺点：不间断请求，请求中很大部分是无用的，浪费带宽。
代码实现：
var xhr = new XMLHttpRequest();
setInterval(funciton() {
xhr.open('GET','/user');
xhr.onreadystatechange = function() {}; xhr.send();
}, 1000)
2、推送 -- 长连接
推送也叫长连接。也就是客户端并不是隔一段时间请求一次，而是发起请求后就挂起，一直到服务端有更新的时候，服务器才会主动推送信息到客户端。长轮询是对定时轮询的一种改进，目的是降低无效的网络传输。
长连接实现方式是使用Ajax请求，发送Ajax请求后，服务器会遇到阻塞，直到有消息传递才返回信息。
优点：无消息时不会频繁请求 -- 缺点：要处理高并发问题且消耗资源
代码实现：
function ajax() {
var xhr = new XMLHttpRequest();
xhr.open('GET','/user');
xhr.onreadystatechange = function() {
ajax();
};
xhr.send();
}
方法一：重新实例化一遍ECharts
方法二：直接调用已经定义的方法，然后给这个方法传值，然后在方法里面把需要动态改变的地方替换成传参的这个变量以达到动态改变数据的目的。

标签：Vue,请求,--,轮询,Echarts,xhr,使用,echarts,客户端
来源： https://www.cnblogs.com/tiyou/p/16157858.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。