vue-echarts-动态刷新（前后端交互）

 这里是建立在会基础vue操作和后端操作的基础上，前后端打开后读代码axios进行数据读取。当然环境配置还需要自己配。

 

<template>
  <div>
      <div id="myChart" :style="{width: '300px', height: '300px'}">
      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'my-Hello',
  data () {
    return {
      attention:'',
      meditation:'',
      msg: 'attention and meditation'
    }
  },
  mounted(){
    this.drawBar();
    this.start();
  },
  methods: {
    
    drawBar(){
        // var attention = Math.random()*100
        // var meditation = Math.random()*100
        // 基于准备好的dom，初始化echarts实例
      
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '专注度和放松度' },
            tooltip: {},
            xAxis: {
                data: ['专注度','放松度']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [
              {
                value: this.attention,
                name: "专注度",
              },
              {
                value: this.meditation,
                name: "放松度",
              },
            ],
            }]
        });
        
    },
    start(){
            this.timer = setInterval(()=>{
                this.dataGet();
                this.drawBar();
            },2000)
    },
    dataGet(){
      // const data = this.need
      // const attention = this.need;
      // const meditation = this.need;
      this.axios.get('http://127.0.0.1:8000/lineUpdate/')
        .then((response)=>{
        console.log(response.data);
        console.log(response.data.data.attention);
        this.attention=response.data.data.attention;
        this.meditation=response.data.data.meditation;
        });
      

    },
     
    
    
    

  }
}

</script>

<style>
/* .myChart {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
} */
</style>