官方网站:https://echarts.apache.org/examples/zh/index.html
一、前端
0.安装echarts
npm install echarts --save
1.编写html
用来显示图表,触发显示图标的按钮
<el-button :disabled="btnDisabled" type="primary" icon="el-icon-search" @click="showChart()">查询</el-button>
2.引入echart
四版本
import echarts from 'echarts'
五版本
import * as echarts from 'echarts'
3.编写调用方法
编写方法getDataSta(),用来获取后端数据
//用来获取后端数据
getDataSta(searchObj) {
return request({
url: `/staservice/sta/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,
method: 'get'
})
}
4.编写JS
showChart():用来获取后端传来的数据
其中格式必须为json数组格式
setChart()固定写法
一般只修改x,y轴数据就可以
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.控制层接受前端数据
/** * 图表显示,返回日期和数量数组 * @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
/**
* 获取统计数据
* @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.建表语句
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的方法来统计
定时任务
@Component
public 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);
}
}
统计方法文章来源:https://www.toymoban.com/news/detail-448880.html
/** * 统计人数 * @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)注解 需要配置类文章来源地址https://www.toymoban.com/news/detail-448880.html
/** 网站统计日数据 **/
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="StatisticsDaily对象", description="网站统计日数据")
public class StatisticsDaily implements Serializable {
private static final long serialVersionUID=1L;
@ApiModelProperty(value = "主键")
@TableId(value = "id", type = IdType.ID_WORKER_STR)
private String id;
@ApiModelProperty(value = "统计日期")
private String dateCalculated;
@ApiModelProperty(value = "注册人数")
private Integer registerNum;
@ApiModelProperty(value = "登录人数")
private Integer loginNum;
@ApiModelProperty(value = "每日播放视频数")
private Integer videoViewNum;
@ApiModelProperty(value = "每日新增课程数")
private Integer courseNum;
@ApiModelProperty(value = "创建时间")
@TableField(fill = FieldFill.INSERT)
private Date gmtCreate;
@ApiModelProperty(value = "更新时间")
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date gmtModified;
}
到了这里,关于SpringBoot整合echarts,前后端逻辑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!