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.總結
可以開始簡單的搭建項目和實現自己的功能,算是一個新的局面