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.总结

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

版权声明：本文为heiqiubaihu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/heiqiubaihu/p/9376669.html