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"] 
                }]
            })

        })

           
        }

大概是情况就是这样了，后端接口返回的数据

结束

当对一个技术点不熟悉的时候就完全是无头苍蝇不知道从哪开始下手，就感觉很难。当这个做出来了之后，回头再看的时候就是很简单了。就应了那句老话“难者不会，会者不难”！所以奔涌吧后浪！