vue-动态曲线样例

<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>