因項目需求進行根據區域統計,所以需要省市縣鎮四級聯動.話不多說,上代碼
1html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/echarts.js"></script>
</head>
<body>
<div class="windowinfo">
<div class="breadcrumb">
<!--運維管理 >區域使用統計-->
<!--<a href="javascript:;">區域使用統計</a>-->
</div>
<!--layui-form start-->
<div class="layui-form">
<!--layui-form-item start-->
<div class="layui-form-item layui-input-block">
<label class="layui-form-label">選擇統計日期方式</label>
<div class="layui-input-inline">
<select name="riqi" id="riqi">
<option value="1">天</option>
<option value="2">周</option>
<option value="3">月</option>
<option value="4">年</option>
</select>
</div>
<!--選擇地點-->
<label class="layui-form-label">選擇統計地點：</label>
<div class="layui-input-inline">
<select name="companyId" lay-verify="required" lay-filter="companyId" id="companyId" lay-search>
<option value="">請選擇省份</option>
</select>
</div>
<div class="layui-input-inline">
<select name="departmentId" lay-verify="required" lay-filter="departmentId" id="departmentId" lay-search>
<option value="">請選擇市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="departmentSecondId" lay-verify="required" lay-filter="departmentSecondId" id="departmentSecondId" lay-search>
<option value="">請選擇縣</option>
</select>
</div>
<div class="layui-input-inline">
<select name="departmentFourId" lay-verify="required" lay-filter="departmentFourId" id="departmentFourId" lay-search>
<option value="">請選擇鎮/街道</option>
</select>
</div>
<button type="button" class="layui-btn" data-type="reload" id="search">統計</button>
<button type="reset" class="layui-btn">重置</button>
<!--<button type="button" class="layui-btn" lay-submit lay-filter="search">查詢</button>-->
</div>
</div>
</div>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="lib/jquery-1.9.1.js"></script>
<script src="lib/layui/layui.all.js"></script>
<script src="js/list_region.js"></script>
</body>
</html>
2js部分==也就是html上面的js/list_region.js
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: '第一個 ECharts 實例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
//=========================================layui四級聯動=start==============================
layui.use(['element', 'form'], function () {
var element = layui.element,
form = layui.form;
//======================1級菜單===================
$(function () {
$.ajax({
async: false,
type: "POST",
url: "/userErp/torder/getAddressByCity.do?cityType=1&cityNameF=''", //統計機櫃地址
success: function (result) {
// console.log(result);
var list = result.data;
var s = '<option value="">請選擇省份</option>';
$.each(list, function (i, company) {
// console.log(company);
s = s + '<option value="' + company + '">' + company + '</option>';
});
$("#companyId").html(s);
form.render('select');
}
});
});
//======================2級菜單===================
form.on('select(companyId)', function (data) {
var companyId = data.value;
var s = '<option value="">請選擇市</option>';
if (companyId == '') {
$("#departmentId").html(s);
form.render('select');
} else {
$.ajax({
async: false,
type: "POST", //提交方式
url: "/userErp/torder/getAddressByCity.do?cityType=2&cityNameF="+companyId,//路徑
data: {
companyId: companyId
},
success: function (result) {
var list = result.data;
// console.log(result);
$.each(list, function (i, department) {
s = s + '<option value="' + department + '">' + department + '</option>';
});
$("#departmentId").html(s);
form.render('select');
}
});
}
});
//======================3級菜單===================
form.on('select(departmentId)', function (data) {
var departmentId = data.value;
var s = '<option value="">請選擇縣</option>';
if (departmentId == '') {
$("#departmentSecondId").html(s);
form.render('select');
} else {
$.ajax({
async: false,
type: "POST", //提交方式
url: "/userErp/torder/getAddressByCity.do?cityType=3&cityNameF="+departmentId,//路徑
data: {
companyId: departmentId
},
success: function (result) {
var list = result.data;
// console.log(result);
$.each(list, function (i, department) {
s = s + '<option value="' + department + '">' + department + '</option>';
});
$("#departmentSecondId").html(s);
form.render('select');
}
});
}
});
//======================4級菜單===================
form.on('select(departmentSecondId)', function (data) {
var departmentSecondId = data.value;
var s = '<option value="">請選擇鎮/街道</option>';
if (departmentSecondId == '') {
$("#departmentFourId").html(s);
form.render('select');
} else {
$.ajax({
async: false,
type: "POST", //提交方式
url: "/userErp/torder/getAddressByCity.do?cityType=4&cityNameF="+departmentSecondId,//路徑
data: {
companyId: departmentSecondId
},
success: function (result) {
var list = result.data;
// console.log(result);
$.each(list, function (i, department) {
s = s + '<option value="' + department + '">' + department + '</option>';
});
$("#departmentFourId").html(s);
form.render('select');
}
});
}
});
})
//=========================================layui四級聯動=end==============================
3java後臺請求部分
@RequestMapping("/getAddressByCity.do")
@ResponseBody
public ServerResponse getAddressByCity(String cityType,String cityNameF) {
List<String> listCity = new ArrayList<>();
if(cityType != null && "1".equals(cityType)){//1級菜單
listCity = WeixinCrmMerchantPhoneService.getAddressByCity1();
}else if(cityType != null && "2".equals(cityType) && cityNameF != null && !"".equals(cityNameF)){ //根據名稱查詢2級菜單
listCity = WeixinCrmMerchantPhoneService.getAddressByCity2(cityNameF);
}else if(cityType != null && "3".equals(cityType) && cityNameF != null && !"".equals(cityNameF)){ //根據名稱查詢2級菜單
listCity = WeixinCrmMerchantPhoneService.getAddressByCity3(cityNameF);
}else if(cityType != null && "4".equals(cityType) && cityNameF != null && !"".equals(cityNameF)){ //根據名稱查詢2級菜單
listCity = WeixinCrmMerchantPhoneService.getAddressByCity4(cityNameF);
}
return ServerResponse.createBySuccess(listCity);
}
注意:1這裏只是返回一個list<string> 所以前端js獲取的部分也是list,因爲我需要的value和name都是相同的,如果有不一樣的可以使用map或者其它
2:這裏的echarts沒有整理完畢,只是做一個初步的使用,可以先略過.只看四級聯動部分