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

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

1.  
   <template>
2.  
   <div>
3.  
   <div id="myChart" :style="{width: '300px', height: '300px'}">
4.  
   </div>
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   import * as echarts from 'echarts'
10.  
    export default {
11.  
    name: 'my-Hello',
12.  
    data () {
13.  
    return {
14.  
    attention:'',
15.  
    meditation:'',
16.  
    msg: 'attention and meditation'
17.  
    }
18.  
    },
19.  
    mounted(){
20.  
    this.drawBar();
21.  
    this.start();
22.  
    },
23.  
    methods: {
24.  
     
25.  
    drawBar(){
26.  
    // var attention = Math.random()*100
27.  
    // var meditation = Math.random()*100
28.  
    // 基于准备好的dom，初始化echarts实例
29.  
     
30.  
    let myChart = echarts.init(document.getElementById('myChart'))
31.  
    // 绘制图表
32.  
    myChart.setOption({
33.  
    title: { text: '专注度和放松度' },
34.  
    tooltip: {},
35.  
    xAxis: {
36.  
    data: ['专注度','放松度']
37.  
    },
38.  
    yAxis: {},
39.  
    series: [{
40.  
    name: '销量',
41.  
    type: 'bar',
42.  
    data: [
43.  
    {
44.  
    value: this.attention,
45.  
    name: "专注度",
46.  
    },
47.  
    {
48.  
    value: this.meditation,
49.  
    name: "放松度",
50.  
    },
51.  
    ],
52.  
    }]
53.  
    });
54.  
     
55.  
    },
56.  
    start(){
57.  
    this.timer = setInterval(()=>{
58.  
    this.dataGet();
59.  
    this.drawBar();
60.  
    },2000)
61.  
    },
62.  
    dataGet(){
63.  
    // const data = this.need
64.  
    // const attention = this.need;
65.  
    // const meditation = this.need;
66.  
    this.axios.get('http://127.0.0.1:8000/lineUpdate/')
67.  
    .then((response)=>{
68.  
    console.log(response.data);
69.  
    console.log(response.data.data.attention);
70.  
    this.attention=response.data.data.attention;
71.  
    this.meditation=response.data.data.meditation;
72.  
    });
73.  
     
74.  
     
75.  
    },
76.  
     
77.  
     
78.  
     
79.  
     
80.  
     
81.  
    }
82.  
    }
83.  
     
84.  
    </script>
85.  
     
86.  
    <style>
87.  
    /* .myChart {
88.  
    display: flex;
89.  
    flex-wrap: wrap;
90.  
    justify-content: space-around;
91.  
    } */
92.  
    </style>

这篇好文章是转载于：学新通技术网