<template>
<div>
<div id="myChart1" :style="{width: '500px', height: '300px'}">
</div>
</div>
</template>
<script>
let x = []
let y = []
var n = 0
import * as echarts from 'echarts'
// import http from "@/utils/http";
export default {
name: 'my-Hello',
data () {
return {
rawdata:'',
msg: 'rawData'
}
},
mounted(){
this.drawLine();
this.start();
},
methods: {
drawLine(){
var now = new Date()
// var attention = Math.random()*100
x.push((now.toLocaleTimeString().replace(/^\D*/, "")))
y.push(this.rawdata)
// 基于准备好的dom，初始化echarts实例
let myChart= echarts.getInstanceByDom(document.getElementById('myChart1')); //有的话就获取已有echarts实例的DOM节点。
if (myChart== null) {
myChart= echarts.init(document.getElementById('myChart1'));
}
// let myChart = echarts.init(document.getElementById('myChart1'));
// 绘制图表
myChart.setOption({
title: { text: '脑电数据监测' },
tooltip: {},
xAxis: {
type:'category',
data: x,
boundaryGap: true,
},
yAxis: {},
series: [{
name: '脑电',
type: 'line',
data: y,
}]
});
},
start(){
this.timer = setInterval(()=>{
this.dataGet();
this.drawLine();
n=n+1; //横坐标长度
if(n>10)
{this.dataClean();}
},2000)
},
dataGet(){
//改成http()
http
.GetData()
.then((response) => {
// this.axios.get('http://127.0.0.1:8000/lineUpdate/')
// .then((response)=>{
console.log(response.data.data.attention);
this.rawdata=response.data.data.attention; //改成读取的脑电数据
});
},
dataClean(){
x.shift();
y.shift();
}
}
}
</script>
<style>
</style>
|
