Vue折線圖的引用

前言

最近做了一個小的項目，前後端分開的，我本來前端就比較菜，所以搞了好長時間才完成。大家應該也能看出來我些前端的文章比較多，爲什麼呢？因爲前端不會的東西太多了，遇到問題就總結一篇博客，所以相對來說前端的文章比較多一點。

正文

廢話不多說了，直接上效果圖吧
大概就是下圖這樣的。

這是一個完整的折線圖。具體的實現步驟如下：
第一步：先npm安裝echarts
npm install echarts --save

簡單粗暴一點吧，.vue文件如下

<template>
    <!--爲echarts準備一個具備大小的容器dom-->  
    <div>
    <div id="main" style="width: 80%;height: 800px;" ></div>
    <button @click="returnCourse">返回課程列表</button>
   </div>
</template>
<script>
    import echarts from 'echarts'
    import axios from 'axios'
    import { getIntegral } from '../../api/basicUrl'
    export default {
        name: '',
        methods: {
            returnCourse(){
                this.$router.go(-1)
            }, 
            drawLine(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['學生獲得積分1'] 
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        name:"日期",
                        // type:'value',
                        boundaryGap: false,
                        data: []//["1","85","5","20","25","16","57"]
                    
                    },
                    yAxis: {
                        name:"獲得積分",
                        type: 'value',
                        data:[]
                    },

                    series: [{
                        name: '學生獲得積分',
                        type: 'line',
                        stack: '總量',
                        data: []
                    }]
                })
            }
        },
        //調用
        mounted() {
            this.$nextTick(function() {
                this.drawLine('main')
            })
        },
        data() {
            let that=this;
            var studentNum=this.$route.query.studentNumber
            //重點：調用後端接口並返回數據
            getIntegral(studentNum).then(response=>{
            var opinionDataF=[];
            var opinionData=[];
            for (let i = 0; i < response.data.length; i++) {
                opinionDataF.push(String(response.data[i].dateTime))
                opinionData.push(String(response.data[i].integral))
            }
            that.charts.setOption({
                xAxis:{
                    data:opinionDataF
                },
                series:[{
                    data: opinionData//["1","85","5","20","25","16","57"] 
                }]
            })

        })

           
        },
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>

重點講解（我踩的大坑）

出於對vue的不熟悉，所以在前後端連接調試的時候浪費了好長時間。接口的數據都得到了，就是不能在頁面上渲染。經過不懈的努力，和堅持到底的精神。終於是完成了任務。

        data() {
            let that=this;
            //接收上一個界面傳過來的學生學號信息
            var studentNum=this.$route.query.studentNumber
            //重點：調用後端接口並返回數據
            getIntegral(studentNum).then(response=>{
            //定義XY軸的數據
            var opinionDataF=[];
            var opinionData=[];
            //循環接口返回的數據並將數據賦值給XY軸數據
            for (let i = 0; i < response.data.length; i++) {
                opinionDataF.push(String(response.data[i].dateTime))
                opinionData.push(String(response.data[i].integral))
            }
            //最最關鍵的，這個是將前面XY軸兩個數據集渲染到頁面去顯示，這個代碼要結合前邊的代碼去分析。
            that.charts.setOption({
                xAxis:{
                    data:opinionDataF
                },
                series:[{
                    data: opinionData//["1","85","5","20","25","16","57"] 
                }]
            })

        })

           
        }

大概是情況就是這樣了，後端接口返回的數據

結束

當對一個技術點不熟悉的時候就完全是無頭蒼蠅不知道從哪開始下手，就感覺很難。當這個做出來了之後，回頭再看的時候就是很簡單了。就應了那句老話“難者不會，會者不難”！所以奔湧吧後浪！