开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：统计分析-图表显示(前端)】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11512
统计分析-图表显示(前端)
目录：
一、show.vue 代码演示
二、JS sta.js 代码演示
一、show.vue 代码演示
<template>
<div class="app-container">
<!--表单--〉
<el-ferm :inline-"true" class="demo-form- inline">
<el-form- item>
<el-select v-model-"search0bj . type" clearable placeholder="请选择"
<el-option label-"学员登录数统计" value="login num"/>
<el-option label="学员注册数统计”value-"register. num"/>
<el-option label="课程播放数统计”value="video view num"/>
<el-option label="每日课程数统计”value="course. num"/>
</el-select>
<el-form- item>
<el-form-item>
<el-date-picker
v-model=" search0bj.begin"
type="date"
placeholder="选择开始日期”
value= format="yyy-MM-dd" />
</el- form- item>
<el-form- item>
<el-date-picker
v-model=" search0bj . end"
type="date"
placeholder="选择截止日期"
value- format="yyyy-MM-dd" />
</el-form-item>
<el-button
:disabled="btnDisabled"
type="primary"
icon="el-icon-search"
@click=" showChart()">查询</el-button>
</el-form>
<div class="chart-container">
<div id="chart"class="chart"style-"height:
500px ;width:100%" />
</div>
</div>
</template>
<script>
import echarts from ' echarts '
import staApi from '@/api/sta'
export default {
data() {
return
search0bj:{},
btnDisabled:false
},
created() {
methods:{
showChart() {
staApi .getDataSta this. search0bj)
.then(response=> {
this. xData = response. data. data.date_ calculatedlist
this.yData = response. data. data . numDatalist
代码讲解
//然后写完之后来到页面中，在页面中，因为要调的方法，所以首先还是把它先引进来，来引入一下 import staApi from '@/api/sta'，然后下面就来调用一下方法。
首先，现在把这方法换个名字，写起来就更加方便，就叫 set，里面就专门设置 setChart() {，那个参数就叫set，然后在这个 showChart() 里面，因为点击查询按钮，会调用这个叫 showChart()方法，在这里面，就做这个接口调用，然后里边传入这个对象，this search0bj 把这个传过来，然后传之后，加上这么一个叫.then，.then 里边的加一个response 箭头函数，通过 response 得到反映的数据，而反映数据，因为有两部分，也就是说对应的 X 轴和 Y 轴，X轴是在那个日期部分，Y 轴是它的数量，那给他取出来，因为它是在 Map 中，在上面先写两个变量，这个能取值 er，第一个就叫 X data， 就是 X 轴的数据，这第二个叫 Ydata 就是 Y 轴数据。
做个封装，那来取一下，第一个 X 轴，X data，取的是日期部分，写一个 response.data.这是得到在 map 中的日期的名字，复制一下。日期是 datalis t集合这个名字。
把这个渠道，然后第二个是在 Y 轴的数据叫 y data 等于 response.data 加上名字，这个名字应该叫 numdatelist。
所以现在通过调接口，把这两个数据，应该都取到了，一个是 X 轴，一个是 Y 轴，各位能够做到，然后做到之后，最后调用就是调用一下，就是真正生成图表的方法，然后改变里边那个值，用数据库中的值，这位置做个调用，这是第一部分，应该是X轴，X data，然后还有第二个值，把这个过程就最终完成了，主要就是一个结构，所以写完了。
然后这个过程中，有一个点要强调一下，因为现在写的是这个 vue，或者说是 json，这个代码主要是微代码，所以这个代码跟 Java 代码不太一样，举个例子，比如说现在，在这外边写个成员变量，在方法中设置值，其他方法是不是也能去用，肯定没问题，Java 中也都可以，但是在 vue 中这是不可以的。
所以注意一个地方，方法在什么时候的调，是在方法内部调，就是在 response 箭头函数里面调的，如果说把这个代码，比如说放到外面去，那不可以，这里边取不到这个值，这是 vue 中的一个特点，就是指定这个变量有一个使用的范围，只有在当前方法内部才能使用，如果换一个地方，那这个值取不到，所以注意这个特点。
//注意这方法，要设置 X 和 Y 的值，当然这个值，但是通过调接口得到的，所以说在 vue 中，这方法得到之后，只能在方法内部使用，比如把这个调的方法，放到外边去，比如放到这个位置，那这个值是取不到的，会有问题，比如在里边用，这是 vue 的一种特点，所以现在放到这里面设置，或者说把这个代码直接复制过来。都一样的，单独写方法，就为了特别说这个特点是 vue 的特点，然后这个做到之后，最后效果应该体现出来了，最后把它做一个最终测试，看一结果到底对不对。
//调用下面生成图表的方法，改变值
this. setChart( )
})
}，
setChart() {
//
//基于准备好的 dom,初始化 echarts 实例
this.chart = echarts. init( document . getElementById(' chart'))11console.log(this.chart)
//指定图表的配置项和数据
var option = {
// x轴是类目轴(离散数据必须通过data设置类目数据
xAxis: {
type: 'category'，
data: ['Mon','Tue','Wed', 'Thu','Fri','Sat','Sun']
data: this.xData
},
//y 轴是数据轴(连续数据)
yAxis: (
type: 'value'
},
//系列列表。 每个系列通过 type 决定自己的图表类型
series: [(
//系列中的数据内容 数组
data: [820, 932, 901, 934,129013301320],
data: this. yData,
//折线图
type: ' line'
}]
}
this.chart . set0ption(option)
}
}
}
</script>
//用 swagger 先做测试，然后测试之后来找这个前端，但是这些可以去掉，因为做那个测试就是定时任务，执行，每五秒执行一次，那测试一下，现在打开这个 swagger，Local house 应该是8008，打开，打开之后找到，写了一个接口，就是这个里边有三个参数，写一下那三个参数，比如说现在想统计这个注册人数，第一个参数传这个注册人数的值，第二个传个开始时间的值。比如开始时间传一个2020年，这个3月1号，结束时间，传3月20号，这是一个时间范围，然后传完之后，下面点这个 try it out，结果怎么样，先看一下数据，如果数据没有问题，在整合前端，来执行。
返回成功，然后再看数据，第一问数据，制单日期，看到日期就是表中的三个3月3号，3月5号和3月9号也就这三个，然后后面是对应的注册人数10，40和三，然后看表里面数据是对的，所以把这个构建出来了。
这些数据中，这里边因为返回一个 map 即可，刚才 map 会变成个对象，形式里面有 Key value，value 是个 lis 集合，而 list 集合变成是一个 json 的数组形式，这是第一个数组，这是第二个数组，然后在页面中显示就可以做到。然后接口写完之后，下面来整一下前端。按照这个过程来写一下。
二、JS sta.js 代码演示
import request from '@/utils request'
export default {
//1生成统计数据
createStaData(day) {
return request({
url:' /staservice/ sta/ registerCount/ '+day,
method : 'post'
})
}，
//2获取统计数据
getDataSta() {
return request){
url: '/staservice/ sta/ showData/ . +day,
url: '/staservice/ sta/ showData/${ search0bj. type}/${search0bj.begin}/${search0bj.end},
method: 'post '
})
}
}
//首先第一步还是在这个 API 中，把这个方法先做个定义。第二个方法就是获取到统计的数据，然后进行一个显示，那这方法起个名字，比如 getDataSta()，然后在方法中最注意，里边有一个特点，因为在页面中，使用这个对象的封装，所以里边直接就全部对象，然后下面，写上的那个方法，把方法的地址，复制一下这个地址。
url:' /staservice/ sta/ registerCount/ '+day,
//注意现在前端是一个对象，但后端要接收的并不是对象，就是可以改成对象，加个传播对象。
但现在不是传对象，是把三个值，通过路径是传过来了，所以需要把这个做个处理。
传播对象肯定更方便，在接口中是个参数，但前端就是对象，做法首先第一个，把符号先变成不能用表达式的符号，然后在里边加上这个表达式${ search0bj.type}/${search0bj .begin}/${search0bj.end}。
因为现在在前端是一个对象。
就是 search0bj，接口中，就是三个独立的值，做法就是用表达式从对象中把值取出来，分别是 type，begin，end等，要跟对应起来。传过来，表达式还是写到符号中，然后体现出来，最后提交方式是 get 提交。
