初始化渲染ECharts表格，layui 实现二级下拉动态赋值并实现提交渲染

html

<div class="layui-card-body">
	<div class="layui-form">
		<div class="layui-form-item">
			<label class="layui-form-label">村/社区</label>
			<div class="layui-input-inline">
			<select name="village" id="village" lay-filter="village">
				<option value="">请选择村/社区</option>
			</select>
			</div>
			<label class="layui-form-label">网格：</label>
			<div class="layui-input-inline">
			<select name="gridding" id="gridding" lay-filter="gridding">
			<option value="">请选择网格</option>
			</select>
			</div>
			<button class="layui-btn layui-btn-normal" id="statistics" lay-submit lay-filter="statistics">统计</button>
		</div>
	</div>
	<div id="hometwo" style="width: 100%; height: 400px"></div>
</div>

初始化渲染ECharts表格

function gridpeople(village) {
	$.ajax($url+'/jxkh/S0008F0006_3', {
		data: {
			csq: village
		},
		dataType: 'json', //服务器返回json格式数据
		type: 'post', //HTTP请求类型
		async: true,
		timeout: 10000, //超时时间设置为10秒；
		success: function(data) {
			let gridpeopledata = data.data;
			$(".gridpeopledatatime").text(gridpeopledata.beginTime + " 至 " + gridpeopledata.endTime);
			let gridpeoplename = gridpeopledata.xAxis;
			let gridpeoplenum = gridpeopledata.series[0].data;
			let myCharttwo = echarts.init(document.getElementById('hometwo'));
			let optiontwo = {
				title: {
					text: ''
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b}: {c}"
				},
				toolbox: {
					feature: {
						dataView: {
							show: true,
							readOnly: false
						},
						magicType: {
							show: true,
							type: ['line', 'bar']
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				legend: {
					data: ['处理案件']
				},
				xAxis: {
					type: 'value',
				},
				yAxis: {
					type: 'category',
					data: gridpeoplename
				},
				dataZoom: [{
						type: 'slider',
						xAxisIndex: 0,
						filterMode: 'empty'
					},
					{
						type: 'slider',
						yAxisIndex: 0,
						filterMode: 'empty'
					}
				],
				series: [{
					name: '处理案件',
					type: 'bar',
					data: gridpeoplenum,
					itemStyle: {
						normal: {
							color: function(params) {
								var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83','#ca8622','#bda29a', '#6e7074','#546570','#c4ccd3'								];
								return colorList[params.dataIndex]
							},
						}
					},

				}],
			};
			myCharttwo.setOption(optiontwo);
		},
		error: function(xhr, type, errorThrown) {

		}
	});
}

一级下拉先赋值

//网格员排名统计下拉赋值
function selectone() {
	$.ajax({
		url: $url+'/jxkh/S0008F0006_1',
		dataType: 'json',
		type: 'post',
		success: function(data) {
			$("#village").empty();
			if (data.result == 200) {
				$("#village").append(new Option("请选择村/社区", ""));
				$.each(data.data, function(index, item) {					
					$('#village').append(new Option(item));
				});
			} else {
				$("#village").append(new Option("暂无数据", ""));
			}
			layui.form.render("select");
		}
	})
}

二级下拉框赋值并提交再次渲染表格

form.on('select(village)', function(data) {
		var seone = data.value;
		$.ajax({
			url: $url+"/jxkh/S0008F0006_2",
			type: "post",
			dataType: "json",
			data: {
				csq: seone
			},
			success: function(data) {				
				if (data.result == 200) {
					$("#gridding").empty();
					$("#gridding").append(new Option("请选择网格", ""));
					$.each(data.data, function(index, item) {
						$('#gridding').append(new Option(item));
					});
				} else {
					$("#gridding").append(new Option("暂无数据", ""));
				}
				layui.form.render("select");
			}
		})
	})
	form.on('submit(statistics)', function(data){
	   var village = data.field.village;
	   var gridding = data.field.gridding;
	   $.ajax($url+'/jxkh/S0008F0006_3', {
	   	data: {
	   		csq: village,
			wg:gridding
	   	},
	   	dataType: 'json', //服务器返回json格式数据
	   	type: 'post', //HTTP请求类型
	   	async: true,
	   	timeout: 10000, //超时时间设置为10秒；
	   	success: function(data) {
	   		let gridpeopledata = data.data;
	   		console.log(gridpeopledata);
	   		$(".gridpeopledatatime").text(gridpeopledata.beginTime + " 至 " + gridpeopledata.endTime);
	   		let gridpeoplename = gridpeopledata.xAxis;
	   		let gridpeoplenum = gridpeopledata.series[0].data;
	   		let myCharttwo = echarts.init(document.getElementById('hometwo'));
	   		let optiontwo = {
	   			title: {
	   				text: ''
	   			},
	   			tooltip: {
	   				trigger: 'item',
	   				formatter: "{a} <br/>{b}: {c}"
	   			},
	   			toolbox: {
	   				feature: {
	   					dataView: {
	   						show: true,
	   						readOnly: false
	   					},
	   					magicType: {
	   						show: true,
	   						type: ['line', 'bar']
	   					},
	   					restore: {
	   						show: true
	   					},
	   					saveAsImage: {
	   						show: true
	   					}
	   				}
	   			},
	   			legend: {
	   				data: ['处理案件']
	   			},
	   			xAxis: {
	   				type: 'value',
	   			},
	   			yAxis: {
	   				type: 'category',
	   				data: gridpeoplename
	   			},
	   			dataZoom: [{
	   					type: 'slider',
	   					xAxisIndex: 0,
	   					filterMode: 'empty'
	   				},
	   				{
	   					type: 'slider',
	   					yAxisIndex: 0,
	   					filterMode: 'empty'
	   				}
	   			],
	   			series: [{
	   				name: '处理案件',
	   				type: 'bar',
	   				data: gridpeoplenum,
	   				itemStyle: {
	   					normal: {
	   						color: function(params) {
	   							var colorList = [
	   								'#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074',
	   								'#546570',
	   								'#c4ccd3'
	   							];
	   							return colorList[params.dataIndex]
	   						},
	   					}
	   				},
	   
	   			}],
	   		};
	   		myCharttwo.setOption(optiontwo);
	   	},
	   	error: function(xhr, type, errorThrown) {
	   
	   	}
	   });
	   
	  return false; 
	});