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

avatar
作者
筋斗云
阅读量:0

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>

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!