易网时代-编程资源站
易网时代-编程资源站 思路：
1.获取所有数据
2.截取前10条数据作为初始数据
3.数据依次加载第11条数据，清空第一条数据，以此类推
4.书写一个添加数据方法
getWyjcData() {
this.$axios
.get("http://121.28.209.122:8065/Home/Slope_Device_LXWYJ", {})
.then((result) => {
this.wydata = result.data.dataList;
this.wyjc_name = result.data.DeviceName;
this.drawWyjc();
})
.catch((err) => {
if (err.response) {
const _result = err.response.data;
this.$Message.error(_result.msg);
} else {
this.$Message.error("操作异常，请检查网络！");
}
});
},
//七日位移监测
drawWyjc() {
var datalist = this.wydata; //所有数据
var wyjc_x = [] //x轴的数据
var wyjc_cs = [] //第一条折线数据
var wyjc_jc = [] //第二条折线数据
var wyjc_bh = [] //第三条折线数据
var chartDom = document.getElementById('wyjc');
var myChart = echarts.init(chartDom);
var option;
function addData(shift, newwyjc_x, newwyjc_cs, newwyjc_jc, newwyjc_bh) {
wyjc_x.push(newwyjc_x);
wyjc_cs.push(newwyjc_cs);
wyjc_jc.push(newwyjc_jc);
wyjc_bh.push(newwyjc_bh);
if (shift) {
wyjc_x.shift();
wyjc_cs.shift();
wyjc_jc.shift();
wyjc_bh.shift();
}
}
//初始化10条数据
for (var i = 0; i < 10; i++) {
var newwyjc_x = datalist[i].createDate;
var newwyjc_cs = datalist[i].CSCMT;
var newwyjc_jc = datalist[i].JCCMT;
var newwyjc_bh = datalist[i].BHCMT;
addData(false, newwyjc_x, newwyjc_cs, newwyjc_jc, newwyjc_bh);
}
option = {
grid: {
left: "2%",
right: "7%",
bottom: "4%",
top: "5%",
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff',
// width:1,//这里是为了突出显示加上的
}
},
//使坐标轴刻度与标签对齐
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0,
rotate: -20
},
data: wyjc_x
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
}
},
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
type: 'line',
data: wyjc_cs
},
{
type: 'line',
data: wyjc_jc
},
{
type: 'line',
data: wyjc_bh
}
]
};
option && myChart.setOption(option);
var timesRun = 10; //执行次数
var interval = setInterval(function() {
var that = this;
//所有数据的长度
var length = datalist.length;
timesRun += 1;
//如果执行次数等于数据的长度
if (timesRun === length) {
//停止计数器
clearInterval(interval);
}
var newwyjc_x = datalist[timesRun].createDate;
var newwyjc_cs = datalist[timesRun].CSCMT;
var newwyjc_jc = datalist[timesRun].JCCMT;
var newwyjc_bh = datalist[timesRun].BHCMT;
addData(true, newwyjc_x, newwyjc_cs, newwyjc_jc, newwyjc_bh);
myChart.setOption({
xAxis: {
data: wyjc_x
},
series: [{
type: 'line',
data: wyjc_cs
},
{
type: 'line',
data: wyjc_jc
},
{
type: 'line',
data: wyjc_bh
}
]
});
}, 10 * 1000)
},