SpringBoot搭建简单的web项目及Echarts地图demo

最新推荐文章于 2024-06-20 17:14:25 发布

weixin_30872789

最新推荐文章于 2024-06-20 17:14:25 发布

阅读量613

点赞数

文章标签： java javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/heiqiubaihu/p/9376669.html

版权

SpringBoot搭建简单的web项目及Echarts地图demo

SpringBoot
Web
Echarts

1.SpringBoot搭建web项目

1.1gradle管理

1.2核心组件

1.3引入jsp解析器

2.配置web项目

2.1配置application和包结构

2.2view视图包jsp配置

2.3application.property文件简单配置

3.简单的echarts地图案例

3.1编写jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>fujian map</title>

</head>
<body>
<script type="text/javascript" src="../../../dist/echarts.js"></script>
<!--fujian地图必须在echarts后面,js方法特性 -->
<script type="text/javascript" src="../../../map/js/province/fujian.js"></script>
<script type="text/javascript" src="../../../theme/dark.js"></script>


<div id="fujian" style="height: 1000px;">
    <!-- 这里以后是地图 -->
</div>
<script type="text/javascript">
    var mapChart1 = echarts.init(document.getElementById('fujian'));
    mapChart1.clear();
    function randomData() {
        return Math.round(Math.random()*1000);
    }
    //配置
    option = {
        title: {
            x:"left",
            text: '福建人口分布',
            textStyle:{
                fontSize:14
                ,fontWeight:'normal'
                ,color:'#565656'
            }
            ,left:20
            ,top:10
        },
        tooltip: {
            trigger: 'item'
            ,formatter:'{b}<br>人口：{c}(万人)'
        },

        visualMap: {
            min: 0,
            max: 2500,
            left:20,
            bottom:10,
            text: ['高','低'],// 文本，默认为数值文本
            color:['#20a0ff','#D2EDFF'],
            calculable: false
        },
        series: [
            {
                type: 'map',
                mapType: '福建',
                roam: false,
                data:[
                    {name: '福州市',value: randomData() },
                    {name: '厦门市',value: randomData() },
                    {name: '泉州市',value: randomData() },
                    {name: '莆田市',value: randomData() },
                    {name: '漳州市',value: randomData() },
                    {name: '宁德市',value: randomData() },
                    {name: '三明市',value: randomData() },
                    {name: '龙岩市',value: randomData() },
                    {name: '南平市',value: randomData() }
                ]
            }
        ]
    };
    mapChart1.setOption(option);

</script>
</body>
</html>

3.2controller控制器

@Controller
@RequestMapping("fujian")
public class FujianMapCoontroller {

    @RequestMapping("map")
    public String fujianMap(){
        return "module/fujian/fujianmap";
    }
}

3.3结果展示

4.总结

    可以开始简单的搭建项目和实现自己的功能,算是一个新的局面

转载于:https://www.cnblogs.com/heiqiubaihu/p/9376669.html

weixin_30872789

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫