Echarts整合(前后端、数据库)
官方网站:https://echarts.apache.org/examples/zh/index.html
一、前端
0.安装echarts
npm install echarts --save
1.编写html
用来显示图表
```html
```
触发显示图标的按钮
html <el-button :disabled="btnDisabled" type="primary" icon="el-icon-search" @click="showChart()">查询</el-button>
2.引入echart
四版本
js import echarts from 'echarts'
五版本
js import * as echarts from 'echarts'
3.编写调用方法
编写方法getDataSta(),用来获取后端数据
js //用来获取后端数据 getDataSta(searchObj) { return request({ url: `/staservice/sta/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`, method: 'get' }) }
4.编写js
showChart():用来获取后端传来的数据
其中格式必须为json数组格式
setChart()固定写法
一般只修改x,y轴数据就可以
```js methods:{ showChart() { staApi.getDataSta(this.searchObj) .then(response => { console.log('*****' response) this.yData = response.data.numDataList this.xData = response.data.date_calculatedList
-
//调用下面生成图表的方法,改变值
-
this.setChart()
-
})
}, setChart() { // 基于准备好的dom,初始化echarts实例 this.chart = echarts.init(document.getElementById('chart')) // console.log(this.chart)
-
// 指定图表的配置项和数据
-
var option = {
-
title: {
-
text: '数据统计'
-
},
-
tooltip: {
-
trigger: 'axis'
-
},
-
dataZoom: [{
-
show: true,
-
height: 30,
-
xAxisIndex: [
-
0
-
],
-
bottom: 30,
-
start: 10,
-
end: 80,
-
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-
handleSize: '110%',
-
handleStyle: {
-
color: '#d3dee5'
-
-
},
-
textStyle: {
-
color: '#fff'
-
},
-
borderColor: '#90979c'
-
},
-
{
-
type: 'inside',
-
show: true,
-
height: 15,
-
start: 1,
-
end: 35
-
}],
-
// x轴是类目轴(离散数据),必须通过data设置类目数据
-
xAxis: {
-
type: 'category',
-
data: this.xData
-
},
-
// y轴是数据轴(连续数据)
-
yAxis: {
-
type: 'value'
-
},
-
// 系列列表。每个系列通过 type 决定自己的图表类型
-
series: [{
-
// 系列中的数据内容数组
-
data: this.yData,
-
// 折线图
-
type: 'line'
-
}]
-
}
-
-
this.chart.setOption(option)
} } ```
二、后端
1.控制层接受前端数据
java /** * 图表显示,返回日期和数量数组 * @param begin 开始日期 * @param end 结束日期 * @param type 查询类型 * @return */ @ApiOperation("图表显示,返回日期和数量数组") @GetMapping("showData/{type}/{begin}/{end}") public Result showData(@PathVariable String type, @PathVariable String begin, @PathVariable String end){ Map<String,Object> map = statisticsDailyService.getData(type,begin,end); return Result.ok().data(map); }
2.实现类的方法
获取数据库中的数据,
将结果封装在两个list中
日期list\ 数量list
java /** * 获取统计数据 * @param type 查询类型(注册、播放数量等) * @param begin 开始时间 * @param end 结束时间 * @return map */ @Override public Map<String, Object> getData(String type, String begin, String end) { QueryWrapper<StatisticsDaily> queryWrapper = new QueryWrapper<>(); //筛选日期 queryWrapper.between("date_calculated",begin,end); //精准查询日期和选择的类型 queryWrapper.select("date_calculated",type); List<StatisticsDaily> statisticsDailies = baseMapper.selectList(queryWrapper); //将结果封装在两个list中 //日期list List<String> dateCalculatedList = new ArrayList<>(); //数量list List<Integer> countList = new ArrayList<>(); for (StatisticsDaily daily : statisticsDailies) { dateCalculatedList.add(daily.getDateCalculated()); switch (type) { case "login_num": countList.add(daily.getLoginNum()); break; case "register_num": countList.add(daily.getRegisterNum()); break; case "video_view_num": countList.add(daily.getVideoViewNum()); break; case "course_num": countList.add(daily.getCourseNum()); break; default: break; } } HashMap<String, Object> map = new HashMap<>(); map.put("date_calculatedList",dateCalculatedList); map.put("numDataList",countList); return map; }
三、数据库
1.建表语句
sql CREATE TABLE `statistics_daily` ( `id` char(19) NOT NULL COMMENT '主键', `date_calculated` varchar(20) NOT NULL COMMENT '统计日期', `register_num` int(11) NOT NULL DEFAULT '0' COMMENT '注册人数', `login_num` int(11) NOT NULL DEFAULT '0' COMMENT '登录人数', `video_view_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日播放视频数', `course_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日新增课程数', `gmt_create` datetime NOT NULL COMMENT '创建时间', `gmt_modified` datetime NOT NULL COMMENT '更新时间', PRIMARY KEY (`id`), KEY `statistics_day` (`date_calculated`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='网站统计日数据';
2.记录来源
方法一:在控制层有可以主动调用的接口来查询注册人数等数据信息
方法二:在定时任务中可以每天定时调用service的方法来统计
定时任务
java @Componentpublic class ScheduleTask { @Autowired private StatisticsDailyService statisticsDailyService; /** * 定时任务 * 每天凌晨1点自动查询前一天的统计数据 */ @Scheduled(cron = "0 0 1 * * ?") public void updateStatisticsInfo() { //计算前一天日期 String preDay = DateUtil.formatDate(DateUtil.addDays(new Date(),-1)); statisticsDailyService.countRegister(preDay); }}
统计方法
java /** * 统计人数 * @param day 日期 */ @Transactional(rollbackFor = Exception.class) @Override public void countRegister(String day) { //防止重复添加,先删除 baseMapper.delete(new QueryWrapper<StatisticsDaily>().eq("date_calculated",day)); Result result = ucenterClient.countRegister(day); int countRegister = (int)result.getData().get("countRegister"); StatisticsDaily statisticsDaily = new StatisticsDaily(); //赋值统计的数据 statisticsDaily.setRegisterNum(countRegister); statisticsDaily.setDateCalculated(day); // TODO 随机数改为真实数据 statisticsDaily.setVideoViewNum( RandomUtils.nextInt(100,200)); statisticsDaily.setLoginNum(RandomUtils.nextInt(100,200)); statisticsDaily.setCourseNum(RandomUtils.nextInt(100,200)); //添加到数据库中 baseMapper.insert(statisticsDaily); }
四、实体数据
@TableField(fill = FieldFill.INSERT_UPDATE)注解 需要配置类
```java package com.gyb.staservice.entity;
import com.baomidou.mybatisplus.annotation.FieldFill; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import io.swagger.annotations.ApiModel; import io.swagger.annotations.ApiModelProperty; import lombok.Data; import lombok.EqualsAndHashCode; import lombok.experimental.Accessors;
import java.io.Serializable; import java.util.Date;
/** *
* 网站统计日数据 *
* * @author 郜宇博 * @since 2021-10-27 */ @Data @EqualsAndHashCode(callSuper = false) @Accessors(chain = true) @ApiModel(value="StatisticsDaily对象", description="网站统计日数据") public class StatisticsDaily implements Serializable {-
private static final long serialVersionUID=1L;
-
-
-
-
private String id;
-
-
-
private String dateCalculated;
-
-
-
private Integer registerNum;
-
-
-
private Integer loginNum;
-
-
-
private Integer videoViewNum;
-
-
-
private Integer courseNum;
-
-
-
-
private Date gmtCreate;
-
-
-
-
private Date gmtModified;
} ```
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghfghe
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13