使用echarts实现动态数据柱形图与地图

1.在echarts官网下载js文件
2.在jsp页面引入相关js

<!-- 引入 echarts.js -->
    <script src="echarts-4.2.1/dist/echarts.min.js"></script>
    <script src="echarts-4.2.1/map/js/china.js"></script>

3.在官网案例中找到想要的图形使用ajax获取数据做填充
（1）柱形图

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    $(function () {
        $.ajax({
            url: '${pageContext.request.contextPath}/user/userCount',
            type: 'post', //静态资源
            //data:'',
            datatype: 'json',
            success: function (result) {
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '近一个月用户注册数量',
                    },
                    tooltip: {},
                    legend: {
                        data: ['人数']
                    },
                    xAxis: {
                        data: ["近一周", "近两周", "近三周","近一个月"]
                    },
                    yAxis: {},
                    series: [{
                        name: '人数',
                        type: 'bar',
                        data: result.data
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    });
</script>

（2）地图

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    $(function () {
        $.ajax({
            url: '${pageContext.request.contextPath}/user/sex',
            type: 'post', //静态资源
            //data:'',
            datatype: 'json',
            success: function (result) {
                // 指定图表的配置项和数据
                console.log(result);
                option = {
                    title: {
                        text: '用户分布图',
                        subtext: '持明法洲',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['男', '女']
                    },
                    visualMap: {
                        min: 0,
                        max: 2500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],           // 文本，默认为数值文本
                        calculable: true
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '男',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: result.man
                        },
                        {
                            name: '女',
                            type: 'map',
                            mapType: 'china',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: result.woman
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    });
</script>

4.controller层代码
（1）柱形图

@RequestMapping("userCount")
    public Map<String, Object> userCount() {
        int one = userService.selectUserCount(7);
        int two = userService.selectUserCount(14);
        int three = userService.selectUserCount(21);
        int fore = userService.selectUserCount(30);
        int data[] = null;
        data = new int[4]; //开辟一个长度为3的数组
        data[0] = one;
        data[1] = two;
        data[2] = three;
        data[3] = fore;
        HashMap<String, Object> map = new HashMap<>();
        map.put("data", data);
        return map;
    }

SQL语句：

<select id="selectUserCount" resultType="int">
        select count(id) from cmfz_user where DATEDIFF(now(),create_date) &lt; #{day}
</select>

（2）地图

@RequestMapping("sex")
    public Map<String, Object> sex() {
        HashMap<String, Object> map = new HashMap<>();
        List<UserMap> man = userService.selecctC("男");
        List<UserMap> woman = userService.selecctC("女");
        map.put("man", man);
        map.put("woman", woman);
        return map;
    }

SQL语句：

<select id="selectC" resultType="usermap">
        select count(*) value,province name from cmfz_user where sex=#{sex} group by province
 </select>

注意：在此处usermap是新添加的实体类，里面存string类型的name和int类型的value