文章目录
1、实现的效果
2、前端代码
<template>
<div>
<h3 style="color: black;text-align: left">汽车租赁情况数据分析</h3>
<hr>
<div ref="chart2" style="width:50%;height:376px; float: left"></div>
<div style="width:50%;height:376px;float: right" ref="chart"></div>
<div style="width:100%;height:376px;float: left">
<div style="margin-top: 5px">
<hr>
<h1 style="float: left">友情提示:</h1><br><br><br><br>
<span style="float: left">1、商家可以根据租赁汽车的排名情况、加大对热门汽车的推广和上新</span>
<br><br>
<span style="float: left">2、根据各类汽车租赁情况的总体展示，及时调整汽车商品的管理</span>
<br><br>
<span style="float: left">3、商家可以及时了解用户对租赁汽车商品的租赁情况</span>
</div>
</div>
</div>
</template>
<script>
//局部引用
const echarts = require('echarts');
export default{
data(){
return {
}
},
methods: {
initCharts2(){
const _this = this
// 基于准备好的dom，初始化echarts实例
let myChart2 = echarts.init(this.$refs.chart2);
var values =[];
//请求后台数据
axios.get('/static/getcarranking').then(function (resp) {
if(resp.data.code==200){
console.log(resp.data.data.carRank.length)
console.log(resp)
for( var i =0;i<resp.data.data.carRank.length;i++){
var test={"value":resp.data.data.carRank[i].value,"name":resp.data.data.carRank[i].name}
values.push(test);
}
// 绘制图表
myChart2.setOption({
title: {
text: '汽车租赁排名前六展示',
left:'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient:'vertical',
left: 'left',
data:values
},
series: [
{
name: '数据来源',
type: 'pie',
radius:'60%',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: values
}
]
});
}
})
},
initCharts(){
const _this =this
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(this.$refs.chart);
var names=[]; //横坐标数组
var values =[]; //纵坐标数组
//请求后台数据
axios.get('/static/getcartypenum').then(function (resp) {
if(resp.data.code==200){
console.log(resp.data.data.carTypeNum.length)
console.log(resp)
for( var i =0;i<resp.data.data.carTypeNum.length;i++){
names.push(resp.data.data.carTypeNum[i].name);
values.push(resp.data.data.carTypeNum[i].value);
}
// 绘制图表
myChart.setOption({
title: { text: '不同类型汽车租赁情况' },
tooltip: {},
xAxis: {
data: names
},
yAxis: {},
series: [{
name: '租赁数量',
type: 'bar',
data: values
}]
});
}
})
}
},
//一加载页面就调用
mounted () {
this.initCharts();
this.initCharts2();
}
}
</script>
<style>
</style>
3、后端controller代码
package com.zheng.yu.controller;
import com.zheng.yu.config.response.Result;
import com.zheng.yu.pojo.Wallet;
import com.zheng.yu.service.*;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Api(value = "数据分析", tags = "数据分析")
@ApiModel
@RestController
public class DataStatisticsController {
@Autowired
DataStatisticsService dataStatisticsService;
@Autowired
UserService userService;
@Autowired
OrderService orderService;
@Autowired
CarService carService;
@Autowired
WalletService walletService;
//查询汽车租赁情况
@RequestMapping(value = "/static/getcarranking", method = RequestMethod.GET)
public Result getCarRanking(){
List<HashMap<String, Object>> list = dataStatisticsService.getCarRanking();
System.out.println(list);
return Result.ok().data("carRank",list);
}
//不同类型的汽车的销量
@RequestMapping(value = "/static/getcartypenum", method = RequestMethod.GET)
public Result getCarTypeNum(){
Map<String, String> map = new HashMap<String, String>();
// List<HashMap<String, String>> list = mapper.getRentAmountMonthDetail(startTime, endTime);
List<HashMap<String, Object>> list = dataStatisticsService.getCarTypeNum();
System.out.println(list);
return Result.ok().data("carTypeNum",list);
}
}
4、servie层代码
package com.zheng.yu.service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public interface DataStatisticsService {
//查询各种汽车的租赁数量
public List<HashMap<String, Object>> getCarTypeNum();
//查询汽车的租赁排行情况
public List<HashMap<String,Object>> getCarRanking();
}
5、serviceImpl层代码
package com.zheng.yu.service.Impl;
import com.zheng.yu.mapper.DataStatisticsMapper;
import com.zheng.yu.service.DataStatisticsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class DataStatisticsServiceImpl implements DataStatisticsService {
@Autowired
DataStatisticsMapper dataStatisticsMapper;
// 查询各种汽车的租赁数量
public List<HashMap<String, Object>> getCarTypeNum() {
return dataStatisticsMapper.getCarTypeNum();
}
//查询汽车的租赁排行情况
public List<HashMap<String, Object>> getCarRanking() {
return dataStatisticsMapper.getCarRanking();
}
}
6、mapper层代码
package com.zheng.yu.mapper;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Mapper
@Repository
public interface DataStatisticsMapper {
//查询各种汽车的租赁数量
public List<HashMap<String, Object>> getCarTypeNum();
//查询汽车的租赁排行情况
public List<HashMap<String,Object>> getCarRanking();
}
7、xml中的sql语句
<?xml version="1.0" encoding="UTF8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zheng.yu.mapper.DataStatisticsMapper">
<!-- 查询汽车类型总的租赁情况-->
<select id="getCarTypeNum" resultType="java.util.HashMap">
select type as name ,count(type) as value from carshop.order_item group by type
</select>
<select id="getCarRanking" resultType="java.util.HashMap">
select name ,count(name) as value from carshop.order_item
group by name
order by count(name) desc limit 6
</select>
</mapper>
8、遇到的问题
8.1 怎样将查询的结果封装成map ？
解决方法：resultType=“java.util.HashMap”
接收查询出来的结果 ： List<HashMap<String,Object>>
8.2 怎样在一个页面中同时设置几个表格？
直接写在方法里进行，有几个表格就写几个方法
基本流程：
- 1、基于准备好的dom，初始化echarts实例（自己设置的div，就是图表放置的位置）
- 2、方法的调用，将后端的数据拿到，赋予给前端的数据集合
- 3、绘制图标、将数据替换（数据库中的数据替换假数据）
- 4、加载页面调用，进行方法的初始化
