一.引入vue-resource

　　通過npm下載vue-resource

//命令行中輸入

npm install vue-resource --save

　　在main.js中引入vue-resource並註冊

// main.js

import VueResource from ‘vue-resource‘ 
Vue.use(VueResource)
 

二.設置aysnc-lineChart-option.js

　　將該曲線圖的沒有數據的option抽取到async-lineChart-option.js中。

　　此代碼在src/echarts/aysnc-lineChart-option.js文件中，代碼如下。

export const option = {
    title: { text: ‘曲線圖‘ },
    backgroundColor: ‘#FBFBFB‘,
    tooltip: {
        trigger:‘axis‘
    },
    xAxis: {
        data: [],
        name: 
 
‘id‘
    },
    yAxis: {},
    series: [{
        name: ‘data‘,
        type: ‘line‘,
        data: [],
        smooth : true,
        itemStyle: {
            normal: {
                color: ‘hotpink‘
            }
        }
    }]
}

三.在Curve.vue中請求數據

　 1.從async-lineChart-option.js中引入option

　　2.在methods中添加drawLineChart()方法

　　3.在mounted()鉤子函數中調用drawBarChart()

　　4.添加加載動畫，在drawLineChart()方法中添加showLoading()和hideLoading()

　　此代碼在src/views/Curve.vue中，代碼如下：

<template>
    <div id="myChart" :style="{width: ‘500px‘, height: ‘400px‘}"></div>
</template>

<script>

    import {option} from ‘../echarts/aysnc-lineChart-option.js‘  //從aysnc-lineChart-option.js中引入option

    export default {
        name: ‘Curve‘,

        mounted() {
            //調用drawLineChart()
            this.drawLineChart();
        },
        data () {
            return {

            }
        },
        methods:{


            drawLineChart() {
                // 基於準備好的dom，初始化echarts實例
                var myChart = this.$echarts.init(document.getElementById(‘myChart‘));
                // 繪制基本圖表
                myChart.setOption(option);

                //顯示加載動畫
                myChart.showLoading();

                //獲取數據
                this.$axios.get(‘/getdate‘).then(res => {

                    //將json對象的所有id數據組成一個數組
                    var id = [];
                    for(let i = 0;i < res.data.length;i++){
                        id.push(res.data[i].id);
                    }

                    //將json對象中的所有data數據組成一個數組
                    var data = [];
                    for(let i = 0;i < res.data.length;i++){
                        data.push(res.data[i].data);
                    }

                    setTimeout(()=>{  //未來讓加載動畫效果明顯,這裏加入了setTimeout,實現300ms延時
                        myChart.hideLoading(); //隱藏加載動畫
                        myChart.setOption({
                            xAxis: {
                                data: id
                            },
                            series: [{
                                 data: data
                            }]
                        })
                    }, 300 )
                })
            },
        },

    };


</script>

<style scoped lang="scss">

    button {
        display: block;
        margin: auto;
        outline:none;
        height: 40px;
        text-align: center;
        width: 130px;
        border-radius:40px;
        background: #fff;
        border: 2px solid #1ECD97;
        color: #1ECD97;
        letter-spacing:1px;
        text-shadow:0;
    font:{
        size:20px;
        weight:bold;
    }
    cursor: pointer;
    transition: all 0.25s ease;
    &:hover {
         color:white;
         background: #1ECD97;
     }
    &:active {
     //letter-spacing: 2px;
         letter-spacing: 2px ;
     }
    }

#myChart{
    display: block;
    margin: auto;
}
</style>

四.效果圖

在vue中使用Echarts畫曲線圖(異步加載數據)