企业spark案例 —— 出租车轨迹图表展示（头歌）

最新推荐文章于 2024-07-24 08:30:24 发布

Relive128

最新推荐文章于 2024-07-24 08:30:24 发布

阅读量1k

点赞数 9

文章标签： spark 大数据分布式

本文链接：https://blog.csdn.net/weixin_64999857/article/details/140043577

版权

MainMapper.java：

package net.educoder.app.mapper;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface MainMapper {

//参考
@Select("SELECT _num from taxi_trend WHERE _taxi = #{type} ORDER BY _time")
List<Integer> findTaxiTrendNumByType(String type);
/**********begin**********/
@Select("SELECT _time FROM taxi_trend GROUP BY _time ")
List<String> findTaxiTrendTime();
@Select("select _taxi from taxi_trend group by _taxi")
List<String> findTaxiType();
@Select("SELECT _type from taxi_servicenum GROUP BY _type")
List<String> findTaxiPlatform();
@Select("SELECT _serviceType FROM taxi_servicenum GROUP BY _serviceType ORDER BY _serviceType")
List<String> findAllTaxiService();
@Select("SELECT _num FROM taxi_servicenum WHERE _type = #{Platform} order BY _serviceType ")
List<Integer> findServiceNumByPlatform(String Platform);
/**********end**********/
}

MainController.java：

package net.educoder.app.controller;
import net.educoder.app.entity.Chart_Line;
import net.educoder.app.entity.Chart_Radar;
import net.educoder.app.mapper.MainMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
public class MainController {
/**********begin**********/
@Autowired
MainMapper mainMapper;
@RequestMapping("/index")
public String index() {
return "index";
}
@RequestMapping("/Line_Chart")
@ResponseBody
public Map<String, Object> Line_Chart() {
List<String> taxiType = mainMapper.findTaxiType();
Map<String, Object> map = new HashMap<>();
List<Chart_Line> resultList = new ArrayList<>();
for (String s : taxiType) {
List<Integer> list = mainMapper.findTaxiTrendNumByType(s);
Chart_Line chart_line = new Chart_Line(s, "line", list);
resultList.add(chart_line);
}
List<String> taxiTrendTimeList = mainMapper.findTaxiTrendTime();
map.put("timeList", taxiTrendTimeList);
map.put("resultData", resultList);
return map;
}
@RequestMapping("/Radar_Chart")
@ResponseBody
public Map<String, Object> Radar_Chart() {
Map<String, Object> map = new HashMap<>();
List<String> allTaxiService = mainMapper.findAllTaxiService();
List<HashMap<String, Object>> indicatorList = new ArrayList<>();
for (String s : allTaxiService) {
HashMap<String, Object> stringIntegerHashMap = new HashMap<>();
stringIntegerHashMap.put("name", s);
stringIntegerHashMap.put("max", 100);
indicatorList.add(stringIntegerHashMap);
}
List<String> taxiPlatform = mainMapper.findTaxiPlatform();
List<Chart_Radar> resultList = new ArrayList<>();
for (String s : taxiPlatform) {
List<Integer> serviceNumByPlatform = mainMapper.findServiceNumByPlatform(s);
Chart_Radar chart_radar = new Chart_Radar(s, serviceNumByPlatform);
resultList.add(chart_radar);
}
map.put("resultData", resultList);
map.put("legendData", taxiPlatform);
map.put("indicator", indicatorList);
return map;
}
/**********end**********/
}

index.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="echarts.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<body>
<div id="main" style="width: 1000px;height:600px;"></div>
<div id="main2" style="width: 1000px;height:600px;"></div>
</body>
<script>
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
/**********begin**********/
url: "/Line_Chart",
/**********end**********/
success: function (data) {
option = {
title: {
text: '各出租车平台年使用率'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['A', 'B', 'C']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
/**********begin**********/
data:data.timeList
/**********end**********/
},
yAxis: {
type: 'value'
},
/**********begin**********/
series:data.resultData
/**********end**********/
};
myChart.setOption(option);
},
dataType: "json",
type: "post"
});
var myChart2 = echarts.init(document.getElementById('main2'));
$.ajax({
/**********begin**********/
url:"/Radar_Chart",
/**********end**********/
success:function (data) {
option = {
title: {
text: '各平台各服务数量'
},
tooltip: {},
legend: {
/**********begin**********/
data:data.taxiPlatform
/**********end**********/
},
radar: {
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
/**********begin**********/
indicator:data.indicator
/**********end**********/
},
series: [{
type: 'radar',
/**********begin**********/
data:data.resultData
/**********end**********/
}]
};
myChart2.setOption(option);
},
dataType:"json",
type:"post"
});
</script>
</html>