首先是后端：
主要用到的是Echarts的折线图，其中需要后端传过来的数据，就是横轴和纵轴的数据，在后端，我拿到了对象的List集合，新建了两个List用来存放横轴纵轴的数据，avgList是Y轴表示利用率，timeList是x轴表示时间，再放到Map中返回给前端

@ApiOperation("查询cpu分析数据列表")
    @PostMapping("getEchartsList/{memoryId}")
    public CommonResult getEchartsList( @PathVariable String memoryId) {

        List<MemoryAnalyse> list=memoryAnalyseService.getEchartsList(memoryId);
        List<String> avgList=new ArrayList<>();
        List<String> timeList=new ArrayList<>();
        Map<String, Object> map = new HashMap<>();
        for (MemoryAnalyse memoryAnalyse:list) {
            avgList.add(memoryAnalyse.getAvgUse().toString());
            timeList.add(memoryAnalyse.getTime());
        }
        map.put("avgList",avgList);
        map.put("timeList",timeList);
        return CommonResult.success(map);

    }

前端：

首先项目安装Echarts：

cnpm install echarts --s

在需要的页面引入：

import echarts from 'echarts'

但是在echarts5.0及以上版本，上面引入方式可能会报错，推荐使用下面方式：

 import * as echarts from 'echarts'

前端页面完整代码如下：

<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width:1350px;height:600px;"></div>
</template>
<script>
    import * as echarts from 'echarts';
    import cpu from '@/api/computer/cpu'
    export default {
        name: '',
        data() {
            return {
                charts: '',
                avgList: null,
                timeList: null,
               xData: ['8','2','3','4','5','6'],
               cpuId: ''
            }
        },
        methods: {

            open() {
                this.$alert('请点击CPU数据分析页面的数据可视化按钮进行查询', '提示！！', {
                confirmButtonText: '确定'
                });
            },
            getDataList(){
                cpu.getEchartsList(this.cpuId)
                    .then(response=>{
                       this.avgList=response.data.avgList
                       this.timeList=response.data.timeList
                       //console.log(this.opinionData)
                       console.log(this.timeList)
                       console.log(this.xData)

                                    this.$nextTick(function() {
                                    this.drawLine('main')
                                })
                    }).catch(error=>{
                    console.log(error)
                   })
            },
            drawLine(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['服务器CPU使用情况']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        //data:
                        data: this.timeList
                    },
                    yAxis: {
                        type: 'value'
                    },

                    series: [{
                        name: '服务器CPU使用情况',
                        type: 'line',
                        stack: '总量',
                        data: this.avgList
                    }]
                })
            }
        },
        //调用
        created(){
             if(this.$route.params && this.$route.params.id){
                    this.cpuId=this.$route.params.id
                    if(this.cpuId==":id"){
                        this.open()
                    }
                    console.log("========="+this.cpuId)
                }
            this.getDataList()
        },

        mounted() {

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

关键在于this.drawLine('main')的调用时间，在created页面创建的时候，调用请求数据的接口，得先获取数据，把avgList，timeList都填充上数据了，再调用this.drawLine('main')进行画图，如果在 mounted() { }里面调用，折线图先画了，但是数据没有渲染上去，就是空的，最终效果如图：

参考链接：Vue+Echarts实现一个折线图