SpringBoot整合echarts，前后端逻辑

官方网站：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);
    }
}

统计方法

/** * 统计人数 * @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)注解需要配置类

/** 网站统计日数据 **/ 
@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;
}