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

現實的工作中, 數據不可能寫死的，所有的數據都應該通過發送請求進行獲取。

所以本項目的需求是請求服務器獲得二維數組，並生成曲線圖。曲線圖的橫縱坐標均從獲得的數據中取得。

Echarts官方文檔：

https://ecomfe.github.io/echarts-doc/public/en/index.html

前端框架使用vue，服務器使用express搭建，交互使用axios 。

一.引入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中，代碼如下：

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

四.效果圖