Vue – 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
方法二：直接调用已经定义的方法，然后给这个方法传值，然后在方法里面把需要动态改变的地方替换成传参的这个变量以达到动态改变数据的目的。