*数据分析时一般都会用到echarts,本来没想过说还要实时更新,后来要求说要实时更新,然后就在网上找了好多资料,总结了,最后出来了
这里我是用 vue 写的
首先 从 echarts 上复制的代码块下来 放到 图表函数中(下面的一系列操作都是在该函数中进行)*
let option = {
// 标题
title: {
text: "空气温度与时间的关系图",
left: "center"
},
// 提示框
tooltip: {
trigger: "axis"
},
// 是否显示工具栏组件
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false }, // 数据视图工具,可以展示当前图表所用的数据,编辑后可以动态更新
magicType: { show: true, type: ["line", "bar"] }, // 动态类型切换
restore: { show: true }, // 重置
saveAsImage: { show: true } // 保存图片
}
},
calculable: true,
// x 轴 表示
xAxis: {
data: []
},
// y 轴 表示
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value} °C"
}
}
],
series: [
// 最高温
{
name: "当前气温",
type: "line",
data: []
}
]
};
**// 初始化 echarts 实例**
var myChart = this.$echarts.init(document.getElementById("空气温度"));
**// 使用刚指定的配置项和绘制图表,数据为 option**
myChart.setOption(option);
**// 数据加载完之前 显示一段简单 的 loading 动画**
myChart.showLoading();
**//从后台获取数据(这里使用axios)**
var dataX = []; // 实际存放 x 轴的 值
var dataV = []; // 实际存放 y 轴的 值
**// 从服务器获取数据**
this.$axios
.get("meteorological/tem")
.then(res => {
// 判断 是否从服务器中获取到了数据
if (res) {
for (var i = 0; i < res.data.length; i++) {
// 拿到数据后 遍历拿到 对应的时间给 x 轴
dataX.push(res.data[i].time.slice(11));
// 拿到数据后, 遍历拿到对应的 温度 给 y 轴
dataV.push(res.data[i].value);
}
**// 隐藏加载动画**
myChart.hideLoading();
// 加载数据图表
myChart.setOption({
xAxis: {
data: dataX
},
series: [
{
data: dataV
}
]
});
}
})
.catch(err => {
console.log(err);
});
**// 实时更新****(每四秒添加数据)**
let timeTicket;
clearInterval(timeTicket);
// 设置定时器,没四秒更新一次数据
timeTicket = setInterval(function() {
*// 获取到图表的 option*
option = myChart.getOption();
let arr = option.series[0].data;
if (arr.length == 30) {
arr.shift(); *// 从队头删除数据*
}
arr.push(Math.round(Math.random() * 5 + 25)); *// 从对尾添加数据*
*// 加载数据 图表*
myChart.setOption(option);
}, 4000);